input
フォームの部品
<input>
入力フォームの各種部品(テキスト入力欄やボタンなど)を作成する要素です。
type属性の値によって、10種類の部品を作成することができます。
<p><input type="text" name="c1" value="テキスト入力欄"></p>
<p><input type="password" name="c2" value="パスワード入力欄"></p>
<p><input type="radio" name="c3" value="ラジオボタン"></p>
<p><input type="checkbox" name="c4" value="チェックボックス"></p>
<p><input type="file" name="c5" value="ファイル選択"></p>
<p><input type="hidden" name="c6" value="隠しデータ"></p>
<p><input type="submit" value="送信ボタン"></p>
<p><input type="reset" value="リセットボタン"></p>
<p><input type="image" src="button.gif" alt="送信ボタン"></p>
<p><input type="button" value="汎用ボタン"></p>
属性 | 説明 | 値 | 説明 |
---|---|---|---|
任意属性 | |||
type | 部品の形式 | text | テキスト入力欄 (初期値) |
password | パスワード入力欄 | ||
radio | ラジオボタン | ||
checkbox | チェックボックス | ||
file | ファイル選択 | ||
hidden | 隠しデータ | ||
submit | 送信ボタン | ||
reset | リセットボタン | ||
image | 画像による送信ボタン | ||
button | 汎用ボタン | ||
name | 部品の名前 | 文字列 | 部品を識別するための名前 |
value | 部品の初期値 | 文字列 | 送信されるデータ、ボタンのラベル |
size | 部品の幅 | 数値 | 文字数 (またはピクセル数) |
maxlength | 入力できる最大文字数 | 数値 | 文字数 (初期値は無制限) |
checked | 選択されている状態にする | (checked) | 値は省略 |
disabled | 部品の無効化 | (disabled) | 値は省略 |
readonly | 書き換えを禁止 | (readonly) | 値は省略 |
accept | プログラム側が受け入れるMIMEタイプ | MIMEタイプ | カンマ( , )区切りで複数指定可能 |
src | 画像の指定 | URI | ボタンに使用する画像のURI |
alt | 代替テキスト | テキスト | 画像の代わりになるテキスト |
usemap | イメージマップの関連付け | #マップ名 | イメージマップの名前(URI) |
ismap | サーバーサイド・イメージマップ | (ismap) | 値は省略 |
非推奨属性 | |||
align | 垂直方向の位置指定 | top | 上端揃え |
middle | 中央揃え | ||
bottom | 下端揃え (初期値) | ||
フロートの指定 | left | 左フロート | |
right | 右フロート |
- この要素がform要素内に配置されている場合は、name属性の有効範囲はそのform要素内に限られます。
- name属性の値は、入力されたデータ(またはvalue属性の値)とセットで送信されることになります。
- type属性の値が「text」または「password」の場合は、value属性の値が入力欄に表示されます。
- type属性の値が「submit」「reset」「button」の場合は、value属性の値がボタン上に表示されます。
- type属性の値が「radio」または「checkbox」の場合は、value属性が必須となります。
- type属性の値が「text」または「password」の場合は、size属性の値を文字数で指定します。(それ以外の部品に対してはピクセル数で指定しますが、実際にはその指定の効果はないようです)
- maxlength属性の指定は、type属性の値が「text」または「password」の場合に有効となります。
- checked属性の指定は、type属性の値が「radio」または「checkbox」の場合に有効となります。
- disabled属性が指定された部品は、選択や書き換えができなくなり、データも送信されなくなります。
- readonly属性が指定された部品は、書き換えだけができなくなります。選択することは可能で、データも送信されます。
- accept属性の指定は、type属性の値が「file」の場合に有効となります。この属性を指定しておくと、アップロード可能なファイルを制限できます。しかし、この属性に対応しているブラウザは少ないようです。プログラム側で制御した方がいいでしょう。
- src属性、alt属性、usemap属性、ismap属性、align属性の各指定は、type属性の値が「image」の場合に有効となります。
- usemap属性は、クライアントサイド・イメージマップを使用する際に指定します。
- ismap属性は、サーバーサイド・イメージマップを使用する際に指定します。
- checked属性、disabled属性、readonly属性、ismap属性は、値を省略して記述します(XHTMLでは省略不可)。
- 共通属性・その他属性
- style
- class
- id
- title
- lang
- dir
- accesskey
- tabindex
- イベント属性
- onclick
- ondblclick
- onmousedown
- onmouseup
- onmouseover
- onmousemove
- onmouseout
- onkeypress
- onkeydown
- onkeyup
- onfocus
- onblur
- onselect
- onchange
<input type="text" name="c1" size="30" maxlength="30">
<input type="radio" name="q1" value="はい"> はい
<input type="radio" name="q1" value="いいえ" checked> いいえ