3 つの入力フィールド（2 つのテキストフィールドと 1 つの送信ボタン）を持つ HTML フォーム：
<form
action="demo_form.html">
First name: <input type="text" name="fname"><br>
Last name:
<input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
Try it Yourself ❯<input> タグは、ユーザがデータを入力できる入力フィールドを指定します。
<input> 要素は、ユーザにデータ入力を可能にする入力コントロールを宣言するため、<form> 内で使われます。
入力フィールドは、type 属性に応じて、様々な振る舞いに変えることができます。
| 要素 | |||||
|---|---|---|---|---|---|
| <input> | Yes | Yes | Yes | Yes | Yes |
注: <input> 要素は空要素で、属性のみが含まれます。
チップ:<input> 要素のラベルを定義するには、<label> 要素を使用します。
"align" 属性は、HTML5 ではサポート対象外。
HTML5 では、<input> タグに幾つかの新規属性が追加されると共に、type 属性には新しい値が追加されました。
HTML では、<input> タグには終了タグがありません。
XHTML では、<input> タグを <input /> のように適切に閉じなければなりません。
= HTML5 で新規追加。
| 属性 | 値 | 説明 |
|---|---|---|
| accept | file_extension audio/* video/* image/* media_type |
サーバが受信するファイルタイプを指定する(type="file" の場合のみ） |
| align | left right top middle bottom |
HTML5 ではサポート対象外。 画像ボタンの配置を指定する (type="image" の場合のみ) |
| alt | text | 画像の代替テキスト指定します (type="image" の場合のみ) |
| autocomplete | on off |
<input> 要素の自動補完を有効にするかどうかを指定する |
| autofocus | autofocus | ページをロードした時に、<input> 要素が自動的にフォーカスを取得するよう指定する |
| checked | checked | ページのロード時、事前に選択された <input> 要素を指定する (type="checkbox" または type="radio" の場合) |
| dirname | inputname.dir | 送信するテキストの方向を指定する |
| disabled | disabled | 無効にする <input> 要素を指定する |
| form | form_id | <input> 要素が属する 1 つ以上のフォームを指定する |
| formaction | URL | フォームの送信時に、入力コントロールを処理するファイルの URL を指定する (type="submit" と type="image" の場合) |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
サーバへの送信時に、フォーム·データのエンコード方法を指定する (type="submit" と type="image" の場合) |
| formmethod | get post |
アクション URL にデータを送信するための HTTP メソッドを定義する (type="submit" と type="image" の場合) |
| formnovalidate | formnovalidate | 送信時にフォーム要素の検証を行わないことを定義する |
| formtarget | _blank _self _parent _top framename |
フォームの送信後に、受信した応答を表示する場所を指定する (type="submit" と type="image" の場合) |
| height | pixels | <input> 要素の高さを指定する (type="image" の場合のみ) |
| list | datalist_id | <input> 要素の定義済み選択肢が含まれている <datalist> 要素を参照する |
| max | number date |
<input> 要素の最大値を指定する |
| maxlength | number | ><input> 要素で使用できる最大文字数を指定する |
| min | number date |
<input> 要素の最小値を指定する |
| multiple | multiple | <input> 要素に複数の値を入力できることを指定する |
| name | text | <input> 要素の名前を指定する |
| pattern | regexp | <input> 要素の値をチェックする正規表現を指定する |
| placeholder | text | <input> 要素の期待値を記述する短いヒントを指定 |
| readonly | readonly | 入力フィールドが読み取り専用であることを指定する |
| required | required | フォームの送信前に、入力フィールドに入力しなければならないことを指定する |
| size | number | <input> 要素の幅を文字数で指定する |
| src | URL | 送信ボタンとして使用する画像のURLを指定する (type="image" の場合のみ) |
| step | number | 入力フィールドにステップ値を指定する |
| type | button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week |
表示するために <input> 要素のタイプを指定する |
| value | text | <input> 要素の値を指定する |
| width | pixels | <input> 要素の幅を指定する (type="image" の場合のみ) |
<input> タグは、HTML のグローバル属性もサポートします。
<input> タグは、HTML のイベント属性もサポートします。
HTML チュートリアル：HTML Forms
HTML DOM reference:
なし。