Formの使い方(label, input, select, textarea)

2018/10/262022/11/16

フォームには色々なバリエーションがあります。「チェックボックス」「ラジオボタン」「ファイル送信」など、要件に応じた実装方法を忘れがちです。ここでは、フォームを構成するための「部品」や「属性」についてまとめています。忘れがちな知識を再確認してみましょう。

フォームの構成

簡単な例から、フォームの大まかの構成を確認します。

See the Pen form_basic by waku-waku (@raku-raku) on CodePen.

<form action="/xxxx/xxxx" 
      method="post">
  <div>
    <label for="name">名前:</label>
    <input type="text"
           id="name"
           name="user_name">
  </div>
  <div>
    <label for="mail">メールアドレス:</label>
    <input type="email" 
           id="mail" 
           name="user_mail">
  </div>
  <div>
    <label for="message">メッセージ:</label>
    <textarea id="message" 
              name="user_message"></textarea>
  </div>
  <div class="button">
    <button type="submit">送信</button>
  </div>
</form>

form｜フォームエリアを設定

まずは、 formタグ でフォームエリアを設定します。フォームエリアの中にフォーム部品を記述していきます。

<form action="/xxxx/xxxx" 
      method="post">
    <!-- フォーム部品を設定します。 -->
</form>

action には、データ送信先のURLを指定します。
method には、HTTPメソッド( getpost )を指定します。

label｜項目名

labelタグ はフォーム部品の名前を表示するのに利用します。

<label for="name">名前:</label>
<input type="text"
       id="name"
       name="user_name">

for属性で対象のフォーム部品のid を指定します。

フォーム部品

フォーム部品として、inputタグselectタグtextareaタグbuttonタグを利用できます。
各フォーム部品の使い方を確認していきましょう。

input（フォーム部品）

text｜1行テキスト

<input type="text" name="name_text" value="xxxx">

password｜パスワード

<input type="password" name="name_password" value="xxxx">

radio｜択一選択肢

<label><input type="radio" name="name_radio" value="1">value1</label>
<label><input type="radio" name="name_radio" value="2" checked>value2</label>
<label><input type="radio" name="name_radio" value="3">value3</label>
<label><input type="radio" name="name_radio" value="4">value4</label>

value1 value2 value3 value4

checkbox｜複数選択肢

<label><input type="checkbox" name="name_checkbox[]" value="1">value1</label>
<label><input type="checkbox" name="name_checkbox[]" value="2" checked>value2</label>
<label><input type="checkbox" name="name_checkbox[]" value="3" checked>value3</label>
<label><input type="checkbox" name="name_checkbox[]" value="4">value4</label>

value1 value2 value3 value4

file｜ファイルアップロード

ファイルアップロードする場合、親のformタグの属性に enctype="multipart/form-data" を設定する必要があります。

<form action="/xxxx/xxxx" 
      method="post"
      enctype="multipart/form-data">
    <input type="file" name="name_file">
</form>

hidden｜隠し項目

<input type="hidden" name="name_hidden" value="隠しデータ" />

email｜メールアドレス

<input type="email" name="name_email">

http://caniuse.com/#feat=input-email-tel-url

color｜色

<input type="color" name="name_color">

http://caniuse.com/#feat=input-color

number｜数値

<input type="number" name="name_number">

http://caniuse.com/#feat=input-number

date｜日付

<input type="date" name="name_date">

http://caniuse.com/#feat=input-datetime

time｜時刻

<input type="time" name="name_time">

http://caniuse.com/#feat=input-datetime

select（フォーム部品）

単一選択肢｜プルダウン形式

<select name="name_select1">
  <option value=""></option>
  <option value="1">value1</option>
  <option value="2" selected>value2</option>
  <option value="3">value3</option>
  <option value="4">value4</option>
  <option value="5">value5</option>
  <option value="6">value6</option>
</select>

単一選択肢｜リスト形式

<select name="name_select2" size="3">
  <option value=""></option>
  <option value="1">value1</option>
  <option value="2">value2</option>
  <option value="3">value3</option>
  <option value="4">value4</option>
  <option value="5">value5</option>
  <option value="6">value6</option>
</select>

複数選択肢｜リスト形式

<select name="name_select3" size="3" multiple>
  <option value=""></option>
  <option value="1">value1</option>
  <option value="2">value2</option>
  <option value="3">value3</option>
  <option value="4">value4</option>
  <option value="5">value5</option>
  <option value="6">value6</option>
</select>

multiple属性 を設定すると複数選択可能になります。

textarea（フォーム部品）

複数行テキスト

<textarea name="name_textarea" rows="4"></textarea>

button（フォーム部品）

submit｜送信

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

フォーム部品の属性

disabledとreadonlyの違い

<input type="text" disabled name="name_disabled" value="disabled属性を設定">
<input type="text" readonly name="name_readonly" value="readonly属性を設定">

disabled属性 readonly属性 ともに設定すると入力できない状態になります。
disabled属性 は、Form送信時に値を送信しません。
readonly属性 は、Form送信時に値を送信します。

placeholder｜入力例

<input type="text" name="name_placeholder" placeholder="入力例が表示されます">

required｜入力必須

<form action="#" method="get">
  <input type="text" name="name_required" required>
  <button type="submit">送信</button>
</form>

required属性 を設定すると入力しないと送信できなくなります。
https://caniuse.com/#feat=form-validation

autocomplete｜入力候補

<input type="text" name="name_autocomplete" autocomplete="on" list="fruits">
<datalist id="fruits">
  <option value="りんご">
  <option value="かき">
  <option value="すいか">
  <option value="すもも">
  <option value="いちご">
  <option value="いちじく">
</datalist>

上記例の場合、 すと入力するとすいかすももが候補として表示されます。