実行できるHTMLドキュメント: input type 一覧

Q: HTML の input type は何種類ありますか？

22 種類です: button、checkbox、color、date、datetime-local、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、text、time、url、week。未知の type や type の指定がない場合は text として動きます。

Q: HTML の input type の初期値は何ですか？

text です。type のない や、ブラウザが知らない type の は 1 行のテキスト欄になります。

Q: 電話番号や郵便番号に type="number" を使うべきですか？

いいえ。number は数量のためのもので、スピンボタンが付き、電話番号に含まれる +、空白、ハイフンを受け付けません。電話番号には type="tel"、郵便番号やカード番号のようなコードには type="text" と inputmode="numeric" を使いましょう。

Q: input type date の値はどんな形式ですか？

画面上で読者にどんな形式で見えていても、値は常に 2026-09-24 のような YYYY-MM-DD です。表示は読者のロケールに従いますが、送信される値やスクリプトで読む値は変わりません。

Q: input タグに終了タグは必要ですか？

不要です。 は空要素なので、 と書きます。終了タグ は無効で、 の自己終了のスラッシュは書いてもかまいませんが何の効果もありません。

input タグとその type

<input> はフォームの入力欄で、その種類を type 属性で決めます。同じタグで、テキストボックス、スライダー、日付の選択、色の選択を作れます。下の各入力欄を試して Submit を押すと、フォームが送る内容が表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input> は空要素なので終了タグはありません。name は値を送るときのキーで、value は最初の値です。type がないか綴りが間違っていると、普通のテキスト欄になります。

HTML の input type 一覧

`type`	内容	補足
`text`	1 行のテキスト	初期値
`password`	点で表示されるテキスト	それ自体は暗号化されないので HTTPS で送る
`email`	メールアドレス	形式をチェックする。スマートフォンのキーボードに `@` キーが出る
`url`	Web アドレス	`https://` のようなスキームで始まる必要がある
`tel`	電話番号	モバイルで電話用のキーパッド、形式チェックなし
`search`	検索ボックス	消去ボタンが表示されることが多い
`number`	数値	スピンボタン、`min`、`max`、`step`
`range`	スライダー	もともと細かい値の入力には向かない。値は数値
`date`	日付	値は `YYYY-MM-DD`
`time`	時刻	値は `HH:MM` (24 時間制)
`datetime-local`	日付と時刻、タイムゾーンなし	値は `YYYY-MM-DDTHH:MM`
`month`	年と月	対応していないブラウザもある
`week`	年と週番号	対応していないブラウザもある
`color`	色の選択	値は小文字の `#rrggbb`
`checkbox`	オンとオフの切り替え	HTML のチェックボックスを参照
`radio`	グループから 1 つを選ぶ	HTML のラジオボタンを参照
`file`	ファイルの選択	`accept`、`multiple`
`hidden`	表示されずに送信される値	ID やトークン用
`submit`	送信ボタン	`<button type="submit">` のほうが柔軟
`reset`	リセットボタン	使ってよい場面はまれ
`button`	それ自体は何もしないボタン	JavaScript 用
`image`	画像で描かれた送信ボタン	クリックした座標も送る

テキスト系の type とスマートフォンのキーボード

email、url、tel、search、text は、デスクトップではどれもテキストボックスに見えます。違いは入力チェックと、スマートフォンで開くキーボードです。この例では、ブラウザの判定に応じて枠線が緑か赤に変わります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

ブラウザにとって ada@example は有効なメールアドレスです。テキスト、@、ドメインがあるかを見るだけで、ドメインにドットがあるかは確認しません。本当のチェックはサーバーで行います。
example.com はスキームがないので有効な url ではありません。https://example.com なら有効です。
tel は何でも受け付けます。電話番号の形式は国によって違いすぎるので組み込みのチェックはありません。必要なら pattern を追加しましょう。
inputmode="numeric" は、type="number" の問題を起こさずにスマートフォンに数字キーボードを出させます。郵便番号、ワンタイムコード、カード番号に適しているのはこのためです。

number と range

どちらも min、max、step を受け付けます。number は正確な値のため、range は正確な数値がそれほど重要でない値のためのスライダーです。range のスライダーは数値を表示しないので、<output> と組み合わせましょう。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

number の step の初期値は 1 なので、step="0.01" のない価格の入力欄はフォームの送信時に 4.99 を受け付けません。JavaScript では input.value は常に文字列です。数値が欲しいときは input.valueAsNumber を使います。

日付と時刻

日付と時刻の type では、ブラウザ独自の選択画面が開きます。読者に見える形式はロケールに従います (09/24/2026、24.09.2026) が、値は常に同じ決まった形式です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

サーバーが受け取り、JavaScript が読むのはこの決まった形式なので、「24.09.2026」を解析する必要はありません。min と max も同じ形式で指定します。datetime-local にはタイムゾーンがありません。タイムゾーンが重要なら、読者のタイムゾーンを使ってサーバーで変換しましょう。

color と file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*" はファイルの選択を画像に限定します (スマートフォンではカメラも選べます)。accept=".pdf,.docx" のように拡張子も指定できます。これは選択画面へのヒントにすぎないので、ファイルの種類はサーバーで確認しましょう。multiple を付けると複数のファイルを選べます。実際にアップロードするには、フォームに method="post" と enctype="multipart/form-data" も必要です。

datalist で候補を出す

<datalist> を使うと、どんな値でも入力できるテキスト欄に候補のリストを付けられます。list 属性でつなぎます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

入力欄に「ja」と入力すると、一致する候補が表示されます。セレクトボックスと違い、リストにない値も入力できます。

input で使える属性

属性	働き
`name`	値を送信するときのキー
`value`	最初の値
`placeholder`	入力欄が空の間に表示されるヒント (ラベルではない)
`required`	送信前に入力が必要
`disabled`	使えなくなり、送信もされない
`readonly`	編集できないが、送信はされる
`autocomplete`	自動入力する内容: `email`、`name`、`current-password`、`one-time-code`、`off`
`min`、`max`、`step`	数値、範囲、日付、時刻の制限
`minlength`、`maxlength`	テキスト系の type の長さの制限
`pattern`	値全体が一致すべき正規表現
`inputmode`	スマートフォンに出すキーボード: `numeric`、`decimal`、`email`、`tel`、`url`
`list`	`<datalist>` の `id`
`multiple`	複数の値。`email` と `file` で使う
`accept`	`file` で受け付けるファイルの種類

よくある間違い

電話番号、郵便番号、カード番号に type="number" を使う。 これらは数量ではありません。tel、または text と inputmode="numeric" を使いましょう。
価格の入力欄に step="0.01" がない。 小数の値がチェックで弾かれます。
placeholder をラベル代わりに使う。 読者が入力を始めると消えてしまいます。
セキュリティを accept や type="email" に頼る。 これらは便利機能にすぎないので、サーバーでもう一度チェックします。
代替手段なしで type="month" や type="week" を使う。 普通のテキスト欄を表示するブラウザもあります。
終了タグ </input> を書く。 <input> は空要素です。

よくある質問

HTML の input type は何種類ありますか？

22 種類です: button、checkbox、color、date、datetime-local、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、text、time、url、week。未知の type や type の指定がない場合は text として動きます。

HTML の input type の初期値は何ですか？

text です。type のない <input> や、ブラウザが知らない type の <input> は 1 行のテキスト欄になります。

電話番号や郵便番号に type="number" を使うべきですか？

いいえ。number は数量のためのもので、スピンボタンが付き、電話番号に含まれる +、空白、ハイフンを受け付けません。電話番号には type="tel"、郵便番号やカード番号のようなコードには type="text" と inputmode="numeric" を使いましょう。

input type date の値はどんな形式ですか？

画面上で読者にどんな形式で見えていても、値は常に 2026-09-24 のような YYYY-MM-DD です。表示は読者のロケールに従いますが、送信される値やスクリプトで読む値は変わりません。

input タグに終了タグは必要ですか？

不要です。<input> は空要素なので、<input type="text" name="city"> と書きます。終了タグ </input> は無効で、<input /> の自己終了のスラッシュは書いてもかまいませんが何の効果もありません。