HTML 入力タイプ

入力タイプ

この章では、<input> 要素のさまざまな入力タイプについて説明します。

入力タイプ：text

<input type="text"> は、テキスト入力のための1行の入力フィールドを定義します：

上記の HTML コードは、ブラウザに次のように表示されます:

入力タイプ：password

<input type="password"> は、パスワード・フィールドを定義します：

上記の HTML コードは、ブラウザに次のように表示されます:

入力タイプ：submit

<input type="submit"> は、フォームハンドラへフォームの入力を送信 するためのボタンを定義します。

フォームハンドラとは、一般的に、入力データを処理するためのスクリプトを持つサーバページです。

フォームハンドラは、フォームの action 属性で指定します：

上記の HTML コードは、ブラウザに次のように表示されます:

サブミットボタンの value 属性を省略すると、ボタンはデフォルトのテキストが設定されます：

入力タイプ：reset

<input type="reset"> は、は、すべてのフォームの値をデフォルト値にリセットするreset ボタンを定義します：

上記の HTML コードは、ブラウザに次のように表示されます:

入力値を変更して「リセット」ボタンをクリックすると、フォームデータはデフォルト値にリセットされます。

入力タイプ：radio

<input type="radio"> は、ラジオボタンを定義します。

ラジオボタンは、ユーザに、限られた数の選択の中からただ1つだけを選択させるようにします：

上記の HTML コードは、ブラウザに次のように表示されます:

入力タイプ：checkbox

<input type="checkbox"> は、チェックボックスを定義します。

チェックボックスは、ユーザに、限られた数の選択の中から 0 個以上の選択肢を選択させるようにします：

上記の HTML コードは、ブラウザに次のように表示されます:

入力タイプ：button

<input type="button"> は、buttonを定義します：

上記の HTML コードは、ブラウザに次のように表示されます:

HTML5 入力タイプ

HTML5には、いくつかの新しい入力タイプが追加されました：

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

入力タイプ：number

<input type="number"> は、数値入力フィールドを定義します。

入力可能な数値に制約を設定することもできます。

次の例は、1 〜 5 の値を入力できる数値入力フィールドを表示します。

例

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Try it Yourself ❯

入力制約

下にいくつかの一般的な入力制約を示します (一部はHTML5で新しく追加されました)：

次章では、入力制約についてより詳しく学習します。

次の例は、数値入力フィールドを表示しています。ここでは、0 〜 100 の値を 10 刻みで入力できます。デフォルト値は 30 です：

例

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Try it Yourself ❯

入力タイプ：date

<input type="date"> は、日付が含まれるべき入力フィールドに使用します。

日付ピッカーは、ブラウザのサポート状況に応じ、入力フィールドに表示されます。

例

<form>
  Birthday:
  <input type="date" name="bday">
</form>

Try it Yourself ❯

入力に制約を加えることができます：

例

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

Try it Yourself ❯

入力タイプ：color

<input type="color"> は、色を含むべき入力フィールドに使用します。

カラーピッカーは、ブラウザのサポート状況に応じ、入力フィールドに表示されます。

例

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

Try it Yourself ❯

入力タイプ：range

<input type="range"> は、或る範囲内に値が含まれているべき入力フィールドに使用します。

ブラウザのサポート状況に応じ、入力フィールドはスライダ・コントロールとして表示されます。

例

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Try it Yourself ❯

制約を指定するために、次の属性を使用することができます：min、max、step、value.

入力タイプ：month

<input type="month"> は、ユーザに対し月と年を選択できるようにします。

日付ピッカーは、ブラウザのサポート状況に応じ、入力フィールドに表示されます。

例

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

Try it Yourself ❯

入力タイプ：week

<input type="week"> は、ユーザに対して週と年を選択できるようにします。

日付ピッカーは、ブラウザのサポート状況に応じ、入力フィールドに表示されます。

例

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

Try it Yourself ❯

入力タイプ：time

<input type="time"> は、ユーザが時刻 (タイムゾーンなし) を選択できるようにします。

時刻ピッカーは、ブラウザのサポート状況に応じ、入力フィールドに表示されます。

例

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

Try it Yourself ❯

入力タイプ：datetime-local

<input type="datetime-local"> は、ユーザが日付と時刻 (タイムゾーンなし) を選択できるようにします。

日付ピッカーは、ブラウザのサポート状況に応じ、入力フィールドに表示されます。

例

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

Try it Yourself ❯

入力タイプ：email

<input type="email"> は、e-mail アドレスを含むべき入力フィールドに使用します。

ブラウザのサポート状況に応じ、e-mail アドレスは送信時に自動的に検証されます。

一部のスマートフォンは email タイプを認識し、email メールの入力に一致するようにキーボードへ ".com" を追加します。

例

<form>
  E-mail:
  <input type="email" name="email">
</form>

Try it Yourself ❯

入力タイプ：search

<input type="search"> は、検索フィールドに使用します (検索フィールドは、通常のテキストフィールドのように動作する)。

例

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

Try it Yourself ❯

入力タイプ：tel

<input type="tel"> は、電話番号を含むべき入力フィールドに使用します。

tel タイプは、現在 Safari 8 のみがサポートしています。

例

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

Try it Yourself ❯

入力タイプ：url

<input type="url"> は、URL アドレスを含むべき入力フィールドに使用します。

ブラウザのサポート状況に応じ、url フィールドは送信時に自動的に検証されます。

一部のスマートフォンは url タイプを認識し、url 入力に一致するようにキーボードへ ".com" を追加します。

例

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

Try it Yourself ❯

練習問題を自分でテストしてください！

Exercise 1 ❯    Exercise 2 ❯    Exercise 3 ❯    Exercise 4 ❯    Exercise 5 ❯