| 文書型 | 適用 | 子要素 | 開始タグ | 終了タグ | 分類 |
|---|---|---|---|---|---|
| Strict | ○ | 空要素 | 必須 | 禁止 | インライン要素 |
| Transitional | ○ | ||||
| Frameset | ○ |
type="radio"かtype="checkbox"であれば、同じフォーム内で名前を共有することができます。フォームを送信するときには、部品の名前と値がセットで送信されます。type="text" type="password" のときtype="button" type="submit" type="reset" のときtype="file" のときtype="checkbox" type="radio" のときtype="hidden" のときtype="checkbox"かtype="radio"のときには、必ず指定する必要があります。
type="text" type="password" のときtype="text"かtype="password"のときに、入力可能な最大文字数を指定します。type="checkbox"かtype="radio"のときに、初期状態で選択されているようにします。type="image"のときに、画像のURIを指定します。type="image"のときに、画像の代わりに表示する文字列を指定します。type="image"を指定しクライアント側・イメージマップを使うときに、対象となるmap要素のname属性の値を「#ID」の形式で指定します。URIの形式を取るので「#」が必要です。type="image"を指定しサーバ側・イメージマップを使うときに指定します。tabindex="0"を指定した要素やtabindex属性を持たない要素は、tabindex属性の値が最も大きい要素にフォーカスが移動した後、順番に選択されます。type="file"のときに、プログラムが処理できるMIMEタイプをカンマで区切って指定します。例えば、利用者に画像を送信してもらうときには「accept="image/png,image/jpeg,image/gif"」と指定します。利用者が指定された形式以外のファイルを送信しようとしたときに、ブラウザが警告を出すといった動作が期待されます。form { text-align: left; }form { text-align: center; }form { text-align: right; }form { text-align: justify; }フォームの部品となる要素です。テキストボックス、ボタン、チェックボックスなど様々な部品になります。どの種類になるかはtype属性で指定します。
<p>
名前：<input type="text" name="name"><br>
パスワード：<input type="password" name="passwd"><br>
画像：<input type="file" name="image_file"><br>
趣味：
<input type="checkbox" name="hobby" value="car">車
<input type="checkbox" name="hobby" value="music">音楽
<input type="checkbox" name="hobby" value="computer">コンピュータ<br>
性別：
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女<br>
<input type="button" name="btn" value="ボタン">
<input type="submit" value="送信">
<input type="reset" value="リセット">
<input type="hidden" name="datatype" value="profile">
</p>
名前：
パスワード：
画像：
趣味：
車
音楽
コンピュータ
性別：
男
女
Internet Explorerだと上のサンプルフォームの表示が多少おかしくなりますが、深く気にしないでください。
type属性には次の値が指定できます。
enctype="multipart/form-data"」とする必要があります。checkedを指定しておくと、初期状態で選択された状態になります。一つのフォームの中で複数のチェックボックスのname属性に同じ値を指定することができます。複数ある中から好きなだけ選べる選択肢を設けるときに使います。checkedを指定しておくと、初期状態で選択された状態になります。ボタンの場合はvalue属性の値がラベルになりますが、そのほかの場合はlabel要素でラベルと部品を関連付けたほうがよいです。対応ブラウザであれば、ラベルをクリックするとテキストボックスにフォーカスが移ったり、チェックボックスが選択されるようになります。小さなラジオボタンなどにマウスポインタを重ねなくてもよくなるので、使いやすさが向上します。
<p>
<label>名前：<input type="text" name="name"></label><br>
<label>パスワード：<input type="password" name="passwd"></label><br>
<label>画像：<input type="file" name="image_file"></label><br>
趣味：
<label><input type="checkbox" name="hobby" value="car">車</label>
<label><input type="checkbox" name="hobby" value="music">音楽</label>
<label><input type="checkbox" name="hobby" value="computer">コンピュータ</label><br>
性別：
<label><input type="radio" name="sex" value="male" checked>男</label>
<label><input type="radio" name="sex" value="female">女</label><br>
<input type="button" name="btn" value="ボタン">
<input type="submit" value="送信">
<input type="reset" value="リセット">
<input type="hidden" name="datatype" value="profile">
</p>accesskey属性やtabindex属性でアクセスキーやタブインデックスを設定することができます。アクセスキーはブラウザの機能とバッティングしてしまわないよう注意が必要です。(例えばアクセスキーに「f」を使うと、IEなどでAlt+Fを押してもメニューが開かなくなるなどの問題があります。)また、タブインデックスも適切に指定しないと利用者が混乱する虞があるので気をつけましょう。
<p>
<label>名前(N)：<input type="text" name="name"
accesskey="n" tabindex="1"></label><br>
<label>パスワード(P)：<input type="password" name="passwd"
accesskey="p" tabindex="2"></label><br>
<label>画像(I)：<input type="file" name="image_file"
accesskey="i" tabindex="3"></label><br>
趣味：
<label><input type="checkbox" name="hobby" value="car"
accesskey="x" tabindex="4">車(X)</label>
<label><input type="checkbox" name="hobby" value="music"
accesskey="y" tabindex="5">音楽(Y)</label>
<label><input type="checkbox" name="hobby" value="computer"
accesskey="z" tabindex="6">コンピュータ(Z)</label><br>
性別：
<label><input type="radio" name="sex" value="male" checked
accesskey="m" tabindex="7">男(M)</label>
<label><input type="radio" name="sex" value="female"
accesskey="f" tabindex="8">女(F)</label><br>
<input type="button" name="btn" value="ボタン(B)"
accesskey="b" tabindex="9">
<input type="submit" value="送信(S)"
accesskey="s" tabindex="10">
<input type="reset" value="リセット(R)"
accesskey="r" tabindex="11">
<input type="hidden" name="datatype" value="profile">
</p>タブインデックスを指定すると、意図しない部品にフォーカスが移って利用者が混乱する可能性があるので、個人的にはタブインデックスは積極的に指定する必要はないと考えています。
<!ENTITY % InputType
"(TEXT | PASSWORD | CHECKBOX |
RADIO | SUBMIT | RESET |
FILE | HIDDEN | IMAGE | BUTTON)"
>
<!-- attribute name required for all but submit and reset -->
<!ELEMENT INPUT - O EMPTY -- form control -->
<!ATTLIST INPUT
%attrs; -- %coreattrs, %i18n, %events --
type %InputType; TEXT -- what kind of widget is needed --
name CDATA #IMPLIED -- submit as part of form --
value CDATA #IMPLIED -- Specify for radio buttons and checkboxes --
checked (checked) #IMPLIED -- for radio buttons and check boxes --
disabled (disabled) #IMPLIED -- unavailable in this context --
readonly (readonly) #IMPLIED -- for text and passwd --
size CDATA #IMPLIED -- specific to each type of field --
maxlength NUMBER #IMPLIED -- max chars for text fields --
src %URI; #IMPLIED -- for fields with images --
alt CDATA #IMPLIED -- short description --
usemap %URI; #IMPLIED -- use client-side image map --
ismap (ismap) #IMPLIED -- use server-side image map --
tabindex NUMBER #IMPLIED -- position in tabbing order --
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script; #IMPLIED -- the element got the focus --
onblur %Script; #IMPLIED -- the element lost the focus --
onselect %Script; #IMPLIED -- some text was selected --
onchange %Script; #IMPLIED -- the element value was changed --
accept %ContentTypes; #IMPLIED -- list of MIME types for file upload --
>