前編・中編では、HTML の基本構造やよく使うタグ、属性、セマンティック HTML について学びました。後編では、フォームの作成とバリデーションについて説明します。
5. フォームを作ってみよう
フォームは、ユーザーがウェブサイトに情報を入力・送信するための仕組みです。例えば、お問い合わせフォームやログインフォーム、会員登録フォームなど、様々な場面で使われます。
<form> で入力フォームを作成
フォームを作るには、まず <form> タグでフォーム全体を囲みます。
html
<form action="/submit" method="post">
<!-- ここにフォームの内容が入ります -->
</form>action属性：フォームのデータの送信先 URL を指定します。method属性：フォームのデータの送信方法を指定します。getとpostの2種類があり、一般的にはpostが使われます。
<input> でいろんな入力欄を設置
フォームの中に、<input> タグを使って様々な入力欄を設置することができます。<input> タグは、type 属性の値によって、様々な種類の入力欄に変化します。
html
<label for="name">名前：</label>
<input type="text" id="name" name="name"><br>
<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email"><br>
<label for="password">パスワード：</label>
<input type="password" id="password" name="password"><br>type="text"：1行のテキスト入力欄type="email"：メールアドレス入力欄type="password"：パスワード入力欄（入力した文字が ●●● で表示されます）
<textarea> で複数行のテキスト入力
複数行のテキストを入力する場合は、<textarea> タグを使います。
html
<label for="message">お問い合わせ内容：</label>
<textarea id="message" name="message"></textarea><br><button> で送信ボタン！
フォームの最後に、<button> タグで送信ボタンを設置します。
html
<button type="submit">送信</button>type="submit" を指定することで、このボタンをクリックするとフォームのデータが送信されるようになります。
<label> でアクセシビリティ向上！
<label> タグは、入力欄とラベル（説明文）を関連付けるために使われます。<label> タグの for 属性と、<input> タグなどの id 属性を同じ値にすることで、ラベルと入力欄を関連付けることができます。
html
<label for="name">名前：</label>
<input type="text" id="name" name="name">こうすることで、ラベルをクリックしたときに、関連付けられた入力欄にフォーカスが移動するようになります。これは、特にマウスを使えないユーザーにとって、フォームの操作性を向上させるために重要です。
select, optionでセレクトボックス
<select>タグでセレクトボックス（プルダウンメニュー）も簡単に作成できます。 それぞれの選択肢は<option>タグで作成します。
html
<label for="prefecture">都道府県：</label>
<select id="prefecture" name="prefecture">
<option value="tokyo">東京都</option>
<option value="kanagawa">神奈川県</option>
<option value="osaka">大阪府</option>
</select>6. バリデーションで入力チェック
バリデーションとは、ユーザーが入力したデータが正しい形式であるかどうかを検証することです。例えば、メールアドレスの欄に example.com のように@マークが無いものを入力するとアラートを表示したり、パスワードの欄に8文字未満のパスワードを入力するとエラーメッセージを表示したりすることができます。
required で必須入力にする
<input> タグや <textarea> タグに required 属性を追加することで、その入力欄を必須入力にすることができます。
html
<label for="name">名前：</label>
<input type="text" id="name" name="name" required><br>
<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email" required><br>必須入力の欄が空欄のままフォームを送信しようとすると、ブラウザがエラーメッセージを表示してくれます。
type 属性で入力形式を指定
<input> タグの type 属性を使うことで、入力データの形式を制限することができます。
html
<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email"><br>
<label for="number">数量：</label>
<input type="number" id="number" name="number" min="1" max="10"><br>type="email"：メールアドレスの形式（例：[email protected]）type="number"：数値のみ入力可能。min属性で最小値、max属性で最大値を指定できます。
pattern 属性で正規表現を使う
pattern 属性を使うと、正規表現を使ってより複雑な入力チェックを行うことができます。正規表現とは、文字列のパターンを表現するための記法です。
html
<label for="zipcode">郵便番号：</label>
<input type="text" id="zipcode" name="zipcode" pattern="[0-9]{3}-[0-9]{4}" placeholder="123-4567"><br>この例では、pattern="[0-9]{3}-[0-9]{4}" とすることで、郵便番号の形式（例：123-4567）に一致する文字列のみを入力できるようにしています。
コラム：JavaScript でさらに高度なバリデーション！
HTML だけでもある程度のバリデーションはできますが、JavaScript を使うと、さらに高度なバリデーションを行うことができます。
例えば、以下のようなバリデーションが可能です。
- パスワードとパスワード確認欄の内容が一致しているかチェックする
- メールアドレスが既に登録されていないかチェックする
- 入力内容に応じて、動的にエラーメッセージを表示する
HTML のバリデーションは、あくまでも補助的なものと考えてください。セキュリティの観点から、サーバー側でのバリデーションも必ず行う必要があります。
JavaScript でのバリデーションに興味がある方は、ぜひ調べてみてください！
フォームは奥が深い！
フォームには、まだまだたくさんの機能があります。例えば、ラジオボタン、チェックボックス、ファイルアップロードなど、様々な入力欄を設置することができます。
また、アクセシビリティに配慮したフォームの作り方や、ユーザービリティを向上させるためのデザインなど、学ぶべきことはたくさんあります。
この「超入門」では、フォームの基本的な作り方について説明しましたが、これをきっかけに、さらに深く学んでいただければ幸いです。