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属性のデフォルト値は「テキスト」です。

入力タイプ text

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

例

<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コードをブラウザに表示すると、次のようになります。

ユーザーネーム :

パスワード :

入力タイプ password

<input type="password">はパスワード欄を定義します。

例

<form> <label for="username">ユーザーネーム:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">パスワード:</label><br> <input type="password" id="pwd" name="pwd"> </form>

上記のHTMLコードをブラウザに表示すると、次のようになります。

パスワードフィールドの文字はマスクされます(アスタリスクまたは丸で表示されます)。

入力タイプ submit

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

通常、フォームハンドラーは、入力データを処理するためのスクリプトを含むサーバーページです。

フォームハンドラーはフォームのaction属性で指定されます。

例

<form action="/action_page.php"> <label for="fname">ファーストネーム:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">ラストネーム:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

上記のHTMLコードをブラウザに表示すると、次のようになります。

送信ボタンのvalue属性を省略すると、ボタンはデフォルトのテキストを取得します。

例

入力タイプ reset

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

例

上記のHTMLコードをブラウザに表示すると、次のようになります。

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

入力タイプ radio

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

ラジオボタンを使用すると、ユーザーは限られた数の選択肢から1つだけを選択できます。

例

<p>お気に入りの言語を選んでください:</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コードをブラウザに表示すると、次のようになります。

HTML

CSS

JavaScript

入力タイプ checkbox

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

チェックボックスを使用すると、ユーザーは限られた数の選択肢から0個以上のオプションを選択できます。

例

<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="自転車"> <label for="vehicle1">自転車を持っています</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="車"> <label for="vehicle2">車を持っています</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="ボート"> <label for="vehicle3">ボートを持っています</label> </form>

上記のHTMLコードをブラウザに表示すると、次のようになります。

私は自転車を持っています

私は車があります

私はボートを持っています

入力タイプ button

<input type="button">はボタンを定義します:

例

上記のHTMLコードをブラウザに表示すると、次のようになります。

入力タイプ color

<input type="color">は、色を含める必要がある入力フィールドに使用されます。

ブラウザーのサポートによっては、カラーピッカーが入力フィールドに表示される場合があります。

例

<form> <label for="favcolor">好きな色を選んでください:</label> <input type="color" id="favcolor" name="favcolor"> </form>

入力タイプ date

<input type="date">は日付を含む必要がある入力フィールドに使用されます。

ブラウザーのサポートによっては、日付ピッカーが入力フィールドに表示される場合があります。

例

min属性とmax属性を使用して日付に制限を追加することもできます。

例

<form> <label for="datemax">1980-01-01より前の日付を入力してください:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">2000-01-01以降の日付を入力してください:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"> </form>

入力タイプ datetime-local

<input type="datetime-local">はタイムゾーンなしで日付と時刻の入力フィールドを指定します。

ブラウザーのサポートによっては、日付ピッカーが入力フィールドに表示される場合があります。

例

<form> <label for="birthdaytime">誕生日（日付と時刻）:</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> </form>

入力タイプ mail

<input type="email">は電子メールアドレスを含む必要がある入力フィールドに使用されます。

ブラウザのサポートによっては、送信時に電子メールアドレスが自動的に検証される場合があります。

一部のスマートフォンでは電子メールの種類を認識し、電子メールの入力に合わせてキーボードに「.com」を追加します。

例

<form> <label for="email">メールアドレスを入力してください:</label> <input type="email" id="email" name="email"> </form>

入力タイプ image

<input type="image">は画像を送信ボタンとして定義します。

画像へのパスはsrc属性で指定します。

例

入力タイプ file

<input type="file">はファイルをアップロードするためのファイル選択フィールドと「参照」ボタンを定義します。

例

<form> <label for="myfile">ファイルを選択してください:</label> <input type="file" id="myfile" name="myfile"> </form>

入力タイプ hidden

<input type="hidden">は非表示の入力フィールドを定義します (ユーザーには表示されません)。

隠しフィールドを使用すると、Web開発者は、フォームの送信時にユーザーが表示または変更できないデータを含めることができます。

非表示フィールドには、多くの場合、フォームが送信されたときに更新する必要があるデータベースレコードが格納されます。

注：この値はページのコンテンツ内でユーザーには表示されませんが、ブラウザの開発者ツールまたは「ソースの表示」機能を使用すると表示 (および編集可能) になります。セキュリティの手段としてhiddenの入力を使用しないでください。

例

<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>

入力タイプ month

<input type="month">を使用すると、ユーザーは月と年を選択できます。

ブラウザーのサポートによっては、日付ピッカーが入力フィールドに表示される場合があります。

例

入力タイプ number

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

受け付ける番号を制限することもできます。

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

例

入力制限

一般的な入力制限のリストを次に示します。

属性	説明
checked	ページの読み込み時に入力フィールドを事前に選択するように指定します (type="checkbox"またはtype="radio"の場合)。
disabled	入力フィールドを無効にすることを指定します
max	入力フィールドの最大値を指定します
maxlength	入力フィールドの最大文字数を指定します
min	入力フィールドの最小値を指定します
pattern	入力値をチェックする正規表現を指定します
readonly	入力フィールドが読み取り専用であることを指定します(変更できません)。
required	入力フィールドが必須であることを指定します(入力する必要があります)
size	入力フィールドの幅(文字数)を指定します
step	入力フィールドの有効な数値間隔を指定します
value	入力フィールドのデフォルト値を指定します

入力制限については、次の章で詳しく説明します。

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

例

入力タイプ range

<input type="range">は正確な値が重要でない数値を入力するためのコントロールを定義します(スライダーコントロールなど)。デフォルトの範囲は0～100です。ただし、min、max、step属性で受け入れられる数値に制限を設定できます。

例

入力タイプ search

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

例

<form> <label for="gsearch">Googleで検索:</label> <input type="search" id="gsearch" name="gsearch"> </form>

入力タイプ tel

<input type="tel">は電話番号を含む必要がある入力フィールドに使用されます。

例

<form> <label for="phone">電話番号を入力してください:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form>

入力タイプ time

<input type="time">を使用すると、ユーザーは時間を選択できます(タイムゾーンなし)。

ブラウザのサポートによっては、タイムピッカーが入力フィールドに表示される場合があります。

例

<form> <label for="appt">時間を選択してください:</label> <input type="time" id="appt" name="appt"> </form>

入力タイプ url

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

ブラウザーのサポートによっては、送信時にurlフィールドを自動的に検証できます。

一部のスマートフォンではURLの種類を認識し、URL入力に合わせてキーボードに「.com」を追加します。

例

<form> <label for="homepage">ホームページを追加する:</label> <input type="url" id="homepage" name="homepage"> </form>

入力タイプ week

<input type="week">を使用すると、ユーザーは週と年を選択できます。

ブラウザーのサポートによっては、日付ピッカーが入力フィールドに表示される場合があります。

例

<form> <label for="week">週を選択してください:</label> <input type="week" id="week" name="week"> </form>