input要素

概要

input要素はフォームのコントロールを表す要素の一つです。

要素の内容

input要素は空要素です。HTMLでは終了タグを省略して<input ...>と記述し、XHTMLでは<input ... />とします。

属性

固有属性

属性名 属性値 説明
type text | password | checkbox | radio | submit | reset | file | hidden | image | button コントロールの形式を指定できます。デフォルトの値は"text"です。詳細は後述。
name CDATA コントロール名を指定できます。
value CDATA コントロールのデータの初期値を指定できます。type属性値が"radio"または"checkbox"以外の場合は省略することができます。
size CDATA コントロールの幅の長さを指定できます。type属性値が"text"または"password"の場合は文字数、それ以外の場合はピクセル数を指定します。
maxlength Number type属性値が"text"または"password"の場合に、ユーザが入力できる最大文字数を指定できます。
checked (checked) type属性値は"radio"または"checkbox"の場合に、チェックが入っている状態のときに指定します。HTMLの場合は単にcheckedと記述し、XHTMLの場合はchecked="checked"とします。
disabled (disabled) コントロールがユーザの入力を受け付けないようにする場合に指定します。また、この属性が指定されているコントロールのデータは送信されません。HTMLの場合は単にdisabledと記述し、XHTMLの場合はdisabled="disabled"とします。
readonly (readonly) ユーザがコントロールを変更できないようにする場合に指定します。disabled属性とは異なり、コントロールのデータは送信されます。HTMLの場合は単にreadonlyと記述し、XHTMLの場合はreadonly="readonly"とします。
src URI type属性値が"image"の場合に、ボタンとして表示される画像のURIを指定できます。
alt CDATA type属性値が"image"の場合に、画像が表示できないブラウザ向けの代替テキストを指定します。
accept ContentTypes type属性値が"file"の場合に、サーバで処理できるファイルのMIMEタイプをコンマ区切りで指定できます。
usemap URI(XHTML1.1の場合はIDREF クライアントサイドイメージマップを用いる場合に、map要素のURIを指定します。
ismap (ismap) サーバサイドイメージマップを用いる場合に指定します。HTMLの場合は単にismapと記述し、XHTMLの場合はismap="ismap"とします。
accesskey Character アクセスキー(ショートカットキー)を指定できます。
tabindex Number Tabの移動順位を指定できます。
align top | middle | bottom | left | right 非推奨属性。Transitional/Framesetだけで指定できます。周りのテキストに対するコントロールの位置を指定できます。

汎用属性

id, class, title, langxml:lang), dir, style, xmlns(XHTML1.1のみ)

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur, onselect, onchange

説明

input要素はフォームのコントロールを表す要素の一つです。type属性の値によって様々な役割を果たします。

text

type="text"の場合、input要素は1行だけのテキスト入力フィールドになります。入力フィールドの大きさはsize属性として文字数で指定します。また、入力可能な最大文字数はmaxlength属性で指定できます。

password

type="password"の場合、基本的にはtype="text"と同様ですが、入力中の文字が"*"(アスタリスク)などに置き換えられて隠されます。

checkbox

type="checkbox"の場合、input要素はチェックボックスとして表示されます。チェックが入っている項目のname属性値とvalue属性値の対が送信されます。

<!-- チェックボックスの例 -->
<ul>
  <li><label><input type="checkbox" name="os" value="win" />Windows</label></li>
  <li><label><input type="checkbox" name="os" value="mac" />Macintosh</label></li>
  <li><label><input type="checkbox" name="os" value="linux" />Linux</label></li>
</ul>

checked属性が指定されている項目は、デフォルトでチェックが入っている項目になります。

radio

type="radio"の場合、input要素はラジオボタンとして表示されます。チェックが入っている項目のname属性値とvalue属性値の対が送信されます。チェックボックスとは異なり、同じname属性値を持つ項目同士は排他的で、同時に一つの項目にしかチェックを入れることができません。複数の項目から一つだけを選ばせたい場合に用います。

<!-- ラジオボタンの例 -->
<ul>
  <li><label><input type="radio" name="os" value="win" checked="checked" />Windows</label></li>
  <li><label><input type="radio" name="os" value="mac" />Macintosh</label></li>
  <li><label><input type="radio" name="os" value="linux" />Linux</label></li>
</ul>

checked属性が指定されている項目は、デフォルトで選択されている項目になります。

submit

type="submit"の場合、input要素は送信ボタンとして表示されます。このボタンが押されるとフォームが送信されます。ボタンのラベルはvalue属性で指定します。


<form method="post" action="comment.cgi">
  <p>
    <label>コメント: <input type="text" size="20" name="comment" value="" /></label>
    <input type="submit" value="送信" />
  </p>
</form>

image

type="image"の場合、input要素は画像として表示される送信ボタンになります。src属性でボタンにする画像のURIを指定し、alt属性で代替テキスト(画像が表示されない場合に用いられるテキスト)を指定します。

reset

type="reset"の場合、input要素はリセットボタンとして表示されます。リセットボタンが押されるとform要素内のコントロールがすべて初期値に戻されます。

button

type="button"の場合、input要素はボタンとして表示されます。ボタンのラベルはvalue属性で指定します。

ボタンが押されたときの動作はJavaScriptなどで記述します。

hidden

type="hidden"の場合、input要素は表示されません。コントロールとして表示する必要は無いが、サーバに送信する必要のある情報を記述する場合に用います。

file

type="file"の場合、input要素はファイルを選択するためのコントロールとして表示されます。ファイルを送信させたい場合に用います。

関連要素