HTML 入力属性
この章では、HTML <input>要素のさまざまな属性について説明します。
値属性
input value属性は、入力フィールドの初期値を指定します:
例
初期(デフォルト)値を持つ入力フィールド:
readonly属性
input readonly属性は、入力フィールドが読み取り専用であることを指定します。
読み取り専用の入力フィールドは変更できません (ただし、ユーザーはタブでそのフィールドに移動し、強調表示し、そこからテキストをコピーすることはできます)。
フォームを送信すると、読み取り専用の入力フィールドの値が送信されます。
例
読み取り専用の入力フィールド:
disabled属性
input disabled属性は、入力フィールドを無効にする必要があることを指定します。
無効化された入力フィールドは使用できず、クリックもできません。
無効化された入力フィールドの値は、フォームの送信時に送信されません!
例
無効な入力フィールド:
size属性
input size属性は、入力フィールドの表示幅を文字数で指定します。
sizeのデフォルト値は20です。
注：size属性は、text、search、tel、url、email、およびpasswordの入力タイプで機能します。
例
入力フィールドの幅を設定します。
maxlength属性
maxlength属性は、入力フィールドで許可される最大文字数を指定します。
注：maxlengthが設定されている場合、入力フィールドは指定された文字数を超える文字を受け入れません。ただし、この属性はフィードバックを提供しません。そのため、ユーザーに警告する場合は、JavaScriptコードを作成する必要があります。
例
入力フィールドの最大長を設定します。
minおよびmax属性
minとmax属性は、入力フィールドの最小値と最大値を指定します。
minとmax属性は、number、range、date、datetime-local、month、time、およびweekの入力タイプで機能します。
ヒント：max属性とmin属性を一緒に使用して、有効な値の範囲を作成します。
例
最大日付、最小日付、および有効な値の範囲を設定します。
multiple属性
multiple属性は、ユーザーが入力フィールドに複数の値を入力できることを指定します。
multiple属性は、電子メールとファイルの入力タイプで機能します。
例
複数の値を受け入れるファイルアップロードフィールド:
pattern属性
pattern属性は、入力フォームが送信されたときに入力フィールドの値がチェックされる正規表現を指定します。
pattern属性は、text、date、search、url、tel、email、およびpasswordの入力タイプで機能します。
ヒント：グローバルtitle属性を使用して、ユーザーに役立つパターンを記述します。
ヒント：正規表現について詳しくは、JavaScriptチュートリアルをご覧ください。
例
3文字のみを含むことができる入力フィールド(数字または特殊文字を含むことはできません):
placeholder属性
placeholder属性は、入力フィールドの予期される値を説明する短いヒント(サンプル値または予期される形式の短い説明)を指定します。
ユーザーが値を入力する前に、短いヒントが入力フィールドに表示されます。
placeholder属性は、text、search、url、tel、email、そしてpassword.の入力タイプで機能します。
例
プレースホルダーテキストを含む入力フィールド:
required属性
input required属性は、フォームを送信する前に入力フィールドに入力する必要があることを指定します。
required属性は、text、search、url、tel、email、password、date pickers、number、checkbox、radio、およびfileの入力タイプで機能します。
例
required入力フィールド:
step属性
step属性は、入力フィールドの有効な数値間隔を指定します。
例:step="3"の場合、有効な数値は-3、0、3、6などです。
ヒント：この属性をmaxおよびmin属性と一緒に使用して、有効な値の範囲を作成できます。
step属性は、number、range、date、datetime-local、month、time、およびweekの入力タイプで機能します。
例
指定された有効な数値間隔を持つ入力フィールド:
注：入力制限は確実なものではなく、JavaScriptには不正な入力を追加するさまざまな方法が用意されています。安全に入力を制限するには、受信側(サーバー)も入力をチェックする必要があります。
autofocus属性
autofocus属性は、ページの読み込み時に入力フィールドが自動的にフォーカスされるように指定します。
例
ページがロードされたときに「ファーストネーム」入力フィールドが自動的にフォーカスされるようにします。
heightとwidthの属性
inputのheightとwidthの属性は、<input type="image">要素の高さと幅を指定します。
ヒント：画像には常に高さと幅の両方の属性を指定してください。高さと幅が設定されている場合、ページがロードされるときに画像に必要なスペースが予約されます。これらの属性がないと、ブラウザは画像のサイズを認識できず、画像に適切なスペースを予約できません。その結果、読み込み中(画像の読み込み中)にページレイアウトが変更されます。
例
heightとwidthの属性を使用して、画像を送信ボタンとして定義します。
list属性
input list属性は、<input>要素の事前定義されたオプションを含む<datalist>要素を参照します。
例
<datalist>に定義済みの値を持つ<input>要素:
autocomplete属性
autocomplete属性は、フォームまたは入力フィールドのオートコンプリートをオンにするかオフにするかを指定します。
オートコンプリートにより、ブラウザは値を予測できます。ユーザーがフィールドへの入力を開始すると、ブラウザーは、以前に入力された値に基づいて、フィールドに入力するためのオプションを表示する必要があります。
autocomplete属性は、<form>および次の<input>タイプで機能します: text、search、url、tel、email、password、datepickers、range、color。
例
1つの入力フィールドに対してオートコンプリートをオンまたはオフにしたHTMLフォーム:
ヒント：一部のブラウザでは、これを機能させるためにオートコンプリート機能を有効にする必要がある場合があります (ブラウザのメニューの[設定]を参照してください)。
HTMLフォームと入力要素
| タグ | 説明 |
|---|---|
| <form> | ユーザー入力用のHTMLフォームを定義します |
| <input> | 入力コントロールを定義します |
使用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスを参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。