Caution

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

HTMLタグ辞典

トップページ
HTMLタグ辞典
<input> — テキスト系

<input> — テキスト系

『<input>』のテキスト系タイプは、1行のテキスト入力欄を作成します。『type』属性に入力の種類を指定することで、ブラウザが適切なキーボードやバリデーションを自動的に提供します。

構文

<input type="text" name="フィールド名" placeholder="入力例" value="初期値">

typeの値一覧（テキスト系）

type の値	概要
text	1行のテキスト入力欄です。最も基本的なタイプで、制限なくテキストを入力できます。
password	入力した文字が『●』などで隠されるパスワード入力欄です。
email	メールアドレス専用の入力欄です。送信時にメールアドレス形式かチェックされます。
url	URLの入力欄です。送信時に『https://』などの形式かチェックされます。
tel	電話番号の入力欄です。スマートフォンでは数字キーボードが表示されます。
search	検索キーワード用の入力欄です。ブラウザによってはクリア（×）ボタンが表示されます。

主な属性一覧

属性	概要
name	フォーム送信時のデータのキー名を指定します。サーバー側でこの名前でデータを受け取ります。
value	入力欄の初期値を指定します。
placeholder	入力欄が空のときに薄く表示するヒントテキストを指定します。
required	必須入力にします。空のまま送信しようとするとエラーが表示されます。
maxlength	入力できる最大文字数を指定します。
minlength	入力する最小文字数を指定します。
readonly	読み取り専用にします。ユーザーは編集できませんが、送信データには含まれます。
disabled	無効化します。ユーザーは操作できず、送信データにも含まれません。
autocomplete	ブラウザのオートコンプリートの動作を制御します。『on』（有効）・『off』（無効）などが指定できます。
pattern	正規表現でバリデーションルールを指定します。形式に一致しない場合、送信エラーになります。

サンプルコード

<form action="/register.php" method="post">

  <!-- テキスト入力 -->
  <div>
    <label for="username">ユーザー名</label>
    <input type="text" id="username" name="username"
      placeholder="例: yamada_taro" maxlength="20" required>
  </div>

  <!-- パスワード入力 -->
  <div>
    <label for="password">パスワード（8文字以上）</label>
    <input type="password" id="password" name="password"
      minlength="8" required autocomplete="new-password">
  </div>

  <!-- メールアドレス入力 -->
  <div>
    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="email"
      placeholder="example@example.com" required>
  </div>

  <!-- 電話番号入力 -->
  <div>
    <label for="tel">電話番号</label>
    <input type="tel" id="tel" name="tel"
      placeholder="090-0000-0000"
      pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}">
  </div>

  <!-- URL入力 -->
  <div>
    <label for="website">ウェブサイト</label>
    <input type="url" id="website" name="website"
      placeholder="https://example.com">
  </div>

  <!-- 検索ボックス -->
  <div>
    <label for="keyword">キーワード検索</label>
    <input type="search" id="keyword" name="q"
      placeholder="検索キーワードを入力">
  </div>

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

</form>

実行結果

ユーザー名・パスワード・メールアドレス・電話番号・URL・検索の6種類の入力欄と登録ボタンが表示されます。パスワード欄の入力は伏字（●）になり、メールアドレス欄は送信時に形式チェックが行われます。スマートフォンでは電話番号欄をタップすると数字キーボードが表示されます。

概要

『type』属性に適切な値を指定することで、ブラウザが自動的にバリデーション（入力値の検証）を行ってくれます。たとえば『type="email"』では「@」が含まれているかチェックし、『type="url"』では『http://』か『https://』で始まっているかを確認します。ただし、ブラウザのバリデーションはあくまで補助的なものです。サーバー側でも必ず入力値の検証を行ってください。

『<label>』と『<input>』は必ず『for』属性と『id』属性で紐付けましょう。紐付けることでラベルをクリックしたときにフォーカスが当たるようになり、スクリーンリーダーでも正しく読み上げられます。

フォームのコンテナについては『form』をご覧ください。