この章では、<input> 要素の入力タイプについて説明します。
<input type="text"> は、テキスト入力用の 1 行の入力フィールドを定義します。
<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 コードはブラウザでは次のように表示されます。
注:パスワード フィールドの文字はマスクされます (アスタリスクまたは黒丸で表示されます)。
<input type="submit"> は、 フォーム データをフォーム ハンドラーに送信するためのボタンを定義します。
フォーム ハンドラー (フォーム ハンドラー) は通常、入力データを処理するスクリプトを含むサーバー ページです。
フォームの action 属性でフォーム ハンドラー (form-handler) を指定します。
<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>
<input type="radio"> ラジオボタンを定義します。
Radio buttons let a user select ONLY ONE of a limited number of choices:
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
上記の HTML コードはブラウザでは次のように表示されます。
<input type="checkbox"> はチェックボックスを定義します。
チェックボックスを使用すると、ユーザーは限られた数のオプションから 0 個以上のオプションを選択できます。
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
上記の HTML コードはブラウザでは次のように表示されます。
<input type="button> はボタンを定義します。
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
上記の HTML コードはブラウザでは次のように表示されます。
HTML5 では、いくつかの新しい入力タイプが追加されています。
注: 古い Web ブラウザは入力タイプをサポートしていないため、入力タイプのテキストとして扱われます。
<input type="number"> は、数値を含む入力フィールドの場合です。
数値に制限を設けることができます。
ブラウザのサポートによっては、入力フィールドに制限が適用される場合があります。
<form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> </form>
一般的に使用される入力制約をいくつか示します (HTML5 で新しく追加されたものもあります)。
| 属性 | 説明 |
|---|---|
| disabled | は、入力フィールドを無効にすることを指定します。 |
| max | は入力フィールドの最大値を指定します。 |
| maxlength | は、入力フィールドの最大文字数を指定します。 |
| min | は入力フィールドの最小値を指定します。 |
| pattern | は、入力値をチェックする正規表現を指定します。 |
| readonly | は、入力フィールドが読み取り専用 (変更できない) であることを指定します。 |
| required | は、入力フィールドが必須 (必須) であることを指定します。 |
| size | は、入力フィールドの幅 (文字数) を指定します。 |
| step | は、入力フィールドの有効な数値間隔を指定します。 |
| value | は入力フィールドのデフォルト値を指定します。 |
入力制約については、次の章で詳しく説明します。
<form> Quantity: <input type="number" name="points" min="0" max="100" step="10" value="30"> </form>
<input type="date"> は、日付を含む入力フィールドの場合です。
ブラウザのサポートに応じて、入力フィールドに日付ピッカーが表示されます。
<form> Birthday: <input type="date" name="bday"> </form>
入力に制限を追加できます。
<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 type="color">: 色を含める必要がある入力フィールド。
ブラウザのサポートに応じて、入力フィールドにカラーピッカーが表示されます。
<form> Select your favorite color: <input type="color" name="favcolor"> </form>
<input type="range"> は、値の範囲を含める入力フィールドです。
ブラウザのサポートによっては、入力フィールドがスライダー コントロールとして表示される場合があります。
<form> <input type="range" name="points" min="0" max="10"> </form>
次の属性を使用して制限を指定できます: min、max、step、value。
<input type="month"> ユーザーが月と年を選択できるようにします。
ブラウザのサポートに応じて、入力フィールドに日付ピッカーが表示されます。
<form> Birthday (month and year): <input type="month" name="bdaymonth"> </form>
<input type="week"> ユーザーが週と年を選択できるようにします。
ブラウザのサポートに応じて、入力フィールドに日付ピッカーが表示されます。
<form> Select a week: <input type="week" name="week_year"> </form>
<input type="time"> ユーザーが時刻を選択できるようにします (タイムゾーンなし)。
ブラウザのサポートに応じて、入力フィールドに時間ピッカーが表示されます。
<form> Select a time: <input type="time" name="usr_time"> </form>
<input type="datetime"> ユーザーが日付と時刻 (タイムゾーンを含む) を選択できるようにします。
ブラウザのサポートに応じて、入力フィールドに日付ピッカーが表示されます。
<form> Birthday (date and time): <input type="datetime" name="bdaytime"> </form>
<input type="datetime-local"> ユーザーが日付と時刻 (タイムゾーンなし) を選択できるようにします。
ブラウザのサポートに応じて、入力フィールドに日付ピッカーが表示されます。
<form> Birthday (date and time): <input type="datetime-local" name="bdaytime"> </form>
<input type="email"> は、電子メール アドレスを含む入力フィールドです。
ブラウザのサポートによっては、送信時に電子メール アドレスが自動的に検証される場合があります。
一部のスマートフォンは電子メールの種類を認識し、電子メール入力と一致するようにキーパッドに「.com」を追加します。
<form> E-mail: <input type="email" name="email"> </form>
<input type="search"> 検索フィールドを指定します (検索フィールドは通常のテキスト フィールドのように動作します)。
<form> Search Google: <input type="search" name="googlesearch"> </form>
<input type="tel"> は、電話番号を含む入力フィールドです。
現在、Safari 8 のみが Tel タイプをサポートしています。
<form> Telephone: <input type="tel" name="usrtel"> </form>
<input type="url"> は、URL アドレスを含む入力フィールドです。
ブラウザのサポートに従って、URL フィールドは送信時に自動的に検証されます。
一部のスマートフォンは URL の種類を認識し、URL 入力に一致するようにキーボードに「.com」を追加します。
<form> Add your homepage: <input type="url" name="homepage"> </form>