HTMLフォームの基本｜input・label・buttonの使い方

12

Views

ユーザーから名前やメールアドレスなどの情報を入力してもらいたいときに使うのが HTMLフォーム です。
今回は、初心者でもすぐに使える <form> や <input>、<label>、<button> の基本をやさしく解説します。

フォームの基本構造

<form action="/submit" method="post">
  <label for="name">お名前：</label>
  <input type="text" id="name" name="name">

  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email">

  <button type="submit">送信</button>
</form>

よく使うinputのタイプ

type属性用途
text1行のテキスト入力
emailメールアドレス用（形式チェックあり）
passwordパスワード入力（●で表示）
checkboxチェックボックス
radioラジオボタン（単一選択）

labelタグの役割

<label>タグは、for属性で対応するinputとつなぐことで、
ラベルをクリックしたときに自動でフォーカスが当たるようになります。
アクセシビリティやユーザビリティの面でも重要です。

ボタンの種類と使い方

フォームの送信には<button type="submit">、リセットにはtype="reset"を使います。

<button type="submit">送信</button>
<button type="reset">リセット</button>

おわりに

HTMLフォームは、ユーザーとのやり取りを可能にする重要な要素です。
今回紹介したform、input、label、buttonを使えば、基本的な入力フォームはすぐに作成できます。

次回は「select・textarea・fieldset」など、より発展的なフォーム要素について解説予定です！