HTML入力タイプ
この章では、HTML<input>要素のさまざまなタイプについて説明します。
HTML入力タイプ
HTMLで使用できるさまざまな入力タイプは次のとおりです。
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
ヒント：属性のデフォルト値typeは「テキスト」です。
入力タイプテキスト
<input type="text">
単一行のテキスト入力フィールドを定義します：
例
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
上記のHTMLコードがブラウザに表示される方法は次のとおりです。
ファーストネーム：苗字：
入力タイプパスワード
<input type="password">パスワードフィールドを定義します：
例
<form>
<label for="username">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
上記のHTMLコードがブラウザに表示される方法は次のとおりです。
ユーザー名：パスワード：
パスワードフィールドの文字はマスクされます（アスタリスクまたは円で表示されます）。
入力タイプ送信
<input type="submit">フォームデータをフォームハンドラーに
送信するためのボタンを定義します。
フォームハンドラーは通常、入力データを処理するためのスクリプトを備えたサーバーページです。
フォームハンドラーは、フォームのaction
属性で指定されます。
例
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
上記のHTMLコードがブラウザに表示される方法は次のとおりです。
送信ボタンのvalue属性を省略すると、ボタンはデフォルトのテキストを取得します。
例
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
入力タイプリセット
<input type="reset">
すべてのフォーム値をデフォルト値にリセットするリセットボタンを定義します。
例
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
上記のHTMLコードがブラウザに表示される方法は次のとおりです。
入力値を変更してから「リセット」ボタンをクリックすると、フォームデータがデフォルト値にリセットされます。
入力タイプラジオ
<input type="radio">ラジオボタンを定義します。
ラジオボタンを使用すると、ユーザーは限られた数の選択肢から1つだけを選択できます。
例
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
上記のHTMLコードがブラウザに表示される方法は次のとおりです。
入力タイプチェックボックス
<input type="checkbox">チェックボックスを定義します。
チェックボックスを使用すると、ユーザーは限られた数の選択肢から0個以上のオプションを選択できます。
例
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
上記のHTMLコードがブラウザに表示される方法は次のとおりです。
入力タイプボタン
<input type="button">ボタンを定義します：
例
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
上記のHTMLコードがブラウザに表示される方法は次のとおりです。
入力タイプの色
は<input type="color">、色を含む必要がある入力フィールドに使用されます。
ブラウザのサポートによっては、入力フィールドにカラーピッカーが表示される場合があります。
例
<form>
<label for="favcolor">Select your favorite
color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
入力タイプ日付
は<input type="date">、日付を含む必要がある入力フィールドに使用されます。
ブラウザのサポートによっては、入力フィールドに日付ピッカーが表示される場合があります。
例
<form>
<label for="birthday">Birthday:</label>
<input
type="date" id="birthday" name="birthday">
</form>
minおよびmax属性を使用して、日付に制限を追加することもできます。
例
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date after
2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02">
</form>
入力タイプ日時-ローカル
は<input type="datetime-local">、タイムゾーンのない日付と時刻の入力フィールドを指定します。
ブラウザのサポートによっては、入力フィールドに日付ピッカーが表示される場合があります。
例
<form>
<label for="birthdaytime">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
入力タイプEメール
は<input type="email">、電子メールアドレスを含める必要がある入力フィールドに使用されます。
ブラウザのサポートによっては、送信時に電子メールアドレスを自動的に検証できます。
一部のスマートフォンはメールの種類を認識し、メール入力に一致するようにキーボードに「.com」を追加します。
例
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
入力タイプファイル
は<input type="file">
、ファイル選択フィールドとファイルアップロード用の[参照]ボタンを定義します。
例
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
非表示の入力タイプ
は<input type="hidden">
非表示の入力フィールドを定義します（ユーザーには表示されません）。
非表示フィールドを使用すると、Web開発者は、フォームの送信時にユーザーが表示または変更できないデータを含めることができます。
非表示フィールドには、フォームの送信時に更新する必要のあるデータベースレコードが格納されることがよくあります。
注：値はページのコンテンツでユーザーに表示されませんが、ブラウザーの開発ツールまたは「ソースの表示」機能を使用して表示されます（編集できます）。セキュリティの一形態として隠し入力を使用しないでください！
例
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input
type="hidden" id="custId" name="custId" value="3487">
<input
type="submit" value="Submit">
</form>
入力タイプ月
は<input type="month">、ユーザーが月と年を選択できるようにします。
ブラウザのサポートによっては、入力フィールドに日付ピッカーが表示される場合があります。
例
<form>
<label for="bdaymonth">Birthday (month and
year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
入力タイプ番号
は
数値入力フィールド<input type="number">を定義します。
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default
range is 0 to 100. However, you can set restrictions on what
numbers are accepted with the min, max, and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Exercises
HTML Input Type Attribute
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |