最終更新日
ユーザーのデータ入力を可能にする、入力用のフォームコントロールを表します。input要素自身はコンテンツを持たない空要素で、終了タグはありません。Phrasingコンテンツの記述箇所で使用できます。
input要素では、type属性により入力項目の種類を指定します。利用できるキーワードは下表のとおりです。
input要素では、type属性以外に、フォームコントロールの種類に応じたさまざまな属性の指定が可能です。
accept属性は、ファイル送信の場合に、処理可能なファイルの種類を指定します。MIMEタイプのほか、「audio/*」、「video/*」、「image/*」の指定が可能です。複数指定する場合はカンマで区切ります。
alt属性は、画像ボタンの画像を利用できない場合に代替のラベルとして表示される文字列を指定します。画像ボタンでは、空の文字列でないalt属性の指定が必須です。
autocomplete属性では、オートコンプリート機能によって以前の入力内容を利用できるようにするかどうかを「on」または「off」のキーワードで指定できます。指定を省略したとき、input要素のautocomplete属性は「default」の状態になり、その場合は親要素のform要素のautocomplete属性がoffでない限り、「on」の値に設定されます。
checked属性を指定すると、チェックボックスやラジオボタンの項目にチェックが付いた状態で表示されます。
dirname属性は、テキストボックスの項目で文字の方向が変わる可能性のある場合に、その方向性を含めて送信できるようにするための属性です。値には、識別名としての文字列を指定します。ユーザーが、右から左など、他と方向が異なるテキストを入力すると、対応しているブラウザはdirname属性の情報をテキストと共にサーバーへ送信します。
list属性を、datalist要素と組み合わせて使うことで、項目の入力候補の一覧を提示できます。datalist要素のid属性で指定した文字列と同じものを、input要素のlist属性で指定し、入力項目とその候補リストとを関連付けます。
maxlength属性は、テキストフィールドの項目において入力可能な最大文字数を0以上の整数で指定します。値が指定されている場合ユーザーは、指定した文字数を超える長さの文字列を入力できません。
multiple属性は、emailまたはファイル送信の項目で、ユーザーが複数の値を指定できるかどうかを設定します。
pattern属性は、テキストフィールドの入力項目に対し、入力のパターンを「正規表現」を使って指定できます。その場合、title属性に、入力パターンの解説を含めておくと、ユーザーの入力時や入力エラーの表示時に有用です。
placeholder属性では、テキストフィールドの入力項目に対し、ユーザーの入力の際にヒントとなる、短い説明を指定できます。ヒントは、単語や語句などで、改行文字を含むことはできません。ヒントが長い文章の場合や、より助言的な内容の場合は、title属性を使うとよいでしょう。
readonly属性は、input要素の項目を読み取り専用にするかどうかを指定します。値がすでに決まっている項目をユーザーに示し、送信することが可能です。
required属性は、入力が必須となる項目に対して設定します。
src属性は、画像ボタンで利用する画像のURLを指定します。
step属性は、日付や時間、範囲の項目に対し、値の刻み値を、浮動小数点数またはキーワード「any」で指定します。
autofocus、disabled、form、name、valueの各属性は、フォームコントロールの要素で共通の属性です。属性値の指定に関しては、button要素の項も参照してください。
formaction、formenctype、formmethod、formnovalidate、formtargetの各属性は、フォーム送信のための属性で、送信ボタンと画像ボタンの項目で指定できます。指定を省略した場合は、form要素での対応する属性の指定値が適用されます。属性値の指定に関しては、form要素の項も参照してください。
カテゴリ | タグの省略 | 親要素 | 子要素 |
---|---|---|---|
Flowコンテンツ Phrasingコンテンツ Interactiveコンテンツ フォーム関連要素 |
空要素 | Phrasingコンテンツを子にできる要素 | なし |
属性 | 値 | 説明 |
---|---|---|
accept | ファイルタイプ | ファイル送信時に処理可能なファイルの種類を、MIMEタイプまたは、「audio/*」「video/*」「image/*」のキーワードで指定します。 |
alt | 文字列 | 画像ボタンの代わりに表示される文字列を指定します。 |
autocomplete | on|off | オートコンプリートのオンオフを指定します。 |
checked | checked | 論理属性。チェックボックスやラジオボタンを選択された状態にします。 |
dirname | 文字列 | 書字方向が変わる可能性のあるテキストに対して識別名を指定します。 |
list | 文字列 | datalist要素のid属性で指定した入力候補のリスト名を指定します。 |
maxlength | 数値 | テキストフィールドで、入力可能な最大文字数を指定します。 |
multiple | multiple | 論理属性。emailまたはファイル送信の項目で、複数の値が選択可能になります。 |
pattern | 値 | 入力のパターンを正規表現を使って指定します。 |
placeholder | 文字列 | 入力のヒントとなるような文字列を指定します。 |
readonly | readonly | 論理属性。input要素の項目を読み取り専用にします。 |
required | required | 論理属性。入力が必須となる項目に指定します。 |
src | URL | 画像ボタン用の画像ファイルのURLを指定します。 |
step | 値 | 値の刻み値を、浮動少数点数またはキーワード「any」で指定します。 |
height | 数値 | 項目が画像ボタンの場合に、画像の高さをピクセルで指定します。 |
width | 数値 | 項目が画像ボタンの場合に、画像の幅をピクセルで指定します。 |
max | 値 | 入力項目での最大値を指定します。 |
min | 値 | 入力項目での最小値を指定します。 |
size | 数値 | 項目の幅を指定します。 |
autofocus | autofocus | 論理属性。ページ表示時に項目がフォーカスされます。 |
disabled | disabled | 論理属性。フォームコントロールが使用不可になります。 |
form | ID | form要素のid属性の値を指定します。 |
name | 文字列 | input要素の名前を指定します。 |
value | 値 | 初期値を指定します。 |
formaction | URL | フォームデータの送信先URLを指定します。 |
formenctype | キーワード | 送信するデータの形式を、「application/x-www-form-urlencoded」「multipart/form-data」「text/plain」のいずれかのキーワードで指定します。省略時は「application/x-www-form-urlencoded」が適用されます。 |
formmethod | get|post | フォームデータの送信方法を、getまたはpostのいずれかで指定します。省略時は「get」です。 |
formnovalidate | formnovalidate | 論理属性。フォーム送信時の入力内容の確認を省略します。 |
formtarget | 文字列 | 送信結果ページの表示方法について、キーワードかウィンドウ名で指定します。キーワードは4つあり、「_self」は現在のウィンドウ、「_parent」は親ウィンドウ、「_top」は最上位のウィンドウ、「_blank」は新しいウィンドウに、それぞれ表示されます。 |
type | hidden | 隠しフィールド |
text | テキスト入力フィールド | |
search | 検索フィールド | |
tel | 電話番号入力フィールド | |
url | URL入力フィールド | |
メールアドレス入力フィールド | ||
password | パスワード入力フィールド | |
datetime | UTCによるタイムゾーンを含む日付と時刻のコントロール | |
date | タイムゾーンを含まない日付のコントロール | |
month | タイムゾーンを含まない月のコントロール | |
week | タイムゾーンを含まない週のコントロール | |
time | タイムゾーンを含まない時刻のコントロール | |
datetime-local | タイムゾーンを含まないローカルタイムでの日付と時刻のコントロール | |
number | 数値入力用のテキストフィールドまたはスピンコントロール | |
range | 範囲や程度などの数値用のコントロール | |
color | 8ビットの赤、緑、青から構成されるsRGBカラー | |
checkbox | チェックボックス(複数選択) | |
radio | ラジオボタン(択一選択) | |
file | ファイルアップロード用ラベルとボタン | |
submit | 送信ボタン | |
image | 送信用画像ボタン | |
reset | リセットボタン | |
button | 汎用ボタン | |
グローバル属性 | - | - |
イベント属性 | - | - |
<body> <form method="post" action="contact.php"> <fieldset> <legend>お問い合わせ</legend> <p><label>メールアドレス:<input type="email" name="mailad"></label></p> <p><label>タイトル:<input type="text" name="title"></label></p> <p><label>メッセージ:<textarea name="message"></textarea></label></p> </fieldset> <p> <input type="submit" name="submit" value="送信"> <input type="reset" name="reset" value="リセット"> </p> </form> </body>