name / value / placeholder / required

対応:		HTML5（2014）

フォームのコントロールには、入力値の送信・表示・制御に関わるさまざまな属性があります。中でも『name』『value』『placeholder』『required』はほぼすべてのフォームで使われる基本的な属性です。

構文

<!-- 基本的な属性の組み合わせ -->
<input type="text"
  name="username"
  value="初期値"
  placeholder="例：kiryu_kazuma"
  required
  autofocus
  autocomplete="name">

<!-- 読み取り専用・無効化 -->
<input type="text" name="code" value="ABC123" readonly>
<input type="text" name="locked" value="変更不可" disabled>

属性一覧

属性	概要
name	フォーム送信時のデータのキー名を指定します。サーバーはこの名前でデータを受け取ります。
value	コントロールの初期値または送信する値を指定します。
placeholder	入力欄が空のときに表示するヒントテキストを指定します。入力開始と同時に消えます。
required	入力を必須にします。空のままフォームを送信しようとするとエラーが表示されます。
autofocus	ページ読み込み時に自動的にフォーカスを当てます。ページ内で1つだけ指定できます。
autocomplete	ブラウザによる自動入力補完を制御します。『on』『off』や『email』などのヒント値を指定できます。
readonly	ユーザーによる変更を禁止しますが、フォーム送信の対象になります。
disabled	コントロールを完全に無効化します。フォーム送信の対象外になります。

サンプルコード

sample_name_value_placeholder_required.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォーム属性</title>
</head>
<body>

  <form>
    <!-- autofocusでページ表示時に自動フォーカス -->
    <p>
      <label for="uname">ユーザー名（必須）：</label>
      <input type="text" id="uname" name="username"
        placeholder="例：kiryu_kazuma"
        required autofocus autocomplete="username">
    </p>

    <!-- emailタイプ＋required -->
    <p>
      <label for="mail">メールアドレス（必須）：</label>
      <input type="email" id="mail" name="email"
        placeholder="example@mail.com"
        required autocomplete="email">
    </p>

    <!-- readonlyで変更不可（送信される） -->
    <p>
      <label for="plan">ご契約プラン：</label>
      <input type="text" id="plan" name="plan" value="スタンダード" readonly>
    </p>

    <!-- disabledで無効（送信されない） -->
    <p>
      <label for="point">ポイント数：</label>
      <input type="text" id="point" name="point" value="1500" disabled>
    </p>

    <p><button type="submit">登録する</button></p>
  </form>

</body>
</html>

サンプルページはこちら

実行結果

ページ表示と同時に「ユーザー名」欄にフォーカスが当たります。必須フィールドを空のまま「登録する」を押すとバリデーションエラーが表示されます。「ご契約プラン」欄は変更できませんが送信され、「ポイント数」欄はグレーアウトされ送信されません。

サンプルページはこちら

概要

『name』属性はフォームの要です。『name』が指定されていないコントロールのデータはフォーム送信時に送られません。すべての入力項目に適切な名前をつけることが大切です。

『placeholder』はラベルの代わりには使えません。入力欄にフォーカスを当てると消えてしまうため、何を入力すべきか分からなくなる場合があります。必ず別途『label』要素でラベルを提供してください。

『readonly』と『disabled』はどちらも変更を禁止しますが、重要な違いがあります。『readonly』はフォーム送信の対象になりますが、『disabled』はなりません。また、『disabled』にするとフォーカスも当たらなくなります。確認画面で値を表示しつつ送信させたい場合は『readonly』を使う方法があります。

バリデーション関連の属性（min/max/patternなど）については『inputのバリデーション属性』のページで詳しく解説しています。

実践的な使い方と注意点

フォームの属性はそれぞれ役割が明確ですが、組み合わせ方によってUXとアクセシビリティが大きく変わります。

属性	よくあるミス	正しい使い方
placeholder	ラベルの代わりに使う	labelと併用する。placeholderは入力例・ヒントのみ。入力を始めると消えるため、ラベルとしては不適切
required	視覚的なマークなしで必須にする	CSSで「*（必須）」などの視覚的なマークを追加し、aria-required="true"も付ける
name	送信フォームでnameを省略する	name属性がないとサーバーにデータが送信されない。form.submit()やFormDataを使う場合も同様
value	radioやcheckboxのvalueを忘れる	radioとcheckboxはvalue属性が送信されるデータなので必ず指定する

<!-- 正しいラベルとplaceholderの使い方 -->
<form>
  <div>
    <!-- labelは必須。placeholderはあくまで補助 -->
    <label for="username">ユーザー名 <span class="required">*</span></label>
    <input type="text"
           id="username"
           name="username"
           placeholder="例: kiryu_kazuma"
           required
           aria-required="true">
  </div>

  <!-- radioボタンはvalue属性がサーバーに送信されるデータ -->
  <fieldset>
    <legend>性別（任意）</legend>
    <label><input type="radio" name="gender" value="male"> 男性</label>
    <label><input type="radio" name="gender" value="female"> 女性</label>
    <label><input type="radio" name="gender" value="other"> その他</label>
  </fieldset>
</form>

よくあるミス

ミス1: nameなしのinputはフォーム送信時に値が送られない

フォームを送信すると、サーバーには各コントロールの『name』属性をキーとしたデータが送信されます。『name』属性がないコントロールはサーバーに値が届きません。submitボタンのinputも同様です。

<!-- NG: name属性がない -->
<form action="/submit" method="post">
  <input type="text" id="search" placeholder="検索ワード">
  <button type="submit">検索</button>
</form>

修正後は次の通りです。

<!-- OK: name属性を指定する -->
<form action="/submit" method="post">
  <input type="text" id="search" name="q" placeholder="検索ワード">
  <button type="submit">検索</button>
</form>

ミス2: placeholderをlabelの代わりに使う

『placeholder』はあくまで入力例やヒントを示すためのものです。入力を始めると消えてしまうため、何を入力すべきかが分からなくなるアクセシビリティ問題が生じます。入力欄には必ず別途『label』要素を用意してください。

<!-- NG: placeholderだけでラベルを省略している -->
<input type="email" placeholder="メールアドレスを入力">

修正後は次の通りです。

<!-- OK: labelとplaceholderを併用する -->
<label for="mail">メールアドレス：</label>
<input type="email" id="mail" name="email" placeholder="example@mail.com">

対応ブラウザ

デスクトップ

Chrome

3 以降 ○

2 以前 ×

Firefox

4 以降 ○

3 以前 ×

Safari

4 以降 ○

3 以前 ×

Edge

12 以降 ○

11 ○

10 ○

9 ×

8 ×

7 ×

6 ×

Opera

12.1 以降 ○

11.1 以前 ×

モバイル

iOS Safari

3.2 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

HTML辞典