[Edge]。→、
ユーザー インタフェース入力部
フォームの制御や入力。
フレージング内容が期待される場所。
なし。
終了タグなし。
また、title 属性はこの要素で特別なセマンティックスを持つ： パターンの説明（ pattern 属性とともに使用する場合）。
TEXTAREA 要素。
ファイル取得に於けるタイプ リストの指定をします。
タイプは、拡張子「.jpg」など。そしてMIMEタイプ「image/jpeg」などの指定が可能です。
大文字小文字は区別されません。
カンマ「,」で区切り、リストとし、半角スペースを含んでも可能。
「*」使用可能。例えば「.*pg」で「.mpg」「.jpg」などが候補に挙がるようになります。
audio/*
| 音声ファイルが受け入れられることを示す。 |
|---|---|
video/*
| 動画ファイルが受け入れられることを示す。 |
image/*
| 画像ファイルが受け入れられることを示す。 |
| パラメーターのない妥当なMIMEタイプ文字列 | 指定された型のファイルが受け入れられることを示す。 |
最初の文字が U+002E FULL STOP 文字（.）である文字列
| 指定されたファイル拡張をもつファイルが受け入れられることを示す。 |
たとえば、Microsoft Word 文書を Open Document 形式のファイルに変換するアプリケーションを考えてみる。Microsoft Word 文書は多種多様な MIME タイプと拡張子で記載されるので、次のように、サイトは複数列挙できる：
<INPUT type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
画像が利用不可である場合に使用する代用テキスト。
画像を使用できないユーザーおよびユーザー エージェントのためにボタンのテキスト ラベルを提供する。alt 属性は存在しなければならず、画像が利用できなかった場合に等価なボタンに対して適切だろうラベルを与える空でない文字列を含まなければならない。
<INPUT type=image alt="画像1" src="../Sample/Picture.jpg"><BR> <INPUT type=image alt="画像1" src="○○"><BR>
フォーム オートフィル機能に対するヒント。→mdn
type属性が hidden、text、search、url、tel、email、date、month、week、time、datetime-local、number、range、color、password で有効。
off
| ブラウザーはこのフィールドの値を自動的に入力または選択することが許可されていません。文書やアプリケーションが独自の自動補完機能を提供していたり、セキュリティ上の理由でフィールドの値を自動的に入力しないよう要求していたりする可能性はあります。 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
on
| ブラウザーが自動的に入力を補完することが許可されています。フィールドに求められているデータ型としてのガイダンスが提供されていないので、ブラウザーは独自の判断を行うかもしれません。 | ||||||||||||
name
| このフィールドは人の氏名の値が期待されています。一般的には、氏名を各部分に分割すると、多様な人の氏名を扱ったり構成したりしにくくなるため、"name" を使用したほうが推奨されます。しかし、氏名をそれぞれの部分に分割する必要があるのであれば、以下の autocomplete の値を使用することができます。
| ||||||||||||
email
| メール アドレス。 | ||||||||||||
username
| ユーザー名またはアカウント名。 | ||||||||||||
new-password
| 新しいパスワード。新しいアカウントを作成したりパスワードを変更したりした場合は、一般的な「現在のパスワードを入力してください」ではなく、「新しいパスワードを入力してください」または「パスワードの確認」欄で使用してください。これは意図せずに既存のパスワードが意図せずに入力されるのを防いだり、安全なパスワードを生成するための助けになったりします（autocomplete="new-password" による自動補完の防止も参照してください）。 | ||||||||||||
current-password
| ユーザーの現在のパスワードです。 | ||||||||||||
one-time-code
| ユーザー自身を確認するために使われるワンタイム コードです。 | ||||||||||||
organization-title
| 職名や組織内の肩書です（例： "上級技術ライター"、"社長"、"副部隊長"） | ||||||||||||
organization
| 企業または団体の名前です。"Acme Widget Company" や "Girl Scouts of America" など。 | ||||||||||||
street-address
| 住所。複数行のテキストが使用でき、第2行政レベル（普通は市町村）の中で完全に住所を識別できるものですが、市町村名、郵便番号、国名は含めるべきではありません。 | ||||||||||||
address-line1、address-line2、address-line3
| 住所のそれぞれの行です。これらは "street-address" が存在しない場合のみ置くことができます。 | ||||||||||||
address-level4
| 住所が4段階まである場合のもっとも細かい行政レベルです。 | ||||||||||||
address-level3
| 少なくとも3段階の行政レベルがある住所において、3番目の行政レベルです。 | ||||||||||||
address-level2
| 少なくとも2段階の行政レベルがある住所において、2番目の行政レベルです。2つの行政レベルがある国では、これはふつう市町村や、住所のあるその他の地域を表します。 | ||||||||||||
address-level1
| 住所の一番上行政レベルです。これはふつう、住所がある都道府県です。合衆国では州になります。スイスでは、カートンになります。イギリスでは、ポストタウンになります。 | ||||||||||||
country
| 国コードです。 | ||||||||||||
country-name
| 国名です。 | ||||||||||||
postal-code
| 郵便番号です（アメリカでは ZIP コードです）。 | ||||||||||||
cc-name
| クレジット カードなどの支払手段に表示、または関連付けられた氏名です。一般に、氏名の各部分に分割するよりも氏名のフィールドを使う方が推奨されます。 | ||||||||||||
cc-given-name
| クレジット カードなどの支払手段に指定された下の名前（ファースト ネーム）です。 | ||||||||||||
cc-additional-name
| クレジット カードなどの支払手段に指定された中間名（ミドル ネーム）です。 | ||||||||||||
cc-family-name
| クレジット カードなどの支払手段に指定された姓です。 | ||||||||||||
cc-number
| クレジット カードや番号や、口座番号などの支払手段を識別するその他の番号です。 | ||||||||||||
cc-exp
| 支払手段の有効期限で、ふつうは "MM/YY" または "MM/YYYY" の形です。 | ||||||||||||
cc-exp-month
| 支払手段の有効期限の月です。 | ||||||||||||
cc-exp-year
| 支払手段の有効期限の年です。 | ||||||||||||
cc-csc
| 支払手段のセキュリティ コードです。クレジット カードでは、カードの裏に書かれた3桁の認証番号です。 | ||||||||||||
cc-type
| 支払手段の種類です。（例： "Visa" や "Master Card")。 | ||||||||||||
transaction-currency
| この取引で決済が行われる通貨です。 | ||||||||||||
transaction-amount
| 支払を行う金額の "transaction-currency" の単位による量です。 | ||||||||||||
language
| 優先言語で、有効な BCP 47 言語タグ で指定されたものです。 | ||||||||||||
bday
| 生年月日の全体です。 | ||||||||||||
bday-day
| 生年月日の日の部分です。 | ||||||||||||
bday-month
| 生年月日の月の部分です。 | ||||||||||||
bday-year
| 生年月日の年の部分です。 | ||||||||||||
sex
| 性別で（"Female"、"Fa'afafine"、"Male" など）、改行のない自由な形式のテキストです。 | ||||||||||||
tel
| 国番号を含む、完全な電話番号です。電話番号を書く部分に分割する必要がある場合は、各フィールドに以下の値を使用することができます。 | ||||||||||||
tel-country-code
| 国コードで、例えば "1" はアメリカ、カナダ、その他の北アメリカとカリブ海の一部です。 | ||||||||||||
tel-national
| 国番号以外の部分の電話番号全体で、市外局番の接頭辞（日本では 0）を含みます。"1-855-555-6502" という電話番号については、このフィールドの値は "855-555-6502" となります。 | ||||||||||||
tel-area-code
| 市外局番で、必要に応じて市外局番の接頭辞（日本では 0）を含みます。 | ||||||||||||
tel-local
| 国番号や市外局番を含まない電話番号です。これはさらに、市内局番と加入者番号の2つに分割することができます。"555-6502" という電話番号では、"tel-local-prefix" は "555"、"tel-local-suffix" は "6502" となります。 | ||||||||||||
tel-extension
| 電話番号の下の内線番号です。ホテルの部屋番号や企業オフィスの内線番号などです。 | ||||||||||||
impp
| インスタント メッセージング プロトコルの端点、たとえば "xmpp:username@example.net" などです。 | ||||||||||||
url
| URL です。このフォームの他のフィールドの文脈から見て適切な、ホームページのや企業ウェブサイトのアドレスです。 | ||||||||||||
photo
| このフォームの他のフィールドの文脈における人物、企業、連絡先情報を表す画像の URL です。 |
詳しくは WHATWG 仕様書 をご覧ください。
<FORM autocomplete style="border:1px solid black;"> <INPUT type=text name=FInput1><BR> <INPUT type=text autocomplete=username name=FInput2><BR> </FORM> <INPUT type=text name=Input1><BR> <INPUT type=text autocomplete=username name=Input2><BR>¶
コントロールがチェックされているかどうか。INPUT 要素のデフォルトのcheckednessを与える。真偽属性。
checked コンテンツ属性が追加されるとき、コントロールが dirty checkedness を持たない場合、ユーザー エージェントは要素の checkedness を true に設定しなければならない。checked コンテンツ属性が削除されるとき、コントロールが dirty checkedness を持たない場合、ユーザーエージェントは要素の checkedness を false に設定しなければならない。
<INPUT type=checkbox> <INPUT type=radio><BR>
<INPUT checked type=checkbox> <INPUT checked type=radio><BR>
フォーム送信で、要素の方向を送信するために使用するフォーム コントロールの名前。
要素の方向の送信を有効にし、フォーム送信の間にこの値を含むコントロール名を与える。そのような属性が指定される場合、その値は空文字列であってはならない。
この例において、フォームはテキストコントロールと送信ボタンを含む：
<FORM action="addcomment.cgi" method=post>
<P><LABEL>Comment: <INPUT type=text name="comment" dirname="comment.dir" required></LABEL></P>
<P><BUTTON name="mode" type=submit value="add">Post Comment</BUTTON></P>
</FORM>
ユーザーがフォームを送信するとき、ユーザー エージェントは、"comment"、"comment.dir"、"mode" と呼ばれる 3 つのフィールドを含む。よって、ユーザーが "Hello" を打ち込んだ場合、送信ボディはこのようになるかもしれない：
comment=Hello&comment.dir=ltr&mode=add
フォーム コントロールが無効であるかどうか。真偽属性。
<INPUT disabled type=text><BR> <INPUT disabled type=checkbox><BR> <INPUT disabled type=button value=ボタン><BR>
FORM 要素とこの要素を関連付ける。
その属性の値は、その要素のツリーで FORM 要素の ID でなければならない。
<FORM id=IdformForm> <INPUT form=IdformForm type=text><BR> </FORM>¶BUTTONと同様でFORM内に置くならform属性は不要かもしれない。
フォーム送信に使用する URL。
type属性が image、submit でのみ有効。
フォーム送信に使用するエントリー リストのエンコーディング タイプ。
潜在的にスペースで囲まれた妥当な空でない URLである値を持たなければならない。
要素が送信ボタンであり、かつそのような属性を持つ場合、要素の action はその要素の formaction 属性値である。すなわち action がそのような属性を持つ場合、そのフォーム所有者の action 属性値であり、そうでなければ空文字列である。
type属性が image、submit でのみ有効。
フォーム送信に使用する変形。列挙属性。
type属性が image、submit でのみ有効。
get
| 状態 GET に対応し、HTTP GETメソッドを示す。 |
|---|---|
post
| 状態 POST に対応し、HTTP POSTメソッドを示す。 |
dialog
| 状態 dialog に対応し、もしあれば、送信する FORM が、フォームが自身を発見する DIALOG を閉じ、そうでなければ送信しないことを意図することを示す。 |
formmethod 属性の不正値のデフォルトは、GET 状態である。これは欠損値のデフォルトをもたない。
フォーム送信のためのフォーム コントロール検証を回避する。真偽属性。
存在する場合、フォームが送信時に検証されないことを示す。
要素が送信ボタンでありかつ要素の formnovalidate 属性が存在する場合、または要素のフォーム所有者の novalidate 属性が存在する場合、要素の no-validate state は true である。そうでなければ false である。
type属性が image、submit でのみ有効。
属性がフォームでデータを完全に入力していないにもかかわらず、ユーザーが自分の進捗状況を保存できるように、この属性は検証の制約を持つフォーム上のボタン "保存" を含めると便利である。次の例は、2 つの必須フィールドを持つ単純なフォームを示す。3 つのボタンがある。1 つは、両方のフィールドに値が入力されている必要があるフォームを提出するためのもの、1 つはユーザーが戻ってきて、後で埋めることができるようにフォームを保存するためのもの、1 つは完全にフォームをキャンセルするためのものである。
<FORM action="editor.cgi" method="post"> <P><LABEL>Name: <INPUT required name=fn></LABEL></P> <P><LABEL>Essay: <TEXTAREA required name=essay></TEXTAREA></LABEL></P> <P><INPUT type=submit name=submit value="Submit essay"></P> <P><INPUT type=submit formnovalidate name=save value="Save essay"></P> <P><INPUT type=submit formnovalidate name=cancel value="Cancel"></P> </FORM>
フォーム送信に対するブラウジング コンテキスト。
妥当なコンテンツ名またはキーワードである値を持たなければならない。
type属性が image、submit でのみ有効。
縦の方向の寸法。
type属性が image でのみ有効。
すべての要素で有効なグローバル属性。この要素やその内容を編集する際に使用される仮想キーボード設定の種類をブラウザーに示すヒントを提供します。値としては none、text、tel、url、email、numeric、decimal、search があります。
オートコンプリート オプションのリスト。
ユーザーに提案済みオプションの一覧を示す要素を識別するために使用される。
存在する場合、その値は同じツリーでDATALIST要素の ID でなければならない。
type属性が text、search、url、tel、email、date、month、week、time、datetime-local、number、range、color で有効。
このテキストフィールドでは、JavaScript 関数のタイプを選択できます。
<INPUT type="text" list="function-types"> <DATALIST id="function-types"> <OPTION value="function">function</OPTION> <OPTION value="async function">async function</OPTION> <OPTION value="function*">generator function</OPTION> <OPTION value="=>">arrow function</OPTION> <OPTION value="async =>">async arrow function</OPTION> <OPTION value="async function*">async generator function</OPTION> </DATALIST>
<INPUT type=search list=IdlistDatalist> <DATALIST id=IdlistDatalist> <OPTION>mdn <OPTION>google <OPTION>楽天 </DATALIST>
<INPUT type=search list=Idlist2Datalist> <DATALIST id=Idlist2Datalist> <OPTION value="mdn"> <OPTION value="google"> <OPTION value="楽天"> </DATALIST>
最大値。
要素に対して許可された範囲を示す。
次の日付コントロールは 1980 年代以前の日付への入力を制限する：
<INPUT name=bday type=date max="1979-12-31">
<INPUT type=number max=10 value=5><BR> <INPUT type=date max="1979-12-31"><BR>
value 属性値の最大長さ。
次の抜粋は、簡潔であるようなこのメディアを通した任意の会話を強制してインテリジェントな談話に反対するような、メッセージング クライアントのテキスト入力が任意に固定文字数に制限できる方法を示す。
<LABEL>What are you doing? <INPUT name=status maxlength=140></LABEL>
<INPUT type=text maxlength=10 value="abc"><BR>
要素に対して許可された範囲（最小値）を示す。
真夜中にデフォルト設定、21 時と6 時の間に発生した分への時間管理限界入力：
<INPUT name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00">
<INPUT type=number min=3><BR>
value 属性値の最小長さ。
以下のCSSが組み込んであります：
<INPUT class=Test type=text minlength=3><BR>
ユーザーに複数の値を指定することを許可するかどうかを示す。真偽属性。
以下の抜粋は、電子メール クライアントの "To" フィールドが複数の電子メール アドレスを受け入れることができる方法を示す。
<LABEL>To: <INPUT type=email multiple name=to></LABEL>
以下のCSSが組み込んであります：
<INPUT class=Test type=email multiple value="test@hotmail.com,test@hotmail.com"><BR>
<INPUT class=Test type=email value="test@hotmail.com,test@hotmail.com"><BR>
フォーム送信および form.elements API で使用する要素の名前。
フォームの送信や FORM 要素の elements オブジェクトで使用されるような、フォーム制御の名前を与える。属性が指定される場合、その値は空の文字列またはで isindex あってはならない。
isindex 以外で、name に対して任意の空でない値が許可される。ASCII 大文字・小文字不区別で一致する名前 _charset_ は特別である： value 属性のない Hidden コントロールの名前として使用される場合、送信の間 value 属性は送信文字エンコーディングから成る送信の間の値を自動的に与えられる。
<FORM action="○○.cgi" method=post name=NformForm target=Test> <INPUT type=text name=Animal value="猫"><BR> <BUTTON type=submit>送信</BUTTON type=submit><BR> </FORM>¶フォーム送信すると、サーバーCGIではデータ「name=猫」を受け取る？
フォーム制御の値でマッチするパターン。
コントロールの値すなわち、multiple 属性が適用されて設定される場合、コントロールの値がチェックされる対象となる正規表現を指定する。
これは RegExp 型で使用される有効な JavaScript の正規表現でなければならず、これは正規表現のガイドで説明されている通りです。正規表現をコンパイルする際には 'u' フラグが指定され、パターンが ASCII ではなく Unicode コードポイントのシーケンスとして扱われます。パターンのテキストの周囲にスラッシュを指定しないでください。
たとえば、次の断片で：
<LABEL> Part number:
<INPUT pattern="[0-9][A-Z]{3}" name="part"
title="A part number is a digit followed by three uppercase letters."/>
</LABEL>
以下のCSSが組み込んであります：
<INPUT class=Test type=text pattern="[0-9]"><BR>
<INPUT class=Test type=text pattern="[0-9]{5}"><BR>
<INPUT class=Test type=text pattern="[0-9]{2,5}"><BR>
フォーム コントロール内に配置されるユーザー可視ラベル。
データ入力を伴うユーザーの支援を意図する短いヒント（単語や短いフレーズ）を表す。ヒントは、サンプル値または期待された形式の簡単な説明かもしれない。指定される場合、属性は、U+000A LINE FEED（LF）または U+000D CARRIAGE RETURN（CR）文字を含まない値を持たなければならない。
placeholder 属性は、LABEL 要素の代替として使用すべきでない。より長いヒントまたは他の助言テキストの場合、title 属性がより適切である。
ここで placeholder 属性を使用するメール設定のユーザー インターフェイスの例は次のとおり：
<FIELDSET> <LEGEND>Mail Account</LEGEND> <P><LABEL>Name: <INPUT type="text" name="fullname" placeholder="John Ratzenberger"></LABEL></P> <P><LABEL>Address: <INPUT type="email" name="address" placeholder="john@example.net"></LABEL></P> <P><LABEL>Password: <INPUT type="password" name="password"></LABEL></P> <P><LABEL>Description: <INPUT type="text" name="desc" placeholder="My Email Account"></LABEL></P> </FIELDSET>
以下のCSSが組み込んであります：
<INPUT class=Test2 type=text placeholder="初期入力"><BR>
ユーザーによって編集される値を許可するかどうか。真偽属性。
指定される場合、要素は mutable でない。
<INPUT type=text readonly value="テスト"><BR>
コントロールがフォーム送信に要求されるかどうか。真偽属性。
以下のCSSが組み込んであります：
<INPUT class=Test3 type=text value="テスト"><BR> <INPUT class=Test3 type=text required value="テスト"><BR>
コントロールのサイズ。
ユーザー エージェントが要素の値を編集している間にユーザーが参照できるようにする、文字数を与える。
size 属性が指定される場合、0 より大きい妥当な負でない整数である値を持たなければならない。
<INPUT type=text size=10><BR> <INPUT type=text size=10 style="font-size:20px"><BR>
リソースのアドレス。
画像（ type 属性が imege ）は src 属性によって指定される。src 属性は存在しなければならず、画像リソースは潜在的にページ化もスクリプト化もされていない、任意でアニメーションである、非対話型を参照する潜在的にスペースで囲まれた妥当な空でない URLを含めなければならない。
<INPUT type=image src="../Sample/Picture.jpg"><BR>
フォーム制御の値でマッチする粒度。
許可される値を制限することによって、値または複数の値の期待される（そして必須の）粒度を示す。
step 属性が指定される場合、0より大きい数値に解析する、妥当な浮動小数点数である値を持たなければならない、または文字列 "any" と ASCII 大文字・小文字不区別で一致する値のいずれかを持たなければならない。
<INPUT type=number step=0.01><BR>
フォーム制御の種類キーワード。
要素のデータ型（および関連するコントロール）を制御する。この属性は列挙属性である。
次の表は、キーワードと属性の状態を示す。1 列目のキーワードは、キーワードと同じ行で 2 列目のセル内の状態に対応づける。
| キーワード | 状態 | データ型 | コントロール型 |
|---|---|---|---|
hidden
| 非表示 | 任意の文字列 | 該当なし→○ |
text
| テキスト | 改行なしのテキスト | テキスト制御→○ |
search
| Search | 改行なしのテキスト | 検索制御→○ |
tel
| Telephone | 改行なしのテキスト | テキスト制御→○ |
url
| URL | 絶対URL | テキスト制御→○ |
email
| 電子メールアドレス（のリスト） | テキスト制御→○ | |
password
| Password | 改行なしのテキスト（センシティブな情報） | データ入力を不明瞭にするテキス制御→○ |
date
| Date | タイムゾーンを伴わない日付（年、月、日） | 日付の制御→○ |
month
| Month | タイムゾーンを伴わない年と月から成る日付 | 月の制御→○ |
week
| Week | タイムゾーンを伴わない週番号と週数から成る日付 | 週の制御→○ |
time
| Time | タイムゾーンを伴わない時刻（時、分、秒、秒の小数） | 時刻の制御→○ |
datetime-local
| Local Date and Time | タイムゾーンを伴わない日付と時刻（年、月、日、時、分、秒、秒の小数） | 日付および時刻の制御→○ |
number
| Number | 数値 | テキスト制御またはスピナー制御→○ |
range
| Range | 正確な値が重要ではない追加のセマンティックを持つ数値 | スライダー コントロールまたは類似のもの→○ |
color
| Color | 8ビットの赤、緑、青色コンポーネントをもつRGB色 | カラー ピッカー→○ |
checkbox
| Checkbox | 定義済みリストからの0個以上の値の集合 | チェックボックス→○ |
radio
| Radio Button | 列挙値 | ラジオボタン→○ |
file
| File Upload | MIMEタイプをもつ0個以上のファイルと任意でファイル名 | ラベルとボタン→○ |
submit
| Submit Button | 選択された最後の値でなければならず、フォームの送信を開始する追加のセマンティックを持つ列挙値 | ボタン→○ |
image
| Image Button | 選択された最後の値でなければならず、フォームの送信を開始する追加のセマンティックを持つ、特定の画像のサイズを基準とする座標 | クリック可能な画像、またはボタンのいずれか→○ |
reset
| Reset Button | 該当なし | ボタン→○ |
button
| Button | 該当なし | ボタン→○ |
欠損値のデフォルトおよび不正値のデフォルトは Text 状態である。
hidden|
|
text|
|
search|
|
／Edge。ここに表示tel|
|
／Edge。ここに表示url|
|
／Edge。ここに表示email|
|
／Edge。ここに表示password|
|
／Edge。ここに表示date|
|
／Edge。ここに表示month|
|
／Edge。ここに表示week|
|
／Edge。ここに表示time|
|
／Edge。ここに表示datetime-local|
|
／Edge。ここに表示number|
|
／Edge。ここに表示range|
|
／Edge。color|
|
／Edge。ここに表示checkbox|
|
／Edge。ここに表示radio|
|
／Edge。ここに表示file|
|
／Edge。ここに表示submit|
|
／Edge。ここに表示image|
|
reset|
|
／Edge。ここに表示button|
|
／Edge。ここに表示フォーム コントロールの値。
INPUT 要素のデフォルトの値を示す。
<INPUT type=text value="テスト"><BR> <INPUT type=number value="10.5"><BR>
<FORM action="○○.cgi" method=post target=Test> <INPUT type=text name=Nname value="テスト"><BR> <INPUT type=number name=Memori value="10.5"><BR> <BUTTON>送信</BUTTON> </FORM>¶サーバーCGIには、データ「Nname=テスト;Memori=10.5」が送られる？
横の方向の寸法
<INPUT type=text width=200><BR> <INPUT type=text width=200 style="font-size:20px"><BR> <INPUT type=image width=100 src="../Sample/Picture.jpg"><BR>¶image型用のようだ。
| 表示内容： |
| 表示内容： |