input

input 要素 (HTML)

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

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

属性

[11]

属性名属性値既定値説明出典
accept%ContentTypes受入れ媒体型[HTML 4]
accesskey%Character[HTML 4]
align配置[HTML 4] 非推奨
alt%Text代替文[HTML 4]
autocompleteon | off自動補完WinIE 5+, Web Forms 2.0
xforms:bindW3C 勧告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]
maxlengthNUMBER最大長[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 WDhtml-bidi
tabindexNUMBERタブ順[HTML 4]
title注釈的題[HTML 4] %coreattrs
tooltipTexttooltip非標準
type%InputTypetext制御子の種類[HTML 4]
usemap%URIクライアント側画像写像[HTML 4]
value初期値[HTML 4]
vcard_name自動補完WinIE 5+
volume非標準[Vodafone]
viblength非標準[Vodafone]
vibration非標準[Vodafone]
widthNN2+

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

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

[47] 廃止非標準属性:

[10] 仕様書:

制御子

[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]
monthWHATWG WD[WF2]
number数値WHATWG WD[WF2]
password単一行文章入力制御子 (入力結果非表示)[HTML 4]
quote自動補完非標準iモード 7.0
radioラジオ・ボタン制御子[HTML 4]
range数値WHATWG WD[WF2]
reset再設定ボタン制御子[HTML 4]
slider非標準 → rangeDojo
submit提出ボタン制御子[HTML 4]
text単一行文章入力制御子[HTML 4]
textarea複数行文章入力制御子[WebTV]
time時刻WHATWG WD[WF2]
urlIRIWHATWG WD[WF2]
weekWHATWG WD[WF2]

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

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

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

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

出現できる文脈

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

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

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

レンダリング

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

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

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

歴史

[7] WWW-Talk 1992: ISINDEX on documents http://www.webhistory.org/www.lists/www-talk.1992/0291.html

多分最初の input 要素の提案。 isindex 要素の汎用版として。この時は TimBL がちょっとなぁって感じで HTML 仕様には入っていない。

[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 で符号化したフォーム・データ (名前とファイル) が送信されます。

メモ

[18] 葉っぱ日記 - で、ここからが本題 (2007-04-15 17:52:27 +09:00 版) http://d.hatena.ne.jp/hasegawayosuke/20070313/p2 (名無しさん)

[19] 「IE7 でフォームに値を入れて印刷プレビューすると……」@水無月ばけらのえび日記 (2007-04-15 09:06:56 +09:00 版) http://bakera.jp/hatomaru.aspx/ebi/topic/2851 (名無しさん)

[20] 葉っぱ日記 - 対策遅らせるHTMLエンコーディングの「神話」:ITpro (2007-04-15 17:52:27 +09:00 版) http://d.hatena.ne.jp/hasegawayosuke/20070411/p1 (名無しさん)

[22] + JavaScript pXbh vol.66 + http://pc11.2ch.net/test/read.cgi/hp/1216867850/676

type 属性を password から text に変更することは、 WinIE ではできないらしい。

[23] MAMA: Forms - Opera Developer Community ( 版) http://dev.opera.com/articles/view/mama-forms/#input

[24] >>23 によると type属性値file よりも textboxinput の方が多い。 そいつらよりも search の方がもっと多い。

type 属性

[25] HTMLinput 要素の type 属性は、作成する制御子の型を指定します。

[26] 仕様書:

実装

[41] w3m は、未知の値を text とみなすのではなく、 未対応のフォーム制御子として扱っていたようです。

メモ

[27] Re: Web forms 2, input type suggestions (Ian Hickson <ian@...> 著, 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/16821

[28] XForms 1.1 ( 版) http://www.w3.org/TR/2009/REC-xforms-20091020/#ui-binding-foreign

[29] HTML Speech Input Element ( 版) http://docs.google.com/Doc?docid=0AaYxrITemjbxZGNmZzc5cHpfM2Ryajc5Zmhx&hl=en

[30] [whatwg] RFC: <input type="username"> ( 版) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-August/027532.html

[31] [whatwg] input type="location" proposals ( 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-August/027780.html

[32] [whatwg] input type="location" proposals ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-November/029036.html

[33] [whatwg] Please consider adding a couple more datetime <input> types - type="year" and type="month-day" ( 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-December/029365.html

[34] [whatwg] input type=barcode? ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035679.html

[35] [whatwg] Form input element for value-unit pairs ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035639.html

[36] [whatwg] More forms-related feedback ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035715.html

[37] WWW-Talk Apr-Jun 1993: Re: Standardizing new HTML features ( ( 版)) http://1997.webhistory.org/www.lists/www-talk.1993q2/0188.html

[38] ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic ( ( 版)) https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L445

[39] WWW-Talk Oct-Dec 1993: proposal for INPUT TYPE=options ( ( 版)) http://1997.webhistory.org/www.lists/www-talk.1993q4/0143.html

[40] ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic ( ( 版)) https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L700

[42] Web Applications 1.0 r8700 Match reality with respect to changing <input type> to a radio button ( ( 版)) http://html5.org/r/8700

[43] ISINDEX on documents ( ( 版)) http://lists.w3.org/Archives/Public/www-talk/1992NovDec/0042.html

[1] 28137 – Currency form input types ( 版) https://www.w3.org/Bugs/Public/show_bug.cgi?id=28137

[6] Clear internal value when <input> changes to type="file" state · whatwg/html@a55d6e6 ( 版) https://github.com/whatwg/html/commit/a55d6e6b5e78c62fa8b3a78e818f8b2323536f8f

[8] unicode-bidi:plaintext also applies to input elements · whatwg/html@3768403 ( 版) https://github.com/whatwg/html/commit/3768403b884fe46ea33daff80d90a5679a8aff92

[44] 25742 – forms: new <input> type for MM-DD data (06/2012) ( 版) https://www.w3.org/Bugs/Public/show_bug.cgi?id=25742

[45] Remove the concept of CSS Bindings (annevk著, ) https://github.com/whatwg/html/commit/6c96beabfa41d6d28ab23633966b82c5cdb9fd94

[46] Align activation behavior with changes to DOM Standard (annevk著, ) https://github.com/whatwg/html/commit/7beb920ba2e1a71246b81d86005f223a0d7ac8ab

[48] Remove <keygen> (domenic著, ) https://github.com/whatwg/html/commit/5baa38720f6e83c94a50018c4565808ad548d69c

[49] Set dirty value flag for setRangeText() (annevk著, ) https://github.com/whatwg/html/commit/4c404a2349dd3dc7dc10783de1a9181d73f10f3d

[50] Clean up selection direction handling (domenic著, ) https://github.com/whatwg/html/commit/af9fa0ff11d07a341f6404d4578017d68fafc8c7

[51] 15114 – forms: new <input> type for YYYY / YYYY-MM / YYYY-MM-DD / YYYY-MM-DD hh:mm, at user's choice () https://www.w3.org/Bugs/Public/show_bug.cgi?id=15114

[52] 27414 – Activation of <input> when mutability or type is changed () https://www.w3.org/Bugs/Public/show_bug.cgi?id=27414

[53] Firefox は未だに日付や時刻の入力に対応していないのか。。。 Opera では10年前に既に実装されてる機能だぞ。やる気あるんかな??

[54] Refine the inputmode attribute, and expose it on contenteditable (dtapuska著, ) https://github.com/whatwg/html/commit/d430f275f4e253956a5965c8b90885d3ac4e90c1

[55] Move inputmode to not be dependent on forms · Issue #1897 · whatwg/html () https://github.com/whatwg/html/issues/1897

[56] Refine the inputmode attribute, exposing it on contenteditable. by dtapuska · Pull Request #3260 · whatwg/html () https://github.com/whatwg/html/pull/3260

[57] Add the autocapitalize attribute (rlanday著, ) https://github.com/whatwg/html/commit/f1f0af83e320f14a59dc4e552ee82aab7908f00c

[58] Add the autocapitalize attribute (rlanday著, ) https://github.com/whatwg/html/commit/f1f0af83e320f14a59dc4e552ee82aab7908f00c

[59] Fix form inheritance behavior for autocapitalize (rlanday著, ) https://github.com/whatwg/html/commit/b7c21b1b56d77215d3d85ae14a072c090dbe6266

[60] consistency in deferring to CORE / issue #120 (jasonkiss著, ) https://github.com/w3c/html-aam/commit/cdeacad8c1cfd7263830e02fca5a963b505fc0f5

[61] Should UIA mappings for text input types say "Use WAI-ARIA mapping"? · Issue #120 · w3c/html-aam () https://github.com/w3c/html-aam/issues/120

[62] Editorial: always state invalid value default (GloverDonovan著, ) https://github.com/whatwg/html/commit/7e941ae96b264d4743ea0afac00c3b3209ab0cde

[63] Queue a task to run all the autofocusing steps (domenic著, ) https://github.com/whatwg/html/commit/185190cac859144cfcd78248b906f3adae1f0594

[64] Clamp selection and text entry cursor position on value changes (domenic著, ) https://github.com/whatwg/html/commit/3d2719ab8d8f6efa06eef2475270b3ae0b01b8b0

[65] selectionStart/selectionEnd behavior needs to be specified · Issue #2424 · whatwg/html () https://github.com/whatwg/html/issues/2424

[66] Textarea/text input text cursor position is not updated by reset algorithm · Issue #3468 · whatwg/html () https://github.com/whatwg/html/issues/3468

[67] Fix selection/text entry cursor position processing for input/textarea by domenic · Pull Request #3472 · whatwg/html () https://github.com/whatwg/html/pull/3472

[68] Do not change input/textarea text selection for the same value by domenic · Pull Request #2437 · whatwg/html () https://github.com/whatwg/html/pull/2437

[69] Editorial: clarify some text selection/cursor concepts (domenic著, ) https://github.com/whatwg/html/commit/2e8be71869f7c1e67f2aecd31c7ea3eaeff22b54

[70] Should UIA mappings for text input types say "Use WAI-ARIA mapping"? · Issue #120 · w3c/html-aam () https://github.com/w3c/html-aam/issues/120

[71] Add the enterkeyhint="" attribute (dtapuska著, ) https://github.com/whatwg/html/commit/a5422d984d9b7b8a4e0ad7a0ad237b07f190cc93

[72] Add the enterkeyhint="" attribute (dtapuska著, ) https://github.com/whatwg/html/commit/a5422d984d9b7b8a4e0ad7a0ad237b07f190cc93

[73] Do not inherit text-transform (et al.) on form controls (jugglinmike著, ) https://github.com/whatwg/html/commit/b9997b7488a3b35515c30bb1627d361053cf2c2f

[74] Define what tabIndex returns when the tabindex attribute is not set (rakina著, ) https://github.com/whatwg/html/commit/15cf23a55d629e0b1286302c19634833a89292ab