reflux flow > HTML/XHTMLリファレンス > HTML/XHTML input要素

input要素

このページの目次

概要
要素の内容
属性
説明
関連要素

公開日

2006-02-05

最終更新日

2008-09-15T13:55:06+09:00

概要

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, lang（xml: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要素はファイルを選択するためのコントロールとして表示されます。ファイルを送信させたい場合に用います。