HTMLのフォームの種類についてまとめてみました

こんにちは。トミーです。

サイト制作をしていると、お問い合わせページなどで使用する「form（フォーム）」の壁にぶつかります。私の苦手分野です(^^;)
どんな項目があったっけ？とすぐ忘れてしまうため、よく使用するフォームの種類をまとめてみました。

フォーム

<form name="名前"　id="名前" method="送信方法（get、postなど）" action="送信先（cgi、phpなど）">
<input type="★" name="名前" value="値" placeholder="〇〇を入力してください" autofocus required>
</form>

<form〜>で始まり</form>で終わります。
「value=””」は空白でも可能で、事前に入れておきたい文言を入れておきます。

テキスト

<input type="text" name="名前" value="" placeholder="例）山田 花子">

一般的なテキストを入力する際に使用します。
名前や住所、コメントなどを入力します。

数字入力

<input type="number" min="10" max="50" step="10">

数字を入力する際に使用します。
入力欄の右端に上下の矢印が表示され、上を押すと数値が増え、下を押すと数値が減ります。
その数値をコントロールするのが「min=”10″ max=”50″ step=”10″」です。

パスワード

<input type="password" name="名前" value="" placeholder="パスワードを入力してください">

パスワードは文字を「●」に置き換え、内容を伏せた状態で入力できます。

メール

<input type="email" name="名前" placeholder="メールアドレスを入力してください">

メールアドレスを入力する際に使用します。
入力されている内容がメールアドレスであるかどうかチェックを行います。
メールアドレスが入力されていない場合は「メールアドレスに「＠」がありません。」とエラーが表示されます。

電話

<input type="tel" name="名前" placeholder="メールアドレスを入力してください">

電話番号を入力する際に使用します。
スマホの場合はテンキーが表示され、とても入力しやすい仕様になっています。

ラジオボタン

<input type="radio" name="sex" value="man">男性
<input type="radio" name="sex" value="woman">女性

複数の選択肢の中から一つ選択するときに使います。
同じカテゴリーであることを示すために「name=””」には全て同じ名前を入力します。
そして、「value=””」にはどの項目が選択されたかわかりやすい名前をつけておきましょう。

チェックボックス

<input type="checkbox" name="hobby" value="fashion">ファッション
<input type="checkbox" name="hobby" value="food">食べ物
<input type="checkbox" name="hobby" value="travel" />旅行

複数の選択肢の中から複数選択するときに使います。
同じカテゴリーであることを示すために「name=””」には全て同じ名前を入力します。
そして、「value=””」にはどの項目が選択されたかわかりやすい名前をつけておきましょう。

テキストエリア

<textarea cols="30（横幅）" rows="5（高さ）" name="名前">コメントをどうぞ</textarea>

テキストを幅広く入力するコメント欄やお問合わせ内容などで使用します。
「cols=”●”」で約●文字分の横幅を、「rows=”●”」で約●文字分の高さを指定できます。
なお、テキストエリアでは「value=””」は使用しません。

ドロップダウンリスト

<select name="名前" size="3">
　<option selected="selected">該当するものをお選びください</option>
　<option value="under10">10歳未満</option>
　<option value="20-29">20代</option>
　<option value="30-39">30代</option>
　<option value="over40" disabled="disabled">40歳以上</option>
</select>

ドロップダウンリストは「select」で「option」を囲む形で記述します。
「size=”●”」を記述すると●行分の高さを確保することができます。
「selected=”selected”」を記述すると、最初から特定の項目を選択しておくことができます。
「disabled=”disabled”」を記述するとグレー表示になり選択できなくなります。

添付ファイル

<form name="名前"　id="名前" method="送信方法" action="送信先" enctype="multipart/form-data">
<p>添付ファイル<input type="file" name="名前"></p>
</form>

「enctype=”multipart/form-data”」は、データ形式を表すものになります。
なお、添付ファイルでは「value=””」は使用しません。

日付

<input type="date">

日付を入力する際に使用し、カレンダーが表示されます。

実行/キャンセル

<input type="submit" name="submit" value="実行">
<input type="reset" name="reset" value="キャンセル">

最後にデータを送信するための「実行」と、データの送信を取りやめる「キャンセル」ボタンです。

ラベルについて

チェックボックスやラジオボタンをを使用した際、下記のようにボタン部分を選択しないとチェックが入りません。

ボタン部分だけでなく、下記のように項目名を選択してもチェックが入ると便利ですよね。
その時に使用するのが「label（ラベル）」になります。

ラベルの書き方は2種類あります。

「id」を使用する方法

<input type="checkbox" name="hobby" value="fashion" id="★"><label="★">ファッション</label>

全体を「<label>」で囲む方法

<label><input type="checkbox" name="hobby" value="fashion">ファッション</label>

使用用途に合わせて使い分けましょう。

まとめ

いかがでしたでしょうか。
フォームの種類ってたくさんありますよね。
使用用途に合わせて、使いやすいフォームを作成していきましょう！