【 HTML入門 】フォーム関連タグを学んで綺麗なフォームを作る

この記事ではフォームを作る上で欠かせない、HTMLのform・input・textarea・button・select・option・labelタグについて解説します。

コンタクトフォームはもちろん、ログイン画面やお申し込みフォームなどWEB上では欠かせないフォームを作ることができるので、しっかりと知識をつけて使いこなせるようにしましょう。

formタグ

input・select・textareaタグ等のフォーム部品を中に配置して、入力・送信フォームを作ります。

送信ボタンを押すと、フォームに入力されたデータは指定したURLへ送信されます。データの送信先URL（どこに）はaction属性で、送信方法はmethod属性でそれぞれ指定します。

属性

action属性は必ず指定してください。

method属性の値には「get」と「post」がありますが、基本的には「post」を使います。

HTML

<form method="post" action="mail.php">
    <input type="text" name="お名前">
    <button type="submit">送信する</button>
</form>

inputタグ

フォームの入力部品を作成する際に使用します。

type属性を指定することで、様々な入力部品を作成します。

type属性

入力部品の種類を指定します。省略した場合はデフォルト値の「text」が適用されます。

HTML

<input type="text">

<input type="date">

<input type="checkbox" name="sports" value="1" checked="checked">野球
<input type="checkbox" name="sports" value="2">サッカー

<input type="radio" name="gender" value="1" checked="checked">男
<input type="radio" name="gender" value="2">女

<input type="file">

<input type="hidden">

<input type="image">

<input type="button" value="戻る">

<input type="reset" value="リセットする">

<input type="submit" value="送信する">

その他の属性

type属性以外にも多くの属性があります。その中でもよく使う属性のみを抜粋しました。

textareaタグ

複数行のテキストが入力可能な入力欄を作成します。

1行のみの入力欄を生成したい場合は、inputタグのテキストボックス（input type=”text”）を使用してください。

属性

HTML

<form method="post" action="mail.php">
  <textarea name="お問合せ内容" placeholder="お問合せ内容" rows="5" required></textarea>
  <button type="submit" class="submit">送信する</button>
</form>

buttonタグ

ボタンを作成します。

input要素のtype属性にbutton、submit、resetを指定した時と動作は同じですが、button要素内に画像やHTMLタグを使用できる点が異なります。

type属性

HTML

<form method="post" action="mail.php">
  <textarea name="お問合せ内容" placeholder="お問合せ内容" required></textarea><br>
  <button type="submit">送信する</button>
  <button type="reset">リセット</button>
</form>

selectタグ

セレクトボックスを作成します。

メニューの選択肢は、この要素内に配置するoptionタグで作成します。

属性

単一選択型と複数選択型の2タイプがあり、デフォルトは単一選択ですが、multiple属性を指定することで複数選択型になります。

HTML

<form method="post" action="mail.php">
  <label for="language">好きな海外ドラマ：</label>
  <select id="language" name="language">
    <option value="">以下から選択</option>
    <option value="game">ゲーム・オブ・スローンズ</option>
    <option value="prison">プリズン・ブレイク</option>
    <option value="dead">ウォーキング・デッド</option>
    <option value="hoka">その他</option>
  </select>
</form>

HTML

<form method="post" action="mail.php">
  <label for="language">好きな海外ドラマ（複数選択可）：</label>
  <select id="language" name="language" multiple>
    <option value="game">ゲーム・オブ・スローンズ</option>
    <option value="prison">プリズン・ブレイク</option>
    <option value="dead">ウォーキング・デッド</option>
    <option value="hoka">その他</option>
  </select>
</form>

optionタグ

セレクトボックスの選択肢を作成します。

属性

属性なしでも使用できますが、通常は、サーバーへ何らかの値を送るためにvalue属性を指定します。

labelタグ

フォーム部品（チェックボックス、ラジオボタンなど）とラベルを関連付けます。

例えばラジオボタンは丸い部分をクリックしないとその部品を選択することができませんが、labelタグを使うことによりラベルをクリックしただけでその部品を選択することができます。使用するためには、labelタグのfor属性の値と、フォーム部品のid属性の値を同じにします。

属性

for属性はlabelタグのfor属性の値と、inputなどのフォーム部品のID属性の値を同じものにすることで両者を関連付ける事ができます。これによりチェックボックスやラジオボタンでは、 関連付けられたテキスト部分をクリックしてもチェックを付けることができるようになります。

form属性はlabelタグのform属性の値とformのID属性の値を一致させることで、 離れた場所に配置した別セクションのformタグなど、 直接の親要素以外のformタグとラベルを関連付けることができます。

まとめ

フォーム関連タグについての記事、いかがでしたでしょうか。

HTML関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。