<input>
<input> は HTML の要素で、ユーザーからデータを受け取るための、ウェブベースのフォーム用の操作可能なコントロールを作成するために使用します。端末とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。<input> 要素は入力型と属性の組み合わせの数が非常に多いため、HTML の中で最も強力かつ最も複雑な要素の一つです。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML 属性 | ||||||
| accept 属性は、値としてカンマ区切りでファイル種別または固有ファイル種別指定子を取り、どのファイル種別を受け入れるかを記述します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| image ボタンに対してのみ有効です。alt 属性は画像の代替テキストを提供します。src の画像が存在しないか、または読み込みに失敗した場合にこの属性の値を表示します。input/image 入力型を参照してください。 | 1 | 12 | 1 | 1 | 18 | 1 |
| radio 型と checkbox 型の両方で有効で、checked は論理属性です。radio 型に存在した場合、そのラジオボタンが同じ名前のラジオボタンのグループの中で現在選択されているものであることを示します。checkbox 型に存在した場合、(ページが読み込まれたとき) 既定でチェックボックスがチェックされていることを示します。このチェックボックスが現在チェックされているかどうかを示すものではありません。チェックボックスの状態が変更された場合でも、このコンテンツ属性はその変更を反映しません。(HTMLInputElement の checked IDL 属性のみが更新されます。) | 1 | 12 | 1 | 1 | 18 | 1 |
| disabled は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。ユーザーはそのコントロールやフォームコントロールの子孫を編集したり、フォーカスしたりすることができません。 | 1 | 12 | 1 | 1 | 18 | 1 |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| image および submit 入力型でのみ有効です。詳しくは input/submit 入力型を参照してください。 | 9 | 12 | 4 | 5 | 18 | 4.2 |
| image および submit 入力型でのみ有効です。詳しくは input/submit 入力型を参照してください。 | 9 | 12 | 4 | 5 | 18 | 4.2 |
| image および submit 入力型でのみ有効です。詳しくは input/submit 入力型を参照してください。 | 9 | 12 | 4 | 5 | 18 | 4.2 |
| image および submit 入力型でのみ有効です。詳しくは input/submit 入力型を参照してください。 | 4 | 12 | 4 | 5 | 18 | 4 |
| image および submit 入力型でのみ有効です。詳しくは input/submit 入力型を参照してください。 | 9 | 12 | 4 | 5 | 18 | 4.2 |
| maxlength 属性は、ユーザーが input または textarea に入力できる最大文字列長を(UTF-16 コード単位で)定義します。 0 以上の整数値である必要があります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| minlength 属性は、ユーザーが input または textarea に入力できる最小文字列長を(UTF-16 コード単位で)定義します。この属性は 0 以上の整数値である必要があります。 | 40 | 17 | 51 | 10.1 | 40 | 10.3 |
| 入力コントロールの名前を指定する文字列です。この名前はフォームデータが送信される時に、コントロールの値と共に送信されます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| pattern 属性は、フォームコントロールの値が一致すべき正規表現を指定します。null 以外の値が pattern 値によって設定された制約に適合しない場合、ValidityState オブジェクトの読み取り専用の ValidityState.patternMismatch プロパティが真になります。 | 4 | 12 | 4 | 5 | 18 | 4 |
| 既定では、プレイスホルダーのテキストは半透明または明るい灰色で表示されます。::placeholder 擬似要素は入力欄の placeholder のテキストです。これは限定された CSS プロパティでスタイル設定することができます。 | 3 | 12 | 4 | 4 | 18 | 3.2 |
| readonly は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| 4 | 12 | 4 | 5 | 18 | 4 | |
| size 属性は、 input 要素の幅と select 要素の高さを定義します。 input については、 type 属性が input/text または input/password の場合は文字数です。これは 0 以上の整数でなければなりません。 | 1 | 12 | 1 | 1 | 18 | 1 |
| image 入力ボタンにのみ有効で、src は、グラフィカルな送信ボタンを表現するために表示する画像ファイルの URL を指定する文字列です。input/image 入力型を参照してください。 | 1 | 12 | 1 | 1 | 18 | 1 |
| input 要素の text 型は、基本的な単一行のテキスト入力欄を生成します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| DOM API | ||||||
| HTMLInputElement インターフェイスは input 要素のオプション、レイアウト、表示方法を操作するための特別なプロパティやメソッドを提供します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| accept は HTMLInputElement インターフェイスのプロパティで、input 要素の accept 属性を反映し、一般にカンマで区切られた固有ファイル型指定子のリストで、 の file 型に期待されるファイル型のヒントを提供します。この属性が明示的に設定されていない場合、accept 属性は空文字列になります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| alt は HTMLInputElement インターフェイスのプロパティで、画像を使用できないユーザーやユーザーエージェント向けに、ボタンのテキストラベルを定義します。これは、input 要素の alt 属性を反映します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| autocomplete は HTMLInputElement インターフェイスのプロパティで、ブラウザーによってコントロールの値が自動的に補完できるかどうかを示します。これは、input 要素の autocomplete 属性を反映します。 | 14 | 12 | 4 | 6 | 18 | 6 |
| cancel イベントは input 要素において、ユーザーが Esc キーやキャンセルボタンによってファイルピッカーダイアログをキャンセルしたり、前回 type="file" で選択された同じファイルを再選択した場合に発生します。 | 113 | 113 | 91 | 16.4 | 113 | 16.4 |
| checked は HTMLInputElement インターフェイスのプロパティで、要素の現在のチェック状態、つまり、あるフォームコントロールがチェック済みかどうかを指定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| defaultValue は HTMLInputElement インターフェイスのプロパティで、input 要素の元の(または既定の)値を示します。これは、この要素の value 属性を反映します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| HTMLInputElement.disabled は disabled という HTML の属性を反映した論理値で、このコントロールが無効であるかどうかを表します。無効である場合、クリックを受け付けません。無効化された要素は使用できず、クリックもできません。 | 1 | 12 | 1 | 1 | 18 | 1 |
| form は HTMLInputElement インターフェイスの読み取り専用プロパティで、この input を所有する HTMLFormElement オブジェクトを返し、この入力フィールドがどのフォームにも所有されていない場合は null を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| formAction は HTMLInputElement インターフェイスのプロパティで、このコントロールを含むフォームが送信された際にサーバー上で実行されるプログラムの URL です。これは、 の formaction 属性の値を反映します。 | 9 | 12 | 4 | 5 | 18 | 4.2 |
| formEnctype は HTMLInputElement インターフェイスのプロパティで、 タグのformEnctype属性がフォーム送信の方法として指定されている場合、サーバーに送信されるコンテンツの MIME_typeです。これは、 の formenctype 属性の値を反映します。 | 9 | 12 | 4 | 5 | 18 | 4.2 |
| formMethod は HTMLInputElement インターフェイスのプロパティで、フォームを送信する input 要素が form を送信するコントロールである場合、送信に使用される HTTP メソッドです。これは、 の formmethod 属性の値を反映します。 | 9 | 12 | 4 | 5 | 18 | 4.2 |
| formNoValidate は HTMLInputElement インターフェイスのプロパティで、 form がこの input から送信されたとき、制約検証を回避するかどうかを示す論理値です。この 要素の formnovalidate 属性を反映します。 | 4 | 12 | 4 | 5 | 18 | 4 |
| formTarget は HTMLInputElement インターフェイスのプロパティで、送信される form のレスポンスが表示されるタブ、ウィンドウ、iframe です。これは、この input 要素の formtarget 属性の値を反映します。 | 9 | 12 | 4 | 5 | 18 | 4.2 |
| height は HTMLInputElement インターフェイスのプロパティで、コントロールの高さを指定します。これは、 input 要素の height 属性を反映します。 | 21 | 12 | 16 | 7 | 25 | 7 |
| invalid イベントは、送信可能な要素が制約検証を受け、制約を満たしていない場合に発行されます。 | 10 | 12 | 4 | 5 | 18 | 5 |
| HTMLInputElement.labels は読み取り専用プロパティで、input 要素に関連付けられた label 要素を NodeList で返します。この要素が hidden 型であった場合は、このプロパティは null を返します。 | 6 | 18 | 56 | 5 | 18 | 4.2 |
| list は HTMLInputElement インターフェイスの読み取り専用プロパティで、この要素の list 属性が指し示す HTMLDataListElement を返します。list 属性が定義されていない場合、または list 属性の値が同じツリー内のどの にも関連付けられていない場合は、null が返されます。 | 20 | 12 | 4 | 12.1 | 25 | 12.2 |
| maxLength は HTMLInputElement インターフェイスのプロパティで、この input 要素の値として入力が許可される最大文字数(UTF-16 コード単位)と、有効な値として許可される最大文字数を示します。これは、この要素の maxlength 属性を反映します。-1 は、値の長さに制限がないことを意味します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| minLength は HTMLInputElement インターフェイスのプロパティで、この input 要素の値として必要な最小文字数(UTF-16 コード単位)を示します。これは、この要素の minlength 属性を反映します。-1 は、必要な最小文字数がないことを意味します。 | 40 | 17 | 51 | 10.1 | 40 | 10.3 |
| name は HTMLInputElement インターフェイスのプロパティで、この input 要素の名前を示します。これは、この要素の name 属性を反映します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| pattern は HTMLInputElement インターフェイスのプロパティで、空ではない input の値が一致すべき正規表現を表します。これは、input 要素の pattern 属性を反映します。 | 4 | 12 | 4 | 5 | 18 | 4 |
| placeholder は HTMLInputElement インターフェイスのプロパティで、このコントロールに入力できる内容についてのヒントをユーザーに表示します。これは、input 要素の placeholder 属性を反映します。 | 3 | 12 | 4 | 4 | 18 | 3.2 |
| readOnly は HTMLInputElement インターフェイスのプロパティで、input の値をユーザーが変更できないことを示します。これは input 要素の readonly 論理属性を反映したもので、属性が存在する場合は true を返し、省略されている場合は false を返します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| required は HTMLInputElement インターフェイスのプロパティで、フォームを送信する前にユーザーが値を入力しなければならないことを指定します。これは、input 要素の required 属性を反映します。 | 4 | 12 | 4 | 5 | 18 | 4 |
| HTMLInputElement.select() メソッドは、textarea 要素またはテキストフィールドを含む input 要素内のすべてのテキストを選択します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| select イベントは、いくらかのテキストが選択されたときに発生します。 | 1 | 12 | 6 | 1 | 18 | 1 |
| selectionDirection は HTMLInputElement インターフェイスのプロパティで、ユーザーがテキストを選択する方向を示す文字列です。 | 15 | 13 | 8 | 6 | 18 | 6 |
| selectionEnd は HTMLInputElement インターフェイスのプロパティで、選択テキストの末尾のインデックスを表す数値です。選択がない場合、これは現在のテキスト入力カーソル位置の直後の文字のオフセットを返します。 | 1 | 12 | 1 | 1.3 | 18 | 1 |
| selectionStart は HTMLInputElement インターフェイスのプロパティで、選択テキストの先頭インデックスを表す数値です。何も選択されていない場合は、 要素内のテキスト入力カーソル(キャレット)の位置を返します。 | 1 | 12 | 1 | 1.3 | 18 | 1 |
| HTMLInputElement.setRangeText() メソッドは、 input や textarea 要素の中のテキストの範囲を新しい文字列に置き換えます。 | 24 | 79 | 27 | 7 | 25 | 7 |
| HTMLInputElement.setSelectionRange() メソッドは、 input または textarea 要素の中で現在のテキストの選択範囲の開始位置と終了位置を設定します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| size は HTMLInputElement インターフェイスのプロパティは、表示される可視文字数を定義します。これは、input 要素の size 属性を反映します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| type は HTMLInputElement インターフェイスのプロパティで、 input 要素を入力する際に許可されるデータの型(数値、日付、メールアドレスなど)を示します。ブラウザーは適切なウィジェットを選択し、ユーザーが有効な値を入力できるように振る舞います。 | 1 | 12 | 1 | 1 | 18 | 1 |
| value は HTMLInputElement インターフェイスのプロパティで、この input 要素の現在の値を文字列で表します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| width は HTMLInputElement インターフェイスのプロパティで、コントロールの高さを指定します。これは、 input 要素の width 属性を反映します。 | 21 | 12 | 16 | 7 | 25 | 7 |
- Firefox 89 より前のバージョンでは、`Document.execCommand()` コマンドを使って `<input>` 要素の内容を操作するには回避策が必要でした (バグ 1220696 を参照)。
- Audio/*` MIME タイプをサポートしていない。バグ 242110 を参照してください。
基本構文
<input type="text" placeholder="テキスト入力">
<input type="password" placeholder="パスワード">
<input type="email" placeholder="メールアドレス">
<input type="number" min="0" max="100" step="1">
<input type="search" placeholder="検索..."> ライブデモ
valid-tion withinput
Required, pattern, min/max equal in browserstandard. valid-tion apply.
実務での使いどころ
-
<input> の活用
<input> は HTML の要素で、ユーザーからデータを受け取るための、ウェブベースのフォーム用の操作可能なコントロールを作成するために使用します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。