input 要素 (HTML)

[9] HTML の input 要素は、フォーム制御子を表します。フォーム制御子には幾つかの種類があり、 type 属性により決まります。

HTML (Web Forms) のフォーム制御子には、 textarea や select など、他の要素を使うものもあります。

属性

属性名	属性値	既定値	説明	出典
`accept`	`%ContentTypes`		受入れ媒体型	[HTML 4]
`accesskey`	`%Character`			[HTML 4]
`align`			配置	[HTML 4] 非推奨
`alt`	`%Text`		代替文	[HTML 4]
`autocomplete`	`on \| off`		自動補完	WinIE 5+, Web Forms 2.0
`xforms:bind`				W3C 勧告	XForms 1.0
`border`	`%Pixels`		枠線	NN2+
`checked`	(真偽値属性)	(偽)	初期状態	[HTML 4]
`class`			級	[HTML 4] %coreattrs
`datafld`			データ欄	[HTML 4] 予約
`dataformatas`			データ書式	[HTML 4] 予約
`datasrc`	`%URI`	(なし)	データ源	[HTML 4] 予約
`dir`			書字方向	[HTML 4] %i18n
`directkey`				非標準 → `accesskey`	[Vodafone]
`disabled`	(真偽値属性)	(偽)	無効	[HTML 4]
`dynsrc`	`%URI`		動画資源	WinIE 4+
`emptyok`			空入力可能	[au]
`format`			入力書式	[au]
`height`			高さ	NN2+
`id`			一意識別子	[HTML 4] %coreattrs
`iprof`			自動補完名	非標準	iモード 7.0
`ismap`	(真偽値属性)	(偽)	鯖側画像写像	[HTML 4]
`istyle`			入力モード	iモード 2.0
`lang`			自然言語	[HTML 4] %i18n
`xml:lang`			自然言語	[XHTML 1]
`language`			スクリプト言語	WinIE 4+
`localsrc`				非標準
`loop`				非標準	[Vodafone]
`lowsrc`	`%URI`	(なし)	低解像度資源	WinIE 4+
`max`			最大値	WHATWG WD	[WF2]
`maxlength`	`NUMBER`		最大長	[HTML 4]
`min`			最小値	WHATWG WD	[WF2]
`mode`				非標準	[Vodafone]
`name`			制御子名	[HTML 4]
`moznofilter`
`nonumber`				非標準	[Vodafone]
`onblur`	`%Script`		焦点を失した時	[HTML 4]
`onchange`	`%Script`		現在値変更時	[HTML 4]
`onclick`				[HTML 4] %events
`ondblclick`				[HTML 4] %events
`onfocus`	`%Script`		焦点を得た時	[HTML 4]
`onkeydown`				[HTML 4] %events
`onkeypress`				[HTML 4] %events
`onkeyup`				[HTML 4] %events
`onmousedown`				[HTML 4] %events
`onmousemove`				[HTML 4] %events
`onmouseout`				[HTML 4] %events
`onmouseover`				[HTML 4] %events
`onmouseup`				[HTML 4] %events
`onvaluechanged`				非標準	Dojo
`onselect`	`%Script`		文選択時	[HTML 4]
`pattern`			値の正規表現	WHATWG WD	[WF2]
`readonly`	(真偽値属性)	(偽)	読取専用	[HTML 4]
`required`	ブール値属性	偽	必須	WHATWG WD	[WF2]
`size`			寸法	W3C 勧告, WHATWG WD (非推奨)	[HTML 4], [WF2]
`soundstart`				非標準	[Vodafone]
`spellcheck`				非標準	Firefox 2
`src`	`%URI`		埋込み資源	[HTML 4]
`step`			精度	WHATWG WD	[WF2]
`style`			スタイル情報	[HTML 4] %coreattrs
`submit_dir`	方向性の提出の有無		(偽)	W3C WD	html-bidi
`tabindex`	`NUMBER`		タブ順	[HTML 4]
`title`			注釈的題	[HTML 4] %coreattrs
`tooltipText`			tooltip	非標準
`type`	`%InputType`	`text`	制御子の種類	[HTML 4]
`usemap`	`%URI`		クライアント側画像写像	[HTML 4]
`value`			初期値	[HTML 4]
`vcard_name`			自動補完	WinIE 5+
`volume`				非標準	[Vodafone]
`viblength`				非標準	[Vodafone]
`vibration`				非標準	[Vodafone]
`width`			幅	NN2+

実際に使用できる属性は、 type 属性の値により異なります。

type ごとの表 (Web Forms 2.0 附属書の表に非標準属性を追加したもの) を作る

[47] 廃止・非標準の属性:

autosave

[10] 仕様書:

SI 4281:1998 http://www.qsm.co.il/Hebrew/si4281e.htm
- 6.1.4 Elements with no directionality
- 8.3 Rendering the Form
HTML 4 (Web Forms 1.0)
- 17.4 The INPUT element IW:HTML4:"interact/forms.html#edef-INPUT"
device-upload
- Form-based Device Input and Upload in HTML http://www.w3.org/TR/device-upload
WebTV http://web.archive.org/web/20010425042729/http://developer.webtv.net/authoring/html/input.html#1065149
Web Forms 2.0
- 2.4. Extensions to the input element IW:WF2:"#extensions"
- 2.18. Handling unexpected elements and values IW:WF2:"#handling"

制御子

[12] input 要素は、 type 属性の値により、様々な制御子となります。

`type` 属性値	制御子	状態	出典
`button`	押しボタン制御子	[HTML 4]
`checkbox`	チェック箱制御子	[HTML 4]
`date`	日付	WHATWG WD	[WF2]
`datetime-local`	日時 (地方時)	WHATWG WD	[WF2]
`email`	電子メイル・アドレス	WHATWG WD	[WF2]
`file`	ファイル選択制御子	[HTML 4]
`hidden`	隠れ制御子	[HTML 4]
`image`	図形的提出ボタン制御子	[HTML 4]
`month`	月	WHATWG WD	[WF2]
`number`	数値	WHATWG WD	[WF2]
`password`	単一行文章入力制御子 (入力結果非表示)	[HTML 4]
`quote`	自動補完	非標準	iモード 7.0
`radio`	ラジオ・ボタン制御子	[HTML 4]
`range`	数値	WHATWG WD	[WF2]
`reset`	再設定ボタン制御子	[HTML 4]
`slider`		非標準 → `range`	Dojo
`submit`	提出ボタン制御子	[HTML 4]
`text`	単一行文章入力制御子	[HTML 4]
`textarea`	複数行文章入力制御子	[WebTV]
`time`	時刻	WHATWG WD	[WF2]
`url`	IRI	WHATWG WD	[WF2]
`week`	週	WHATWG WD	[WF2]

[21] 次の値は廃止されたか、非標準のものです。

[13] HTML 4 DTD の注釈 (参考) には、 type は what kind of widget is needed を示すと説明があります。

[15] 利用者エージェントは、単純に文章入力欄を表示するのではなく、それぞれの型に特化した widget を提供することが推奨されています。 WF2 2.4

[16] type が動的に変更された場合、利用者エージェントは新しい type に基づき既定値 (value 内容属性および defaultValue DOM属性) と現在値 (value DOM属性)、 min、max、 step を解釈しなおします。新しい type で不適当となった値は、読込み直後の初期状態の決定時と同じように誤り処理規則に従い処理しなければなりません。 WF2 2.4, 2.4.1, 2.4.2

出現できる文脈

[4] HTML の版によって、 form 要素の子孫でなければならなかったり、そうでなくても良かったりします。

古い版の HTML に従っている UA、例えば Classic Mozilla や w3m は form 外の input を扱えませんから、注意が必要です。

[5] 詳しくは、制御子の説明をご覧ください。

レンダリング

[17] フォーム制御子と内容

利用者エージェントは、既定では、フォーム制御子をレンダリング しなければなりません。内容が存在しても、レンダリング してはなりません。ただし、著者は CSS などによりこの動作を上書きできます。 WF2 2.18

[14] Bidi との関係: input 要素は、 bidi 的には方向性に関して中立な文字1文字であるかのように扱います。方向について特に配慮が必要なら前後に LRM や RLM を使えます。 SI 4281 6.1.4

歴史

フォーム

例

[2] 利用者登録画面の例 HTML 4 17.4.2, 17.9.1

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    <LABEL for="firstname">First name: </LABEL>
              <INPUT type="text" id="firstname"><BR>
    <LABEL for="lastname">Last name: </LABEL>
              <INPUT type="text" id="lastname"><BR>
    <LABEL for="email">email: </LABEL>
              <INPUT type="text" id="email"><BR>
    <INPUT type="radio" name="sex" value="Male"> Male<BR>
    <INPUT type="radio" name="sex" value="Female"> Female<BR>
    <INPUT type="submit" value="Send"> <INPUT type="reset">
    </P>
 </FORM>

この例では、名前と電子メイル・アドレスを単一行文章入力制御子で記述し、性別をラジオ・ボタン制御子で選択することを求めています。記入後、提出ボタンで送信したり、再設定ボタンで初期状態に戻したりできます。

レンダリング例: IW:HTML4:"images/form_exmpl.gif"

[3] ファイル送信の例 HTML 4 17.4.2

<FORM action="http://server.dom/cgi/handle"
    enctype="multipart/form-data"
    method="post">
 <P>
 What is your name? <INPUT type="text" name="name_of_sender">
 What files are you sending? <INPUT type="file" name="name_of_files">
 </P>
</FORM>

この例では、単一行文章入力制御子で名前を記述させ、ファイル選択制御子でファイルを選択させて提出することを求めています。

著者は提出ボタンを用意していませんが、 UA 依存の方法で (または form 外にある著者が用意したスクリプト等による提出ボタンで) 利用者が提出することを選ぶと、 HTTP POST method により multipart/form-data で符号化したフォーム・データ (名前とファイル) が送信されます。