<input> — テキスト系

対応:		HTML 4（1997）

『<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	正規表現でバリデーションルールを指定します。形式に一致しない場合、送信エラーになります。

サンプルコード

sample_input_text.html

<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://wp-p.info">
  </div>

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

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

</form>

実行結果

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

サンプルページはこちら

CSSで入力欄をカスタマイズする

入力欄のデフォルトスタイルはブラウザごとに異なります。統一したデザインにするには、CSSでスタイルを上書きします。擬似クラスを使うことで、フォーカス状態・無効状態・バリデーション状態ごとに見た目を変えられます。

<style>
  /* 基本スタイル（ブラウザデフォルトを上書き） */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="search"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  /* フォーカス時: 枠線を青くしてグローを付ける */
  input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25);
  }

  /* 無効状態: 背景をグレーにして操作不可と示す */
  input:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
  }

  /* プレースホルダーの色を変更 */
  input::placeholder {
    color: #aaa;
  }

  /* バリデーションエラー（入力済みで不正な値） */
  input:invalid:not(:placeholder-shown) {
    border-color: #e74c3c;
  }

  /* バリデーション成功 */
  input:valid:not(:placeholder-shown) {
    border-color: #27ae60;
  }

  /* 検索ボックスのクリアボタンをカスタマイズ */
  input[type="search"] {
    -webkit-appearance: none;
  }
</style>

<input type="text" placeholder="お名前">
<input type="email" placeholder="example@example.com">
<input type="text" disabled value="変更不可のフィールド">

概要

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

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

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