input要素

説明

<input>　空要素

input要素は、データの入力や選択、送信などを行うためのフォームの部品となる要素です。type属性の値によって10種類の機能も見栄えも全く異なる部品となります。

送信（実行）ボタンを押すことで、name属性を持つフォームコントロールの値は、プログラムが処理するための「名前/値」のペアとなりサーバへ送信されます。送信されたデータは、form要素のaction属性で指定したサーバ側のプログラムをへ受け渡され指定された処理を行います。

input要素のすべてのタイプが、input要素に定義されているすべての属性を利用するわけではなく、この要素のタイプによって属性の機能は異なります。詳細は各type属性を参照してください。

フォームの実行はEnterキーを押すことによっても、送信（実行）ボタンを押したときと同様の動作が実行されます。

HTMLの定義やIEでの実装では、<input>を<form>-</form>で囲まなくても良いのですが、N4まででは<form>-</form>で囲まないと<input>が無視されてしまうので注意が必要です。

属性 (W3C)

<input

H2- ie1- N1-

一般属性

id class style title lang dir %events;

type="タイプ"

H2- ie1- N1-
部品タイプ

text	一行テキスト入力 (初期値)	詳細
password	パスワード入力	詳細
checkbox	チェックボックス	詳細
radio	ラジオボタン	詳細
submit	送信ボタン	詳細
reset	リセットボタン	詳細
file	ファイル選択ボタン	詳細
hidden	隠しボタン	詳細
image	画像による送信ボタン	詳細
button	汎用ボタン	詳細

name="名前"

H2- ie1- N1-
送信される部品名

部品名	(type="その他")
分類名	(type="checkbox\|radio")

value="初期値"

H2- ie1- N1-
初期値

フィールド初期値	(type="text\|password\|hidden")
ボタン表示名	(type="submit\|reset\|button")
送信値	(type="checkbox\|radio")

type="radio|checkbox"以外の場合、省略可能。

checked

H2- ie1- N1-
選択状態 (type="checkbox|radio")

disabled

H4- ie4- N6-
無効化

readonly

H4- ie4- N6-
読み取り専用 (type="text|password|file")

size="横幅"

H2- ie1- N1-
横幅
文字数で指定 (type="text|password|file")。

maxlength="数字"

H2- ie1- N1-
最大文字数 (type="text|password|file")

src="URI"

H2- ie1- N1-
画像URI (type="image")　

参照

alt="文章"

H4- ie4- N7-
代替文 (type="image")

usemap="URI"

H4- N2-
イメージマップ名 (type="image")　

詳細
#記号を頭につけた名前で指定。

ismap

H4- N6-
サーバ側のイメージマップ (type="image")

tabindex="数字"

H4- ie4- N6-
タブインデックス [0-32767]
([tab]キーを押したときに切り替わるフォーカスの順序を指定)

accesskey="文字"

H4- ie4- N6-
アクセスキー
(Win[Alt]+[文字]、Mac[ctrl]+[文字]でフォーカス)

onfocus="スクリプト"

H4- ie3- N2-
選択時

onblur="スクリプト"

H4- ie3- N2-
選択解除時

onselect="スクリプト"

H4- ie4- N6-
テキスト選択時 (type="text|password|file")

onchange="スクリプト"

H4- ie3- N2-
内容変更時 (type="submit|reset|image|button"を除く)

accept="MIMEタイプのリスト"

H4-
サーバが処理するMIMEタイプのリスト (type="file")
[,]で区切られたMIMEタイプのリストで指定。

align="位置" (非推奨)

H2- ie1- N1-
文字との位置関係 (type="image")　

詳細

top	画像上部と文字一行を揃えて表示
middle	画像中央と文字一行を揃えて表示
bottom	画像下部と文字一行を揃えて表示 (初期値)
left	左に画像を浮動、右に文字を回り込み表示
right	右に画像を浮動、左に文字を回り込み表示

datasrc="URI"

H4 ie4-
未調査

datafld="CDATA"

H4 ie4-
未調査

dataformatas=
"(plaintext|html)"

H4 ie4-
未調査

ブラウザ独自の属性 (ie N)

autocomplete="(on\|off)"	ie5- オートコンプリート機能の切替 (type="text\|password")
border="ピクセル"	N1- 画像の枠線幅 (type="image")
dynsrc="URI"	ie2- AVIムービーURI (type="image")
height="長さ"	ie4- N1- 画像の高さ (type="image") N(px)、S%で指定。
hspace=""	ie5- N4- 未調査 (type="image")
istyle="数字"	i2 未調査
loop=""	ie2- 未調査 (type="image")
lowsrc="URI"	ie4- N4 ロード中の仮画像 (type="image")
sdapref=""	H2 未調査
vcard_name=""	ie5- 未調査 (type="text\|password")
vspace=""	ie5- N4- 未調査 (type="image")
width="長さ"	ie4- N1- 画像の横幅 (type="image") N(px)、S%で指定。

使用例


<form action="cgi-bin/act.cgi" method="post" enctype="multipart/form-data">

<table>

<tbody>

<tr>

  <td>お名前</td>

  <td>：<input type="text" name="n1"></td></tr>

<tr>

  <td>パスワード</td>

  <td>：<input type="password" name="pw"></td></tr>

<tr>

  <td>ファイル</td>

  <td>：<input type="file" name="f1"></td></tr>

<tr>

  <td>趣味</td>

  <td>：<input type="checkbox" name="hobby" value="pc">パソコン

     <input type="checkbox" name="hobby" value="read">読書</td></tr>

<tr>

  <td>性別</td>

  <td>：<input type="radio" name="sex" value="m" checked>男性

    <input type="radio" name="sex" value="fm">女性</td></tr>

<tr>

  <td colspan="2" align="center">

  <input type="submit" value="送信">

  <input type="reset" value="リセット"></td></tr>

</tbody>

</table>

</form>

これはサンプルなので、送信ボタンのtype属性にbuttonを指定し無効化しています。

お名前	：
パスワード	：
ファイル	：
趣味	：パソコン読書
性別	：男性女性

input要素 フォームの部品 (form control)

説明

属性 (W3C)

ブラウザ独自の属性 (ie N)

使用例

input要素フォームの部品 (form control)