JavaScript と jQueryで作るフォームバリデーション

フォーム部分のHTMLコーディング

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォームバリデーションを実装するにあたり、HTMLコーディングをする際の製作のポイントをご紹介します。
講師:
04:06

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを実装するにあたり まずはフォーム部分の― HTML コーディング方法について 解説いたします まずはダウンロードしたこちらの form_html というフォルダの中に入っている これら3つのファイルを エディタで開いてください そしてこれが それらのファイルを 開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それではさっそく始めていきましょう まず現状のファイルの内容の確認を しておきたいと思います まずこちらが index.html ですね 今回ご説明する HTML のコーディングは 完了している状態 となっています このファイルを使いながら HTML のコーディングのポイント について いくつか見ていきたいと思います そして他には javascript.js と こちらの stylesheet.css こちらはともに何も書かれていない状態です それでは index.html に戻ります HTML コーディングのポイントについて 幾つか順を追ってみていきたいと思います まずはフォームになるのでこちらのように フォームタグ で囲っていますね その中に

というのを作っています そしてその中に各フォームの要素を
で囲ってそれぞれ作っています まず
の中には
があって その
には入力項目のタイトル そしてこちらの
には 実際のフォームの部分 つまりフォームの部品 例えばインプット要素やテキストエリア要素 他にはセレクト要素などがあります それらをこちらの
に入れています そしてその入力要素の下には

タグで 「 class="error" 」という要素を作っています この

タグにはユーザーが 入力した内容にエラーがあった場合に そのエラーの内容をこの

タグの間に 格納するために設置しています そしてエラーがあった場合にはこの

タグ自体を表示させる― といった形になります これらの要素 この

で 囲まれた部分ですが これが一つの入力項目として それぞれ下に並んでいるという状態です そしてこの
要素には目印となる様に 「 id 」 をそれぞれ振っています 例えばここでは "onamae" そしてその下には id="furigana1" さらにその下には id="furigana2" などを付けています そしてこのフォームの一番最後の部分には 送信ボタンを作っています id="submit" の値をもった

タグです この中にボタン要素で 送信ボタンを作成しています それではこの状態で一度 index.html を ブラウザで開いて内容を確認してみましょう 確認するブラウザは Chrome ブラウザを利用します それではこちらの index.html を 開いてみます するとこのような形で表示されます それではエディタに戻ります 以上でレッスンの終了です 今回はフォームバリデーションを 実装するにあたってのフォーム部分の HTML コーディングの方法について 解説いたしました 以降のレッスンではこのフォーム部分に スタイルシートを当ててデザインを 調整する方法について解説していきますので そちらもあわせてご覧下さい

JavaScript と jQueryで作るフォームバリデーション

このコースではJavaScriptとjQueryを使ってユーザー登録フォームなどでユーザーが入力忘れや誤記入した場合にユーザーに通知するフォームバリデーション機能を実装する方法を学習します。JavaScriptとjQueryの説明からHTMLやCSSコーディングの仕方、入力必須項目のチェック方法についても紹介します。

1時間45分 (18 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年11月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。