中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

INPUT

INPUT要素は、FORM要素で転送するデータを 『 type属性 』 により指定された方法で入力する、フォームコントロール部品要素。

• 空要素です。

W3C → XHTML 1.0 → Multi-part XHTML file → DTDs → XHTML-1.0-Strict より

<!ELEMENT input EMPTY>     <!-- form control -->
<!ATTLIST input
  %attrs;
  %focus;;
  type        %InputType;    "text"
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED
  checked     (checked)      #IMPLIED
  disabled    (disabled)     #IMPLIED
  readonly    (readonly)     #IMPLIED
  size        CDATA          #IMPLIED
  maxlength   %Number;       #IMPLIED
  src         %URI;          #IMPLIED
  alt         CDATA          #IMPLIED
  usemap      %URI;          #IMPLIED
  onselect    %Script;       #IMPLIED
  onchange    %Script;       #IMPLIED
  accept      %ContentTypes; #IMPLIED  >

type        %InputType;    "text"
<!ENTITY % InputType
  "(text | password | checkbox |
    radio | submit | reset |
    file | hidden | image | button))"   >

入力形式を指定します。省略時は TEXT になります。

text - テキスト入力

password - パスワード入力

checkbox - チェックボックス

radio - ラジオボタン

submit - CGIの起動

reset - リセット

file - ファイル名入力

hidden - 隠し属性

image - 画像送信ボタン

button - 押しボタン

name CDATA #IMPLIED

FORM要素を使用してサーバーにデータを送信する場合、データの項目になる名前を記述します。省略可。

• 同じページ内にname属性値は重複出来ません。
• id属性値と違ってもかまいません。

value CDATA #IMPLIED

データの初期値。FORM要素を使用してサーバにデータを送信する場合、項目のデータになる内容を記述します。

W3C - Web Content Accessibility Guidelines 1.0 → Guideline 10. Use interim solutions. → 10.4 より

10.4 Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas.[Priority 3]
　　　For example, in HTML, do this for TEXTAREA and INPUT.

10.4 ＵＡ（ブラウザだけとは限りません）が、空の文字入力エリアを正確に扱える様になるまで、初期値を記述します。[優先度 3]
　　　例えば、HTMLの場合、TEXTAREA要素とINPUT要素が相当します。

checked (checked) #IMPLIED

type属性値が radio/checkbox で使用し、該当要素の初期値を ON にします。

type属性値が radio の場合は、選択肢の１つに指定が必要です。

disabled (disabled) #IMPLIED

該当要素を無効にします。省略可。

HTML記述

<p>
<input type="button" value="無効ボタン" disabled="disabled" />
</p>

表示例

readonly (readonly) #IMPLIED

type属性値が text/password で使用し、該当要素の変更を禁止します。省略可。

HTML記述

<p>
<input type="text" accesskey="z" tabindex="10" value="readonly" />
</p>

表示例

size CDATA #IMPLIED

表示幅。type属性値が text/password の場合に、入力文字数を記述します。省略可。

文字数での表示巾の解釈は、使用しているブラウザにより違います。特にパスワード入力の指定は、注意が必要です。

このページのパスワード入力説明部の IE での表示と Mozilla Firfox の表示です。同じ文字数の入力ですが、表示領域はまったく違います。

maxlength %Number; #IMPLIED

type属性値が text/password の場合に最大入力文字数を記述します。省略可。

src %URI; #IMPLIED

alt CDATA #IMPLIED

type属性値が image の場合は、省略不可。画像の存在するURIと画像の説明を記述します。

usemap %URI; #IMPLIED

MAP要素と組んで使用する場合に、MAP要素のname属性と関連付けます。

onselect %Script; #IMPLIED

type属性値が text の場合で、要素の内容のテキストが選択された時に開始するスクリプト名を記述します。省略可。

type属性値 text の使用例では、入力エリアが選択された場合に初期値を消去するスクリプトを使用しています。

onchange %Script; #IMPLIED

type属性値が text の場合で、要素の選択が外れた時に、要素の内容のテキストが選択された時と比べて変化していた場合に開始するスクリプト名を記述します。省略可。

accept %ContentTypes; #IMPLIED

type属性値が file の場合に処理するMIMEタイプを記述します。省略可。