Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
name / value / placeholder / required

name / value / placeholder / required

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

構文

<!-- 基本的な属性の組み合わせ -->
<input type="text"
  name="username"
  value="初期値"
  placeholder="例：山田太郎"
  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	コントロールを完全に無効化します。フォーム送信の対象外になります。

サンプルコード

<!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="例：taro_yamada"
        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>

実行結果

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

<!-- ブラウザ上での表示イメージ -->
ユーザー名（必須）：[例：taro_yamada  ← プレースホルダー]
メールアドレス（必須）：[example@mail.com]
ご契約プラン：[ スタンダード ] ← 変更不可
ポイント数：[ 1500 ] ← グレーアウト・変更不可

[ 登録する ]

概要

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

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

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

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