Skip to content

HTML の基本をマスターしよう(後編)

公開日:December 16, 2024更新日:December 16, 2024
HtmlCSS📄

前編・中編では、HTML の基本構造やよく使うタグ、属性、セマンティック HTML について学びました。後編では、フォームの作成とバリデーションについて説明します。

5. フォームを作ってみよう

フォームは、ユーザーがウェブサイトに情報を入力・送信するための仕組みです。例えば、お問い合わせフォームやログインフォーム、会員登録フォームなど、様々な場面で使われます。

<form> で入力フォームを作成

フォームを作るには、まず <form> タグでフォーム全体を囲みます。

html
<form action="/submit" method="post">
    <!-- ここにフォームの内容が入ります -->
</form>
  • action 属性:フォームのデータの送信先 URL を指定します。
  • method 属性:フォームのデータの送信方法を指定します。getpost の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 でのバリデーションに興味がある方は、ぜひ調べてみてください!

フォームは奥が深い!

フォームには、まだまだたくさんの機能があります。例えば、ラジオボタン、チェックボックス、ファイルアップロードなど、様々な入力欄を設置することができます。

また、アクセシビリティに配慮したフォームの作り方や、ユーザービリティを向上させるためのデザインなど、学ぶべきことはたくさんあります。

この「超入門」では、フォームの基本的な作り方について説明しましたが、これをきっかけに、さらに深く学んでいただければ幸いです。