【レイアウト構成】番外編:プラグイン「Datepicker」/カレンダー&入力チェック

レイアウト構成

サイト全体のレイアウト構成

コーディングのヒント!

全体をdivタグで囲みます。

タイトル
ページタイトルをh1タグで記述します。
フォーム
フォーム全体をformタグで囲みます。
ラベルと入力フィールドをdl、dt、ddタグを使用してFlexboxで横並びに配置します。
予約日
inputタグにidを指定しておき、そのidに対してjsファイル内でdatepicker()を実行することで、カレンダーが使えるようになります。
※今回はデフォルトのカレンダーを使用していますが、オプションを設定したりCSSを変更することでカレンダーをカスタマイズすることができます。
使い方を理解したらカスタマイズにも挑戦してみましょう!
受講形式
ラジオボタンが変更されたタイミングで下のテキストを切り替えます。
下のテキストはあらかじめ2つとも用意しておき、片方は「display: none;」で非表示に設定します。ラジオボタンが変更されたタイミングでchangeイベントを使って、選択されたラジオボタンのテキストを「display: block;」、選択されていない方のテキストを「display: none;」に変更して表示、非表示を切り替えます。
入力項目の必須チェック
申し込みボタンのclickイベント内にチェック処理を記述します。
項目が入力されているかどうかはval()で値を取得して確認できます。未入力の場合は、入力項目下に定義しておいたid属性に対してtext()でエラーメッセージを設定して表示します。

コーディング練習メニューに戻る

関連記事

コーディング練習一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習