* input 要素型 (HTML, XHTML 1)

[9] [[HTML]] の [DFN[[CODE(HTMLe)[input]] 要素型]]の要素は、
[[フォーム]]の[[制御子]]を定義します。具体的な制御子の種類は、
[CODE(HTMLa)[[[type]]]] 属性によって決まります。

[10]
仕様書:
- [[HTML 4]] ([[Web Forms 1.0]])
-- 17.4 The [CODE(HTMLe)[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]]

[11]
:[[開始タグ]]:必須
:[[終了タグ]] (HTML 4):禁止
:終了タグ (XHTML 1):必須
:出現できる文脈:[CODE(SGML)[%[[inline]]]] な文脈
:[[内容模型]]:空 ([[強制空要素]])
:[[属性]]:
,属性名,属性値,既定値,説明,出典
,[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(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)[[[disabled]]]],(真偽値属性),(偽),無効,[HTML 4]
,[CODE(HTMLa)[[[dynsrc]]]],[CODE(SGML)[%[[URI]]]],,動画資源,[[WinIE 4]]+
,[CODE(HTMLa)[[[height]]]],,,高さ,[[NN2]]+
,[CODE(HTMLa)[[[id]]]]      ,,,一意識別子   ,[HTML 4] %coreattrs
,[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)[[[lowsrc]]]],[CODE(SGML)[%[[URI]]]],(なし),低解像度資源,[[WinIE 4]]+
,[CODE(HTMLa)[[[maxlength]]]],[CODE(SGML)[[[NUMBER]]]],,最大長,[HTML 4]
,[CODE(HTMLa)[[[name]]]],,,制御子名,[HTML 4]
,[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)[[[onselect]]]],[CODE(SGML)[%[[Script]]]],,文選択時,[HTML 4]
,[CODE(HTMLa)[[[readonly]]]],(真偽値属性),(偽),読取専用,[HTML 4]
,[CODE(HTMLa)[[[size]]]],,,寸法,[HTML 4]
,[CODE(HTMLa)[[[src]]]],[CODE(SGML)[%[[URI]]]],,埋込み資源,[HTML 4]
,[CODE(HTMLa)[[[style]]]]   ,,,スタイル情報 ,[HTML 4] %coreattrs
,[CODE(HTMLa)[[[tabindex]]]],[CODE(SGML)[[[NUMBER]]]],,タブ順,[HTML 4]
,[CODE(HTMLa)[[[title]]]]   ,,,注釈的題     ,[HTML 4] %coreattrs
,[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)[[[width]]]],,,幅,[[NN2]]+

実際に使用できる属性は、 [CODE(HTMLa)[[[type]]]] 属性の値により異なります。

[[#comment]]

** 制御子

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

,[CODE(HTMLa)[type]] 属性値,制御子の種類,出典
,[CODE(HTML)[[[button]]]],押しボタン制御子,[HTML 4]
,[CODE(HTML)[[[checkbox]]]],チェック箱制御子,[HTML 4]
,[CODE(HTML)[[[file]]]],ファイル選択制御子,[HTML 4]
,[CODE(HTML)[[[hidden]]]],隠れ制御子,[HTML 4]
,[CODE(HTML)[[[image]]]],図形的提出ボタン制御子,[HTML 4]
,[CODE(HTML)[[[password]]]],単一行文章入力制御子 (入力結果非表示),[HTML 4]
,[CODE(HTML)[[[radio]]]],ラジオ・ボタン制御子,[HTML 4]
,[CODE(HTML)[[[reset]]]],再設定ボタン制御子,[HTML 4]
,[CODE(HTML)[[[submit]]]],提出ボタン制御子,[HTML 4]
,[CODE(HTML)[[[text]]]],単一行文章入力制御子,[HTML 4]
,[CODE(HTML)[[[textarea]]]],複数行文章入力制御子,[WebTV]

[[#comment]]

** 出現できる文脈

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

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

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

[[#comment]]

** 歴史

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

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

[[#comment]]

** 例

[2] 利用者登録画面の例 [SRC[HTML 4 17.4.2, 17.9.1]]
[PRE(HTML)[
 <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>
]PRE]

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

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

[3] ファイル送信の例 [SRC[HTML 4 17.4.2]]
[PRE(HTML)[
<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>
]PRE]

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

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

[[#comment]]

** メモ

[[#comment]]

* メモ