入力タイプ
この章では、入力の種類を説明し<input>要素を。
入力タイプ：テキスト
<input type="text"> テキスト入力のための一行入力フィールドを定義しています。
例
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form> »それを自分で試してみてください これは、上記のHTMLコードをブラウザに表示する方法です。
ファーストネーム：
苗字：
入力タイプ：パスワード
<input type="password"> パスワードフィールドを定義しています。
例
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form> »それを自分で試してみてください これは、上記のHTMLコードをブラウザに表示する方法です。
ユーザー名：
ユーザーのパスワード：
パスワードフィールドの文字がマスクされている(shown as asterisks or circles) 。
入力タイプ：提出
<input type="submit"> フォームハンドラにフォーム入力を送信するためのボタンを定義します。
フォームハンドラは、典型的には、入力データを処理するためのスクリプトを使用してサーバーページです。
フォームハンドラは、フォームのaction属性で指定されています。
例
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form> »それを自分で試してみてください これは、上記のHTMLコードをブラウザに表示する方法です。
ファーストネーム：
苗字：
あなたが送信ボタンのvalue属性を省略した場合、ボタンはデフォルトのテキストを取得します。
例
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form> »それを自分で試してみてください 入力タイプ： radio
<input type="radio">定義radioボタン 。
Radioボタンは、ユーザーが選択肢の限られた数のONLY ONEを選択してみましょう：
例
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form> »それを自分で試してみてください これは、上記のHTMLコードをブラウザに表示する方法です。
男性
女性
他の
入力タイプ： checkbox
<input type="checkbox">定義checkbox 。
Checkboxesユーザーが選択肢の限られた数のゼロ個以上のオプションを選択してみましょう。
例
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form> »それを自分で試してみてください これは、上記のHTMLコードをブラウザに表示する方法です。
私はバイクを持っています
私は車があります
入力タイプ： button
<input type="button">定義button 。
これは、上記のHTMLコードをブラウザに表示する方法です。
HTML5 Inputタイプ
HTML5には、いくつかの新しい追加inputタイプを：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input古いWebブラウザでサポートされていないタイプは、、のように動作しますinputタイプのテキスト。
Inputタイプ： number
<input type="number">数値を含むべき入力フィールドのために使用されます。
あなたは数字上の制限を設定することができます。
ブラウザのサポートによって、制限が入力フィールドに適用することができます。
例
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form> »それを自分で試してみてください Input制限事項
ここではいくつかの共通のリストでinput制限は、 (some are new in HTML5) ：
| 属性 | 説明 |
|---|---|
| disabled | 入力フィールドが無効にすべきことを指定します |
| max | 入力フィールドの最大値を指定します。 |
| >maxlength | 入力フィールドの文字の最大数を指定します。 |
| min | 入力フィールドの最小値を指定します。 |
| pattern | 入力値をチェックするために正規表現を指定します。 |
| readonly | 入力フィールドが読み取り専用であることを指定します(cannot be changed) |
| required | 入力フィールドが必要であることを指定します(must be filled out) |
| size | 幅を指定します(in characters)入力フィールドの |
| step | 入力フィールドのための法的な数の間隔を指定します。 |
| value | 入力フィールドのデフォルト値を指定します。 |
あなたはについての詳細を学びますinput次の章で制限。
例
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form> »それを自分で試してみてください Inputタイプ： date
<input type="date">日付が含まれている必要があります入力フィールドに使用されます。
ブラウザのサポートによっては、日付ピッカーは、入力フィールドに表示することができます。
あなたはに制限を追加することができますinput ：
例
<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> »それを自分で試してみてください Inputタイプ：色
<input type="color">色を含むべき入力フィールドのために使用されます。
ブラウザのサポートに応じて、カラーピッカーは、入力フィールドに表示することができます。
Inputタイプ：範囲
<input type="range">範囲内の値を含むべき入力フィールドのために使用されます。
ブラウザのサポートに応じて、入力フィールドには、スライダコントロールとして表示することができます。
あなたは使用することができfollowing最小値、最大値、ステップ、値：制限を指定する属性を。
Inputタイプ： month
<input type="month">ユーザーが月と年を選択することができます。
ブラウザのサポートによっては、日付ピッカーは、入力フィールドに表示することができます。
Inputタイプ： week
<input type="week">ユーザーが週と年を選択することができます。
ブラウザのサポートによっては、日付ピッカーは、入力フィールドに表示することができます。
Inputタイプ： time
<input type="time">ユーザが時間を選択することを可能にする(no time zone) 。
ブラウザのサポートによって、時間ピッカーは、入力フィールドに表示することができます。
Inputタイプ： datetime
<input type="datetime">ユーザが日付と時間を選択することを可能にする(with time zone) 。
 | 入力datetime型は、HTMLの標準から削除されます。 代わりに、日時、ローカルを使用してください。 |
|---|
入力タイプ：日時、ローカル
<input type="datetime-local">ユーザーが日付と時刻を選択することを可能にする(no time zone) 。
ブラウザのサポートによっては、日付ピッカーは、入力フィールドに表示することができます。
例
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form> »それを自分で試してみてください 入力タイプ：電子メール
<input type="email">電子メールアドレスが含まれている必要があり、入力フィールドに使用されます。
提出されたときにブラウザのサポートによっては、電子メールアドレスを自動的に検証することができます。
一部のスマートフォンでは、電子メールの種類を認識し、そして追加".com"電子メールの入力に合わせて、キーボードに。
入力タイプ：検索
<input type="search">検索フィールドのために使用されている(a search field behaves like a regular text field) 。
入力タイプ：TEL
<input type="tel">電話番号を含むべき入力フィールドのために使用されます。
TELの種類は、現在、Safariのみ8でサポートされています。
入力タイプ：URL
<input type="url"> URLアドレスが含まれている必要があり、入力フィールドに使用されます。
提出されたときにブラウザのサポートによって、URLフィールドが自動的に検証することができます。
一部のスマートフォンは、URLのタイプを認識し、そして追加".com" URL入力に合わせて、キーボードに。