Formを素早く作るための知識

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

フォームの構成

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

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メソッド( get post )を指定します。

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>




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>




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">

color|色

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

number|数値

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

date|日付

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

time|時刻

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

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>

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>

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

autofocus|ページ表示時の選択状態

ページ表示時、 autofocus が設定されたフォームが入力状態になります。