input要素

Updated 2013.11.04 / Published 2005.09.26

input要素（form input）の input は入力という意味でテキスト入力欄、送信・リセットの各種ボタン、チェックボックスなどのフォームのコントロール部品となる入力用オブジェクトを作ります。終了タグはなく、内容をもたない空要素です。どのコントロール部品を作成するかは、type属性で種類を指定します。

入力されたデータの送信先は、コントロール部品をまとめる form要素の action属性で指定します。HTML4.01 strict, XHTML1.0 strict, XHTML1.1 では form要素の直下にインライン要素である input要素を直接記述することはできません。必ず p要素や div要素などのブロックレベル要素に内包させた形で記述しなければなりません。

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

要素型

インライン要素

開始タグ

必須

終了タグ

なし

非推奨

内容モデル

accept属性

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

指定要素

form
input

必須

非推奨

属性値

MIME

type属性の値に "file" が指定されている場合、ウェブサーバが受け取ることのできる MIMEを限定するように UA に働きかけます。たとえば、CGIプログラムで画像ファイルのみをアップロードできるように取り扱いたい場合は、次のように記述します。

<form action="upload.cgi" method="post">
......
<input name="imgfile" type="file"
accept="image/gif,image/jpeg,image/png">

これは、ユーザのローカルから"image/gif", "image/jpeg", "image/png" のMIMEファイルのみを選択できるようなインターフェイスを提供するように UA に働きかけます。

accept属性の実装状況

accept属性を実装することになったのは、HTML5仕様実装UA以降です。

IE: ◯：IE10+
Firefox: ◯：Firefox16+
Opera: ◯：Opera12+
Chrome: ◯：Chrome10+
Safari: ◯：Safari6+
iOS: ◯：iOS6+
Android: ◯：Android3+

align属性

バージョン

HTML4.01(T,F)
XHTML1.0(T,F)

指定要素

input

必須

非推奨

非推奨
HTML4.01 strict 廃止
XHTML1.0 strict 廃止
XHTML1.1 廃止

属性値

left
right
top
middle
bottom

type属性の値に "image" が指定されている場合、イメージボタンとその後に続くテキストの揃え方を指定します。値には次の5つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません（case-insensitive）。

left: ボタン用の画像は左に配置、その右にテキスト（複数行）が回り込む
right: ボタン用の画像は右に配置、その左にテキスト（複数行）が回り込む
top: ボタン用の画像の上辺に合わせてテキスト（1行）を上揃えに表示
middle: ボタン用の画像の垂直方向の長さの中央にテキスト（1行）を表示
bottom: ボタン用の画像の下辺に合わせてテキスト（1行）を下揃えに表示

align属性は非推奨属性のため、CSS の floatプロパティで左右の配置とその後に続くテキスト（複数行）の揃え方を、vertical-alignプロパティでテキスト（1行）との垂直方向の並びをそれぞれ代替することが推奨されています。また、回り込んだテキストを途中で解除したい場合は br要素に clear属性を指定すれば良いのですが、clear属性も非推奨属性のため、input要素の後に続く要素に clearプロパティを指定するか、回り込みが指定されている要素の親要素にclearfixを用いるようにしましょう。

alt属性

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

指定要素

input

必須

非推奨

属性値

代替テキスト（altanative text）

type属性の値に "image" が指定されている場合に、何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境においても画像の表現する情報を取得できるように、その内容の代替となるテキスト情報を記述します。イメージボタンは送信ボタンとして機能するので、alt="送信" という代替テキストにするのが良いでしょう。

checked属性

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

指定要素

input

必須

非推奨

属性値

checked
checked="checked"（XHTML）

type属性の値に "radio"、または "checkbox" が指定されている場合に checked属性をつけることで、最初にページを読み込んだ時から、その項目をチェックした状態で表示するように設定します。HTML4.01 では checked、XHTML では属性値を省略できないため checked="checked" と記述します。

disabled属性

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

指定要素

必須

非推奨

属性値

disabled
disabled="disabled"（XHTML）

フォームのコントロール部品の使用（入力）と選択を全て禁止します。使用が禁止されたコントロール部品の値（value属性の値）は、データ送信時には送信されません。HTML4.01では disabled、XHTML では属性値を省略できないため disabled="disabled" と記述します。

ismap属性

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

指定要素

input

必須

非推奨

属性値

ismap
ismap="ismap"（XHTML）

type属性の値に "image" が指定されており CGIプログラムを利用したサーバサイド・イメージマップの場合に指定します。ユーザがボタン用の画像をクリックすると画像の中でクリックされた座標値（x座標, y座標）をウェブサーバを通してプログラムへと送ります。HTML4.01 では ismap、XHTML では属性値を省略できないため ismap="ismap" と記述します。

maxlength属性

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

指定要素

input

必須

非推奨

属性値

整数（pixels）

type属性の値に "password"、または "text" が指定されている場合に入力欄に入力できる最大文字数を指定します。ただし、そのウェブページに記述されたフォームを利用する UA に対して文字数を制限するように働きかけるをだけなので、しっかりと CGIプログラム側で入力文字数を制限するようにした方が安全です。

name属性

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

指定要素

input

必須

非推奨

属性値

文字列

そのコントロールに名前を付けます。データを送信する時に name属性の値とユーザが入力・選択したデータ（value属性の値）がセットになります。つまり、name属性の値の内容は入力データとともに送信されるため、入力データを受け取ったときに、どの項目に対する回答なのかがわかるように質問の内容を示しておきます。name属性の値は半角アルファベットの大文字・小文字が区別されません（case-insensitive）。

readonly属性

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

指定要素

input
textarea

必須

非推奨

属性値

readonly
readonly="readonly"（XHTML）

フォームのコントロール部品を読み取り専用にして、そのコントロール部品をユーザ側での入力と変更の操作を禁止します。入力欄にフォーカスできないようにして値の入力と変更を禁止するもので、disabled属性と違い、あらかじめ設定された値（value属性の値）は送信されます。HTML4.01 では readonly、XHTML では属性値を省略できないため readonly="readonly" と記述します。

size属性

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

指定要素

input

必須

非推奨

属性値

整数

コントロール部品の表示幅を指定します。type属性の値に "password"、または "text" が指定されている場合、size属性の値は文字が隠れずに入力できる表示幅の文字数の指定となります。それ以外のコントロール部品を作成する場合でも指定することは可能ですが効果（影響）はありません。

src属性

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

指定要素

input

必須

非推奨

属性値

URI

type属性の値に "image" が指定されている場合に、表示する画像の所在となる URI を指定します。ボタンに画像を使う場合は何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境のために必ず代替テキストの alt属性を指定するようにします。

type属性

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

指定要素

input

必須

非推奨

属性値

button
checkbox
file
hidden
image
password
radio
reset
submit
text

input要素で作るコントロール形式を指定します。type属性の指定がない場合、初期値は "text" です。指定できる値は次の10種類のキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません（case-insensitive）。

押しボタン: <input type="button">
チェックボックス: <input type="checkbox">
ファイル参照欄: <input type="file">
隠し項目: <input type="hidden">
イメージボタン: <input type="image" src="画像ファイルのURI" alt="代替テキスト">
パスワード入力欄: <input type="password">
ラジオボタン: <input type="radio">
リセットボタン: <input type="reset">
送信ボタン: <input type="submit">
テキスト入力欄: <input type="text">

usemap属性

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

指定要素

input

必須

非推奨

属性値

イメージマップ名

type属性の値に "image" が指定されている場合に、map要素で作成するクライアントサイド・イメージマップ（クリッカッブルマップ）との関連づけをおこなう際に指定します。ハッシュ（#）を前置して、usemap="#名前" という形で、map要素の name属性、または id属性の値を指定します。たとえば、map要素の name属性の値が name="map" であれば、input要素の usmap属性の値は usemap="#map" と指定します。

ただし、XHTML1.1 ではハッシュ（#）を前置する必要はありません。そのため、map要素の id属性の値が id="map" であれば、XHTML1.1 における input要素の usmap属性の値は usemap="map" と ID名だけを指定します。

input要素で連携するイメージマップに対応しているUAはFirefoxのみです（旧Presto版Operaもサポートしていた）。

value属性

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

指定要素

input

必須

非推奨

属性値

文字列

フォームのコントロール部品の初期値を指定します。type属性の値が "checkbox"、または "radio" の場合は value属性は省略できます。たとえば、type属性の値に "text" が指定されているテキスト入力欄の場合は UA がページを表示したときの状態ではじめに表示させておくテキストを指定します。そして、値には value="お名前を記入してください" のように、その項目には一体何について記入するのかがわかるように簡潔な説明を記述すると良いでしょう。また、入力欄の前に、または title属性で何について入力するのかを説明したテキストを記述しておけば、値を空（value=""）にしておいても良いでしょう。

その他の属性

共通属性

イベント属性

input要素のサンプル

■押しボタン      ：
<input type="button" ...>
■チェックボックス：
<input type="checkbox" ...>
■ファイル選択    ：
<input type="file" ...>
■隠し項目        ：
<input type="hidden" ...>
■イメージボタン  ：
<input type="image" src="画像ファイルのURI" alt="代替テキスト" ...>
■パスワード      ：
<input type="password" ...>
■ラジオボタン    ：
<input type="radio" ...>
■リセットボタン  ：
<input type="reset" ...>
■送信ボタン      ：
<input type="submit" ...>
■テキスト入力    ：
<input type="text" ...>