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のバリデーション属性』のページで詳しく解説しています。

対応ブラウザ

デスクトップ

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

実践的な使い方と注意点

フォームの属性はそれぞれ役割が明確ですが、組み合わせ方によって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="例: taro_yamada"
           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>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典