HTML入力属性
この章では、HTML<input>要素のさまざまな属性について説明します。
値属性
inputvalue属性は、入力フィールドの初期値を指定します。
例
初期（デフォルト）値の入力フィールド：
<form>
<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">
</form>
読み取り専用属性
inputreadonly属性は、入力フィールドが読み取り専用であることを指定します。
読み取り専用の入力フィールドは変更できません（ただし、ユーザーはそのフィールドにタブで移動し、強調表示して、そこからテキストをコピーできます）。
フォームを送信すると、読み取り専用の入力フィールドの値が送信されます。
例
読み取り専用の入力フィールド：
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
無効にされた属性
inputdisabled属性は、入力フィールドを無効にする必要があることを指定します。
無効になっている入力フィールドは、使用およびクリックできません。
フォームを送信するときに、無効になっている入力フィールドの値は送信されません。
例
無効な入力フィールド：
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
サイズ属性
inputsize属性は、入力フィールドの表示幅を文字数で指定します。
のデフォルト値sizeは20です。
注：このsize属性は、テキスト、検索、電話、URL、電子メール、およびパスワードの入力タイプで機能します。
例
入力フィールドの幅を設定します。
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
maxlength属性
inputmaxlength属性は、入力フィールドで許可される最大文字数を指定します。
注： amaxlengthが設定されている場合、入力フィールドは指定された文字数を超えることはできません。ただし、この属性はフィードバックを提供しません。したがって、ユーザーに警告する場合は、JavaScriptコードを作成する必要があります。
例
入力フィールドの最大長を設定します。
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
最小属性と最大属性
inputminおよびmaxattributesは、入力フィールドの最小値と最大値を指定します。
minおよび属性はmax、数値、範囲、日付、日時-ローカル、月、時刻、および週の入力タイプで機能します。
ヒント： max属性とmin属性を一緒に使用して、有効な値の範囲を作成します。
例
最大日、最小日、および有効な値の範囲を設定します。
<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"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
複数の属性
inputmultiple属性は、ユーザーが入力フィールドに複数の値を入力できることを指定します。
このmultiple属性は、emailおよびfileの入力タイプで機能します。
例
複数の値を受け入れるファイルアップロードフィールド：
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
パターン属性
inputpattern属性は、フォームの送信時に入力フィールドの値がチェックされる正規表現を指定します。
このpattern属性は、テキスト、日付、検索、URL、電話、電子メール、およびパスワードの入力タイプで機能します。
ヒント：グローバルタイトル属性を使用して、ユーザーを支援するパターンを記述します。
ヒント： JavaScriptチュートリアルで、正規表現の詳細を確認してください。
例
3文字のみを含めることができる入力フィールド（数字や特殊文字は不可）：
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
プレースホルダー属性
inputplaceholder属性は、入力フィールドの期待値を説明する短いヒント（サンプル値または期待される形式の簡単な説明）を指定します。
ユーザーが値を入力する前に、入力フィールドに短いヒントが表示されます。
このplaceholder属性は、テキスト、検索、URL、電話、電子メール、およびパスワードの入力タイプで機能します。
例
プレースホルダーテキストを含む入力フィールド：
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
必要な属性
inputrequired属性は、フォームを送信する前に入力フィールドに入力する必要があることを指定します。
このrequired属性は、テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオ、ファイルの入力タイプで機能します。
例
必須の入力フィールド：
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
ステップ属性
inputstep属性は、入力フィールドの有効な番号間隔を指定します。
例：step = "3"の場合、有効な番号は-3、0、3、6などになります。
ヒント：この属性をmax属性およびmin属性と一緒に使用して、有効な値の範囲を作成できます。
このstep属性は、数値、範囲、日付、日時ローカル、月、時刻、および週の入力タイプで機能します。
例
指定された有効な番号間隔の入力フィールド：
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
注：入力制限は絶対確実ではなく、JavaScriptは不正な入力を追加する多くの方法を提供します。入力を安全に制限するには、受信者（サーバー）もチェックする必要があります！
オートフォーカス属性
inputautofocus属性は、ページの読み込み時に入力フィールドが自動的にフォーカスを取得するように指定します。
例
ページが読み込まれたときに、「名」入力フィールドに自動的にフォーカスが移るようにします。
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
高さと幅の属性
入力heightとwidth属性は、要素の高さと幅を指定します<input
type="image">。
ヒント：画像の高さと幅の両方の属性を常に指定してください。高さと幅が設定されている場合、ページの読み込み時に画像に必要なスペースが予約されます。これらの属性がないと、ブラウザは画像のサイズを認識せず、適切なスペースを予約できません。その結果、読み込み中（画像の読み込み中）にページレイアウトが変更されます。
例
高さと幅の属性を使用して、画像を送信ボタンとして定義します。
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
リスト属性
inputlist属性は<datalist>、<input>要素の事前定義されたオプションを含む要素を参照します。
例
<datalist>に事前定義された値を持つ<input>要素：
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
オートコンプリート属性
inputautocomplete属性は、フォームまたは入力フィールドのオートコンプリートをオンにするかオフにするかを指定します。
オートコンプリートを使用すると、ブラウザで値を予測できます。ユーザーがフィールドの入力を開始すると、ブラウザーは、以前に入力された値に基づいて、フィールドに入力するためのオプションを表示する必要があります。
このautocomplete属性は<form>、<input>テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、範囲、および色で機能します。
例
1つの入力フィールドに対してオートコンプリートがオンおよびオフになっているHTMLフォーム：
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
ヒント：一部のブラウザでは、これを機能させるためにオートコンプリート機能をアクティブにする必要がある場合があります（ブラウザのメニューの[設定]の下を見てください）。
HTML演習
HTMLフォームと入力要素
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。