HTML 入力タイプ
- 前のページ HTML フォームエレメント
- 次のページ HTML Input 属性
この章では <input> 要素の入力タイプを説明します。
入力タイプ：text
<input type="text"> 供テキスト入力の単一行入フィールド：
例
<form> 名前:<br> <input type="text" name="firstname"> <br> 姓:<br> <input type="text" name="lastname"> </form>
上記のHTMLコードはブラウザ上では以下のように見えます：
入力タイプ：password
<input type="password"> 定義パスワード フィールド：
例
<form> ユーザー 名：<br> <input type="text" name="username"> <br> ユーザー パスワード：<br> <input type="password" name="psw"> </form>
上記のHTMLコードはブラウザ上では以下のように見えます：
注記：password フィールドの文字はマスク処理（星号または実心円で表示）されます。
入力タイプ：submit
<input type="submit"> 定義送信フォームデータをフォームハンドラのボタン。
フォームハンドラ（form-handler）は、入力データを処理するスクリプトを含むサーバーページです。
フォームのaction属性にフォームハンドラ（form-handler）を指定します：
例
<form action="action_page.php"> 名前:<br> <input type="text" name="firstname" value="Mickey"> <br> 姓:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
上記のHTMLコードはブラウザ上では以下のように見えます：
submitボタンのvalue属性を省略すると、ボタンはデフォルトのテキストを取得します：
例
<form action="action_page.php"> 名前:<br> <input type="text" name="firstname" value="Mickey"> <br> 姓:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit"> </form>
Input Type: radio
<input type="radio"> ラジオボタンを定義します。
ラジオボタンは、ユーザーが限られた数の選択肢からたった一つを選択できるようにします：
例
<form> <input type="radio" name="sex" value="male" checked>男性 <br> <input type="radio" name="sex" value="female">女性 </form>
上記のHTMLコードはブラウザ上では以下のように見えます：
Input Type: checkbox
<input type="checkbox"> チェックボックスを定義します。
チェックボックスは、ユーザーが限られた数のオプションから0個以上のオプションを選択できるようにします。
例
<form> <input type="checkbox" name="vehicle" value="Bike">私は自転車があります <br> <input type="checkbox" name="vehicle" value="Car">私は車があります </form>
上記のHTMLコードはブラウザ上では以下のように見えます：
Input Type: button
<input type="button"> 定義ボタン。
例
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
上記のHTMLコードはブラウザ上では以下のように見えます：
HTML5 入力タイプ
HTML5は新しい入力タイプを複数追加しました：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
注記：古いウェブブラウザではサポートされていない入力タイプは、テキストとして処理されます。
入力タイプ：number
<input type="number"> 数字値を含むべき入力フィールドに使用されます。
数字に制限を設けることができます。
ブラウザのサポート状況に応じて、制限が入力フィールドに適用できます。
例
<form> 数量（1から5の間）： <input type="number" name="quantity" min="1" max="5"> </form>
入力制限
以下に一般的な入力制限をリストアップしています（その一部はHTML5で追加されています）：
| 属性 | 説明 |
|---|---|
| disabled | 入力フィールドが無効であることを指定します。 |
| max | 入力フィールドの最大値を指定します。 |
| maxlength | 入力フィールドの最大文字数を指定します。 |
| min | 入力フィールドの最小値を指定します。 |
| pattern | 入力値をチェックする正規表現を指定します。 |
| readonly | 入力フィールドが読み取り専用であることを指定します（変更できません）。 |
| required | 入力フィールドが必須であることを指定します（必須です）。 |
| size | 入力フィールドの幅（文字数で指定）を指定します。 |
| step | 入力フィールドの合法数字の間隔を指定します。 |
| value | 入力フィールドのデフォルト値を指定します。 |
次の章で入力制限に関するより多くの知識を学びます。
例
<form> 数量： <input type="number" name="points" min="0" max="100" step="10" value="30"> </form>
入力タイプ：date
<input type="date"> 日付を含むべき入力フィールドに使用されます。
ブラウザのサポートに応じて、日付選択フィールドが入力フィールドに表示されます。
例
<form> 誕生日： <input type="date" name="bday"> </form>
入力に制限を追加できます：
例
<form> 1980年1月1日以前の日付を入力してください： <input type="date" name="bday" max="1979-12-31"><br> 2000-01-01以降の日付を入力してください： Enter a date after 2000-01-01:<br> </form>
入力タイプ：color
<input type="color"> 色を含む入力フィールドに使用されます。
ブラウザのサポートに応じて、色選択フィールドが入力フィールドに表示されます。
例
<form> お気に入りの色を選んでください： <input type="color" name="favcolor"> </form>
入力タイプ：range
<input type="range"> 特定の範囲内の値を含む入力フィールドに使用されます。
ブラウザのサポートに応じて、入力フィールドはスライダーコントロールとして表示できます。
例
<form> <input type="range" name="points" min="0" max="10"> </form>
以下の属性を使用して制限を設定できます：min、max、step、value。
入力タイプ：month
<input type="month"> ユーザーが月と年を選択できます。
ブラウザのサポートに応じて、日付選択フィールドが入力フィールドに表示されます。
例
<form> 誕生日（月と年）: <input type="month" name="bdaymonth"> </form>
入力タイプ：week
<input type="week"> ユーザーが週と年を選択できます。
ブラウザのサポートに応じて、日付選択フィールドが入力フィールドに表示されます。
例
<form> 週を選択してください： <input type="week" name="week_year"> </form>
入力タイプ：time
<input type="time"> ユーザーが時間を選択できます（時区なし）。
ブラウザのサポートに応じて、時間選択フィールドが入力フィールドに表示されます。
例
<form> 時間を選択してください： <input type="time" name="usr_time"> </form>
入力タイプ：datetime
<input type="datetime"> ユーザーが日付と時間を選択できます（時区あり）。
ブラウザのサポートに応じて、日付選択フィールドが入力フィールドに表示されます。
例
<form> 誕生日（日付と時間）: <input type="datetime" name="bdaytime"> </form>
入力タイプ：datetime-local
<input type="datetime-local"> ユーザーが日付と時間を選択できます（時区なし）。
ブラウザのサポートに応じて、日付選択フィールドが入力フィールドに表示されます。
例
<form> 誕生日（日付と時間）: <input type="datetime-local" name="bdaytime"> </form>
入力タイプ：email
<input type="email"> Eメールアドレスを含むべき入力フィールド用
ブラウザのサポート状況に応じて、投稿時に自動的に Eメールアドレスを検証できます。
一部のスマートフォンは email 型を認識し、キーボードに ".com" を追加して Eメール入力に一致させます。
例
<form> Eメール: <input type="email" name="email"> </form>
入力タイプ：search
<input type="search"> 検索フィールド（検索フィールドは通常のテキストフィールドに似ています）用
例
<form> Googleで検索: <input type="search" name="googlesearch"> </form>
入力タイプ：tel
<input type="tel"> 電話番号を含むべき入力フィールド用
現在、Safari 8 だけが tel 型をサポートしています。
例
<form> 電話: <input type="tel" name="usrtel"> </form>
入力タイプ：url
<input type="url"> URL アドレスを含むべき入力フィールド用
ブラウザのサポート状況に応じて、投稿時に自動的に URL フィールドを検証できます。
一部のスマートフォンは URL 型を認識し、キーボードに ".com" を追加して URL 入力に一致させます。
例
<form> ホームページを追加: <input type="url" name="homepage"> </form>
- 前のページ HTML フォームエレメント
- 次のページ HTML Input 属性
