<input>

コントロールを作成することができます。type属性によって、チェックボックス・テキストボックスなど様々に変化します。複数のラジオボタンを作成して、単一選択の制御を行うにはname属性で同じ名前を付ける必要があります。


ブラウザ

IE3 / IE4 / IE5 / IE5.5 / IE6 / N3 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

仕様

・構成
要素区分 エンドタグ ネストできる要素 備考
インライン なし なし

・属性
属性名 必須 意味 値
type 役割
text
テキストボックス(規定値)
password
パスワード入力ボックス
checkbox
チェックボックス
radio
ラジオボタン
submit
送信ボタン
reset
初期化ボタン
file
ローカルからのファイル参照
hidden
表示されないコントロール
image
src属性で指定した画像の送信ボタン
button
汎用ボタン
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 配置位置
top
上端
bottom
下端
left
左端
right
右端
class class名 スタイルシートを設定したclass名
id id名 スタイルシートを設定したid名もしくは、任意のテキスト
title 説明文 任意のテキスト
style スタイル 任意のスタイル
lang 言語コード 例(日本語)：ja
dir 読む方向
rtl
右から左に読む
ltr
左から右に読む

・イベント
イベント 仕様
onclick クリック時に発生
ondblclick ダブルクリック時に発生
onmousedown 要素上でマウスボタンを押したときに発生
onmouseup 要素上でマウスボタンを離したときに発生
onmouseover ポインティングデバイスが要素上を通過したときに発生
onmousemove ポインティングデバイスが要素上で動くと発生
onmouseout 要素の領域から出るときに発生
onkeypress 要素上でキーが押されて、要素から離れたとき発生
onkeydown 要素上でキーが押されたとき発生
onkeyup 要素上で押されたキーを離したとき発生
onfocus フォーカスが合ったとき発生
onblur フォーカスが外れたとき発生
onchange 何らかの変更を加えてからフォーカスが外れたとき発生
onselect テキスト入力を促すコントロール内のテキストを選んだとき発生

▲PageTop

サンプル

ソースコード

<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>

表示結果











▲PageTop

関連項目

HTML

<form> / <legend> / <button> / <label>

▲PageTop

▲