* [CODE(HTMLe)@en[input]] 要素 (HTML) [9] [[HTML]] の [DFN[[CODE(HTMLe)@en[input]] [[要素]]]]は、 [[フォーム制御子]]を表します。 [[フォーム制御子]]には幾つかの種類があり、 [CODE(HTMLa)@en[[[type]]]] [[属性]]により決まります。 ;; [[HTML]] ([[Web Forms]]) の[[フォーム制御子]]には、 [CODE(HTMLe)@en[[[textarea]]]] や [CODE(HTMLe)@en[[[select]]]] など、他の[[要素]]を使うものもあります。 [11] :状態:[[W3C]] [[勧告]]、[[WHATWG]] [[WD]] :[[名前空間URI]]:[CODE(URI)@en[[[http://www.w3.org/1999/xhtml]]]] :[[局所名]]:[CODE(HTMLe)@en[[[input]]]] ([Q@en[[[input]]]] ([Q[[[入力]]]])) より :[[開始タグ]]:必須 :[[終了タグ]]:禁止 :文脈:[[厳密行内内容]]が認められる場所 (例外あり) :[[内容モデル]]:[[空]] :[[属性]]: ,属性名 ,属性値 ,既定値 ,説明 ,出典 ,[CODE(HTMLa)[[[accept]]]] ,[CODE(SGML)[%[[ContentTypes]]]] , ,受入れ媒体型 ,[HTML 4] ,[CODE(HTMLa)[[[accesskey]]]] ,[CODE(SGML)[%[[Character]]]] , , ,[HTML 4] ,[CODE(HTMLa)[[[align]]]] , , ,配置 ,[HTML 4] 非推奨 ,[CODE(HTMLa)[[[alt]]]] ,[CODE(SGML)[%[[Text]]]] , ,[[代替文]] ,[HTML 4] ,[CODE(HTMLa)[[[autocomplete]]]] ,[CODE(SGML)[[CODE(HTML)[[[on]]]] | [CODE(HTML)[[[off]]]]]] , ,自動補完 ,"[[WinIE 5]]+, [[Web Forms 2.0]]" ,[CODE(XMLa)@en[[QN[xforms:[[bind]]] [http://www.w3.org/2002/xforms]]]] , , , ,[[W3C]] [[勧告]] ,[[XForms 1.0]] ,[CODE(HTMLa)[[[border]]]] ,[CODE(SGML)[%[[Pixels]]]] , ,枠線 ,[[NN2]]+ ,[CODE(HTMLa)[[[checked]]]] ,([[真偽値属性]]) ,([[偽]]) ,初期状態 ,[HTML 4] ,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML 4] %[[coreattrs]] ,[CODE(HTMLa)[[[datafld]]]] , , ,データ欄 ,[HTML 4] 予約 ,[CODE(HTMLa)[[[dataformatas]]]] , , ,データ書式 ,[HTML 4] 予約 ,[CODE(HTMLa)[[[datasrc]]]] ,[CODE(SGML)[%[[URI]]]] ,(なし) ,データ源 ,[HTML 4] 予約 ,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,[HTML 4] %[[i18n]] ,[CODE(HTMLa)@en[[[directkey]]]] , , , ,非標準 → [CODE(HTMLa)@en[[[accesskey]]]] ,[Vodafone] ,[CODE(HTMLa)[[[disabled]]]] ,(真偽値属性) ,(偽) ,無効 ,[HTML 4] ,[CODE(HTMLa)[[[dynsrc]]]] ,[CODE(SGML)[%[[URI]]]] , ,動画資源 ,[[WinIE 4]]+ ,[CODE(HTMLa)[[[emptyok]]]] , , ,空入力可能 ,[au] ,[CODE(HTMLa)[[[format]]]] , , ,入力書式 ,[au] ,[CODE(HTMLa)[[[height]]]] , , ,高さ ,[[NN2]]+ ,[CODE(HTMLa)[[[id]]]] , , ,一意識別子 ,[HTML 4] %coreattrs ,[CODE(HTMLa)@en[[[iprof]]]] , , ,[[自動補完]]名 ,非標準 ,[[iモード]] 7.0 ,[CODE(HTMLa)[[[ismap]]]] ,(真偽値属性) ,(偽) ,鯖側画像写像 ,[HTML 4] ,[CODE(HTMLa)[[[istyle]]]] , , ,入力モード ,[[iモード]] 2.0 ,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML 4] %i18n ,[CODE(HTMLa)[[[xml]]:lang]] , , ,自然言語 ,[XHTML 1] ,[CODE(HTMLa)[[[language]]]] , , ,スクリプト言語 ,[[WinIE 4]]+ ,[CODE(HTMLa)@en[[[localsrc]]]] , , , ,非標準 ,[CODE(HTMLa)@en[[[loop]]]] , , , ,非標準 ,[Vodafone] ,[CODE(HTMLa)[[[lowsrc]]]] ,[CODE(SGML)[%[[URI]]]] ,(なし) ,低解像度資源 ,[[WinIE 4]]+ ,[CODE(HTMLa)@en[[[max]]]] , , ,[[最大値]] ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTMLa)[[[maxlength]]]] ,[CODE(SGML)[[[NUMBER]]]] , ,最大長 ,[HTML 4] ,[CODE(HTMLa)@en[[[min]]]] , , ,[[最小値]] ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTMLa)@en[[[mode]]]] , , , ,非標準 ,[Vodafone] ,[CODE(HTMLa)[[[name]]]] , , ,制御子名 ,[HTML 4] ,[CODE(HTMLa)@en[[[nonumber]]]] , , , ,非標準 ,[Vodafone] ,[CODE(HTMLa)[[[onblur]]]] ,[CODE(SGML)[%[[Script]]]] , ,焦点を失した時 ,[HTML 4] ,[CODE(HTMLa)[[[onchange]]]] ,[CODE(SGML)[%[[Script]]]] , ,現在値変更時 ,[HTML 4] ,[CODE(HTMLa)[[[onclick]]]] , , , ,[HTML 4] %[[events]] ,[CODE(HTMLa)[[[ondblclick]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onfocus]]]] ,[CODE(SGML)[%[[Script]]]] , ,焦点を得た時 ,[HTML 4] ,[CODE(HTMLa)[[[onkeydown]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onkeypress]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onkeyup]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onmousedown]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onmousemove]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onmouseout]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onmouseover]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onmouseup]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)@en[[[onvaluechanged]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)[[[onselect]]]] ,[CODE(SGML)[%[[Script]]]] , ,文選択時 ,[HTML 4] ,[CODE(HTMLa)@en[[[pattern]]]] , , ,[[値]]の[[正規表現]] ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTMLa)[[[readonly]]]] ,(真偽値属性) ,(偽) ,読取専用 ,[HTML 4] ,[CODE(HTMLa)@en[[[required]]]] ,[[ブール値属性]] ,[[偽]] ,[[必須]] ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTMLa)@en[[[size]]]] , , ,[[寸法]] ,"[[W3C]] [[勧告]], [[WHATWG]] [[WD]] ([[非推奨]])" ,"[HTML 4], [WF2]" ,[CODE(HTMLa)@en[[[soundstart]]]] , , , ,非標準 ,[Vodafone] ,[CODE(HTMLa)@en[[[spellcheck]]]] , , , ,非標準 ,[[Firefox 2]] ,[CODE(HTMLa)[[[src]]]] ,[CODE(SGML)[%[[URI]]]] , ,埋込み資源 ,[HTML 4] ,[CODE(HTMLa)@en[[[step]]]] , , ,[[精度]] ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTMLa)[[[style]]]] , , ,スタイル情報 ,[HTML 4] %coreattrs ,[CODE(HTMLa)[[[tabindex]]]] ,[CODE(SGML)[[[NUMBER]]]] , ,タブ順 ,[HTML 4] ,[CODE(HTMLa)[[[title]]]] , , ,注釈的題 ,[HTML 4] %coreattrs ,[CODE(HTMLa)@en[[[tooltipText]]]],,,[[tooltip]],非標準 ,[CODE(HTMLa)[[[type]]]] ,[CODE(SGML)[%InputType]] ,[CODE(HTML)[[[text]]]] ,制御子の種類 ,[HTML 4] ,[CODE(HTMLa)[[[usemap]]]] ,[CODE(SGML)[%[[URI]]]] , ,クライアント側画像写像 ,[HTML 4] ,[CODE(HTMLa)[[[value]]]] , , ,初期値 ,[HTML 4] ,[CODE(HTMLa)[[[vcard_name]]]] , , ,自動補完 ,[[WinIE 5]]+ ,[CODE(HTMLa)@en[[[volume]]]] , , , ,非標準 ,[Vodafone] ,[CODE(HTMLa)@en[[[viblength]]]] , , , ,非標準 ,[Vodafone] ,[CODE(HTMLa)@en[[[vibration]]]] , , , ,非標準 ,[Vodafone] ,[CODE(HTMLa)[[[width]]]] , , ,幅 ,[[NN2]]+ 実際に使用できる属性は、 [CODE(HTMLa)[[[type]]]] 属性の値により異なります。 @@ [CODE(HTMLa)@en[[[type]]]] ごとの表 ([[Web Forms 2.0]] 附属書の表に非標準属性を追加したもの) を作る [10] 仕様書: - [[SI 4281]]:1998 -- [CSECTION[6.1.4 Elements with no directionality]] -- [CSECTION[8.3 Rendering the Form]] - [[HTML 4]] ([[Web Forms 1.0]]) -- 17.4 The [CODE(HTMLe)[INPUT]] element - [[device-upload]] -- ''Form-based Device Input and Upload in HTML'' - [[WebTV]] - [[Web Forms 2.0]] -- [CSECTION@en[2.4. Extensions to the [CODE(HTMLe)@en[[[input]]]] element]] -- [CSECTION@en[2.18. Handling unexpected elements and values]] ** 制御子 [12] [CODE(HTMLe)[input]] 要素は、 [CODE(HTMLa)[type]] 属性の値により、様々な[[制御子]]となります。 ,[CODE(HTMLa)@en[[[type]]]] [[属性値]] ,[[制御子]] ,状態 ,出典 ,[CODE(HTML)@en[[[add]]]] ,追加 ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTML)[[[button]]]] ,押しボタン制御子 ,[HTML 4] ,[CODE(HTML)[[[checkbox]]]] ,チェック箱制御子 ,[HTML 4] ,[CODE(HTML)@en[[[date]]]] ,[[日付]] ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTML)@en[[[datetime]]]] ,[[日時]] ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTML)@en[[[datetime-local]]]] ,[[日時]] ([[地方時]]) ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTML)[[[email]]]] ,[[電子メイル・アドレス]] ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTML)[[[file]]]] ,ファイル選択制御子 ,[HTML 4] ,[CODE(HTML)[[[hidden]]]] ,隠れ制御子 ,[HTML 4] ,[CODE(HTML)[[[image]]]] ,図形的提出ボタン制御子 ,[HTML 4] ,[CODE(HTML)[[[month]]]] ,[[月]] ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTML)@en[[[move-down]]]] ,下に移動 ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTML)@en[[[move-up]]]] ,上に移動 ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTML)[[[number]]]] ,[[数値]] ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTML)[[[password]]]] ,単一行文章入力制御子 (入力結果非表示) ,[HTML 4] ,[CODE(HTML)@en[[[quote]]]] ,[[自動補完]] ,非標準 ,[[iモード]] 7.0 ,[CODE(HTML)[[[radio]]]] ,ラジオ・ボタン制御子 ,[HTML 4] ,[CODE(HTML)[[[range]]]] ,[[数値]] ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTML)@en[[[remove]]]] ,削除 ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTML)[[[reset]]]] ,再設定ボタン制御子 ,[HTML 4] ,[CODE(HTML)@en[[[slider]]]] , ,非標準 → [CODE(HTML)@en[[[range]]]] ,[[Dojo]] ,[CODE(HTML)[[[submit]]]] ,提出ボタン制御子 ,[HTML 4] ,[CODE(HTML)[[[text]]]] ,単一行文章入力制御子 ,[HTML 4] ,[CODE(HTML)[[[textarea]]]] ,複数行文章入力制御子 ,[WebTV] ,[CODE(HTML)[[[time]]]] ,[[時刻]] ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTML)[[[url]]]] ,[[IRI]] ,[[WHATWG]] [[WD]] ,[WF2] ,[CODE(HTML)[[[week]]]] ,[[週]] ,[[WHATWG]] [[WD]] ,[WF2] [13] HTML 4 DTD の[[注釈]] (参考) には、 [CODE(HTMLa)@en[[[type]]]] は [Q[what kind of widget is needed]] を示すと説明があります。 [15] [[利用者エージェント]]は、単純に[[文章入力欄]]を表示するのではなく、 それぞれの型に特化した [[widget]] を提供することが[['''推奨''']]されています。 [SRC@en[WF2 2.4]] [16] [CODE(HTMLa)@en[[[type]]]] が[[動的]]に変更された場合、 [[利用者エージェント]]は新しい [CODE(HTMLa)@en[[[type]]]] に基づき[[既定値]] ([CODE(HTMLa)@en[[[value]]]] [[内容属性]]および [CODE(DOMa)@en[[[defaultValue]]]] [[DOM属性]]) と[[現在値]] ([CODE(DOMa)@en[[[value]]]] [[DOM属性]])、 [CODE(HTMLa)@en[[[min]]]]、[CODE(HTMLa)@en[[[max]]]]、 [CODE(HTMLa)@en[[[step]]]] を解釈しなおします。新しい [CODE(HTMLa)@en[[[type]]]] で不適当となった値は、読込み直後の初期状態の決定時と同じように誤り処理規則に従い処理[['''しなければなりません''']]。 [SRC@en[WF2 2.4, 2.4.1, 2.4.2]] [21] If you want do delete your site from our spam bases - just email us with domain of your site: abuse-here@inbox.ru thank you! ([[Alexneu]] [alexfm@gmail.com]) [[#comment]] ** 出現できる文脈 [4] HTML の版によって、 [CODE(HTMLe)[[[form]]]] 要素の子孫でなければならなかったり、 そうでなくても良かったりします。 古い版の HTML に従っている UA、例えば [[Classic Mozilla]] や [[w3m]] は [CODE(HTMLe)[form]] 外の [CODE(HTMLe)[input]] を扱えませんから、注意が必要です。 [5] 詳しくは、[[制御子]]の説明をご覧ください。 [[#comment]] ** レンダリング [17] '''フォーム制御子と内容''' [[利用者エージェント]]は、[[既定]]では、 [[フォーム制御子]]を[[レンダリング]][['''しなければなりません''']]。 [[内容]]が存在しても、[[レンダリング]][['''してはなりません''']]。 ただし、[[著者]]は [[CSS]] などによりこの動作を上書きできます。 [SRC@en[WF2 2.18]] [14] '''Bidi との関係''': [CODE(HTMLe)[[[input]]]] [[要素]]は、 [[bidi]] 的には方向性に関して[[中立]]な[[文字]]1[[文字]]であるかのように扱います。 方向について特に配慮が必要なら 前後に [CODE(char)[[[LRM]]]] や [CODE(char)[[[RLM]]]] を使えます。 [SRC[SI 4281 6.1.4]] [[#comment]] ** 歴史 [7] ''WWW-Talk 1992: ISINDEX on documents'' 多分最初の [CODE(HTMLe)[input]] 要素の提案。 [CODE(HTMLe)[[[isindex]]]] 要素の汎用版として。この時は [[TimBL]] がちょっとなぁって感じで HTML 仕様には入っていない。 [[#comment]] ** 例 [2] 利用者登録画面の例 [SRC[HTML 4 17.4.2, 17.9.1]] [PRE(HTML)[




Male
Female

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

What is your name? What files are you sending?

]PRE] この例では、単一行文章入力制御子で名前を記述させ、 ファイル選択制御子でファイルを選択させて提出することを求めています。 著者は提出ボタンを用意していませんが、 UA 依存の方法で (または [CODE(HTMLe)[form]] 外にある著者が用意したスクリプト等による提出ボタンで) 利用者が提出することを選ぶと、 HTTP [CODE(HTTP)[[[POST]]]] method により [CODE(MIME)[[[multipart/form-data]]]] で符号化したフォーム・データ (名前とファイル) が送信されます。 [[#comment]] ** メモ [18] [CITE[葉っぱ日記 - で、ここからが本題]] ([CODE[2007-04-15 17:52:27 +09:00]] 版) ([[名無しさん]]) [19] [CITE@ja[「IE7 でフォームに値を入れて印刷プレビューすると……」@水無月ばけらのえび日記]] ([CODE[2007-04-15 09:06:56 +09:00]] 版) ([[名無しさん]]) [20] [CITE[葉っぱ日記 - 対策遅らせるHTMLエンコーディングの「神話」:ITpro]] ([CODE[2007-04-15 17:52:27 +09:00]] 版) ([[名無しさん]]) [22] [CITE[+ JavaScript pXbh vol.66 +]] [CODE(DOMa)@en[[[type]]]] 属性を [CODE(HTML)@en[[[password]]]] から [CODE(HTML)@en[[[text]]]] に変更することは、 [[WinIE]] ではできないらしい。 [23] [CITE@en[MAMA: Forms - Opera Developer Community]] ([TIME[2008-12-08 23:05:19 +09:00]] 版) [24] >>23 によると [CODE(HTMLa)@en[[[type]]]] の[[属性値]]は [CODE(HTML)@en[[[file]]]] よりも [CODE(HTML)@en[[[textbox]]]] や [CODE(HTML)@en[[[input]]]] の方が多い。 そいつらよりも [CODE(HTMLa)@en[[[search]]]] の方がもっと多い。 * input 要素 type 属性 (HTML, XHTML 1) [25] [[HTML]] の [CODE(HTMLe)[[[input]]]] 要素の [DFN[[CODE(HTMLa)[type]] 属性]]は、作成する[[制御子]]の型を指定します。 [26] 仕様書: - [[HTML+]] 提案 -- ''Fill-out Forms and Input fields'' - [[HTML 4]] -- [CODE(HTMLe)[input]] 要素 [CODE(HTMLa)[type]] 属性 [27] [CITE[Re: Web forms 2, input type suggestions]] ([[Ian Hickson ]] 著, [TIME[2008-11-26 00:56:19 +09:00]] 版)