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

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

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

ぜひご覧ください。

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

字幕

このレッスンでは JavaScript と jQuery を使って フォームバリデーションを 実装していくにあたり フォーム部分にスタイルシートをあてて デザインを調整する方法について解説します まず ダウンロードしてきた こちらの form_css のフォルダの中にある― これら3つのファイルを エディターで開いて下さい これが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めていきます 早速レッスンを始めていきます 今回は前回解説したフォーム部分の HTML に対して CSS を充てていくことになります では stylesheet.css を見てみます すると このように 既に今回説明する スタイルシートの記述が 完了していることが分かります 今回は この中から いくつかポイントとなる点を ピックアップして説明します では このスタイルシートを HTML から しっかり読み込めているかどうかを確認します index.html を開きます こちらの head タグの中に link タグで このように CSS を読み込んでいる 記述があります 外部ファイル化したスタイルシートは 必ず このようにして CSS ファイルを 読み込むようにして下さい では CSS ファイルを見てみましょう こちらの CSS ファイル自体は特に 特別なことはしていません 普段どおりに レイアウトやデザインを 調整していく手順で スタイルシートを書いています いくつかポイントとなる点としては 例えば こちらの #mailform の form タグの直下にある div タグに display: table をつけています そして その div の中にある dl には このように display: table-row をつけています 更に その下にある dt と dd 要素 こちらには display: table-cell をつけています このようにすることで table タグを使わなくても table 組みのようにレイアウトを 組んでいくことができます もう1点見ておきたいのが 下の方にある こちらの「エラー表示部分」です この部分では クラス error の属性を持つ p タグに対して レイアウトをスタイルシートで指定しています この部分はユーザーが入力した内容に エラーがあった場合に 表示する項目となりますが 普段は隠しておく必要があります 今は display: block で 表示されてる状態ですね では この状態で一度ブラウザで index.html を確認してみましょう こちらの index.html をブラウザで開きます すると このような形で表示されてきます この部分が先程の クラス error の属性を持つ p タグとなります それでは スタイルシートが 適切に反映されていて しっかりとレイアウトが調整されているのを 確認してから エディターに戻ります 最後に こちらの display: block の所を display: none にしておいてあげましょう これで先程のクラス error の 属性がついた p タグ ― 要するにエラー表示枠ですね― この部分をデフォルトで 消しておくことができます あとはバリデーションの機能を動かした時に 入力内容にエラーがあった時だけ こちらの p タグを表示させるように JavaScript で組んであげればOKです 以上でレッスンは終了です 今回はフォームバリデーションを 実装するにあたっての― フォーム部分の CSS コーディングの 方法について解説しました 以降のレッスンでは 実際に JavaScript と jQuery を利用して バリデーション機能を 実装していくにあたっての準備について 解説していきますので そちらも合わせてご覧下さい

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

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

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

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

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

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