ITエンジニアのための技術支援サイト
<input>
コントロールを作成することができます。type属性によって、チェックボックス・テキストボックスなど様々に変化します。複数のラジオボタンを作成して、単一選択の制御を行うにはname属性で同じ名前を付ける必要があります。
ブラウザ
IE3 / IE4 / IE5 / IE5.5 / IE6 / N3 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac
仕様
| 要素区分 | エンドタグ | ネストできる要素 | 備考 |
| インライン | なし | なし |
| 属性名 | 必須 | 意味 | 値 |
| type | 役割 |
|
|
| name | 識別名 | 任意のテキスト | |
| value | プログラム等により送信される値・初期値・表示値 | 値 | |
| size | 表示時の幅 | px値 | |
| maxlength | 入力可能な文字数(規定値は無制限) | 数字 | |
| checked | 初期チェック項目(type属性がcheked・radioである場合に有効) | checked | |
| disabled | 選択・変更不可 | disabled | |
| readonly | 初期値変更不可 | readonly | |
| accept | 許可されている文書タイプ | ||
| tabindex | Tabボタンで選択できる順番 | 数値 | |
| accesskey | 指定したキーがショートカットキーとして機能 | 例：k | |
| src | イメージボタンに使用する画像URL | URL | |
| alt | 画像エラー時の代替テキスト | 任意のテキスト | |
| usemap | 直後にあるmap要素のname属性 | URL | |
| ismap | サーバーサイドイメージマップ化させる | ismap | |
| align | 配置位置 |
|
|
| class | class名 | スタイルシートを設定したclass名 | |
| id | id名 | スタイルシートを設定したid名もしくは、任意のテキスト | |
| title | 説明文 | 任意のテキスト | |
| style | スタイル | 任意のスタイル | |
| lang | 言語コード | 例(日本語)：ja | |
| dir | 読む方向 |
|
| イベント | 仕様 |
| onclick | クリック時に発生 |
| ondblclick | ダブルクリック時に発生 |
| onmousedown | 要素上でマウスボタンを押したときに発生 |
| onmouseup | 要素上でマウスボタンを離したときに発生 |
| onmouseover | ポインティングデバイスが要素上を通過したときに発生 |
| onmousemove | ポインティングデバイスが要素上で動くと発生 |
| onmouseout | 要素の領域から出るときに発生 |
| onkeypress | 要素上でキーが押されて、要素から離れたとき発生 |
| onkeydown | 要素上でキーが押されたとき発生 |
| onkeyup | 要素上で押されたキーを離したとき発生 |
| onfocus | フォーカスが合ったとき発生 |
| onblur | フォーカスが外れたとき発生 |
| onchange | 何らかの変更を加えてからフォーカスが外れたとき発生 |
| onselect | テキスト入力を促すコントロール内のテキストを選んだとき発生 |
サンプル
ソースコード
<html>
<head>
<title>サンプルコード</title>
</head>
<body>
<form name="frm1">
<input type="text" name="form1"><br>
<input type="password" name="form2" maxlength="5"><br>
<label for="c1">チェックボックス１</label>
<input type="checkbox" name="form3" checked="checked" id="c1">
<label for="c2">チェックボックス２</label>
<input type="checkbox" name="form4" id="c2"><br>
<label for="r1">ラジオ１</label>
<input type="radio" name="form5" id="r1">
<label for="r2">ラジオ２</label>
<input type="radio" name="form5" id="r2" checked="checked"><br>
<input type="submit" name="form6"><br>
<input type="reset" name="form7"><br>
<input type="file" name="form8"><br>
<input type="hidden" name="form9"><br>
<input type="image" name="form10"
src="../../../../images/development/htmlcss/input-image.gif"><br>
<input type="button" name="form11" value="汎用ボタン"><br>
</form>
</body>
</html>