入力部品を定義するinput要素
<input …… />

 input要素は、「form input control」の略で、テキスト入力欄、送信・リセットの各種ボタン、チェックボックスなどのフォームのコントロールとなるオブジェクトを作ります。

 form要素には、インライン要素であるinput要素を直接記述できません。必ずdiv要素などのブロック要素で内包するようにしましょう。

必須項目

任意項目

興味がある内容を選択してください(複数可)

<html>
<head>
<title>input要素のサンプル</title>
</head>
<body>
<div>
<form action="example.cgi" method="post">
<fieldset>
<legend>必須項目</legend>
<p><label for="name">お名前</label><input type="text" size="20" id="name" name="name" /></p>
<p><input type="radio" name="sex" id="men" name="man"/><label for="men" >男性</label>
<input type="radio" name="sex" id="women" name="woman"/><label for="women" >女性</label></p>
</fieldset>
<fieldset>
<legend>任意項目</legend>
<p>興味がある内容を選択してください(複数可)</p>
<ul>
<li><input type="checkbox" id="travel" name="travel" /><label for="travel">旅行</label></li>
<li><input type="checkbox" id="movie" name="movie" /><label for="movie">映画</label></li>
<li><input type="checkbox" id="music" name="music" /><label for="music">音楽</label></li>
<li><input type="checkbox" id="cooking" name="cooking"/><label for="cooking">料理</label></li>
</ul>
</fieldset>
<p><input type="submit" value="送信" /></p>
<p><input type="reset" value="リセット"/></p>
</form>
</div>
</body>
</html>

DOMでの参照方法

[window.]document.formName.inputName // but not img type
[window.]document.forms[i].elements[j]   // but not img type
[window.]document.getElementById("【ID属性値名】")

オプション属性

属性 機能 入力例 DOM参照
accept MIMEタイプ input要素でtype="file"
の場合、Webサーバが
受け取るMIMEタイプ
に限定
※対応Webブラウザ
はほとんどない
<form action="upload.cgi" method="post"
accept="text/html,image/gif">
……
<input type="file">
</form>
alt 代替テキスト 画像の代替となる
情報を記述
<input type="image" src="sample.gif" alt="サンプル画像" />
checked "checked" 項目をチェックした
状態で表示するように
設定
<input type="checkbox" value="sample" checked="checked" /> [window.]document.formName.inputName.checked
[window.]document.forms[i].elements[j].checked
[window.]document.getElementById("【ID属性値名】").checked
disabled "disabled" コントロールの入力、
選択をすべて禁止
※データも送信されない
<input type="submit" disabled="disabled" /> [window.]document.formName.inputName.disabled
[window.]document.forms[i].elements[j].disabled
[window.]document.getElementById("【ID属性値名】").disabled
maxlength 整数(pixels) type属性に"text"か
"password"を指定した
場合、入力欄に入力
できる最大文字数を指定
<input type="text" maxlength="100" /> [window.]document.formName.inputName.maxLength
[window.]document.forms[i].elements[j].maxLength
[window.]document.getElementById("【ID属性値名】").maxLength
name
文字列 どの項目に対する回答
なのかが分かるように
コントロールに名前を
付ける
<input type="text" name="sample" /> [window.]document.formName.inputName.name
[window.]document.forms[i].elements[j].name
[window.]document.getElementById("【ID属性値名】").name
readonly "readonly" ユーザー側での入力の
変更を禁止
※あらかじめ設定された
値は送信される
<input type="text" readonly="readonly" /> [window.]document.formName.inputName.readonly
[window.]document.forms[i].elements[j].readonly
[window.]document.getElementById("【ID属性値名】").readonly
size 整数 type属性に"text"か
"password"を指定した
場合、表示幅を指定
<input type="text" size="80" /> [window.]document.formName.inputName.size
[window.]document.forms[i].elements[j].size
[window.]document.getElementById("【ID属性値名】").size
src URI type属性に"image"
を指定した場合、
表示する画像のURIを
指定
<input type="image" src="sample.gif" /> [window.]document.formName.inputName.src
[window.]document.forms[i].elements[j].src
[window.]document.getElementById("【ID属性値名】").src
type "button"
"checkbox"
"file" "hidden"
"image"
"password"
"radio" "reset"
"submit" "text"
コントロールの形式を
指定
<input type="button" /> [window.]document.formName.inputName.type
[window.]document.forms[i].elements[j].type
[window.]document.getElementById("【ID属性値名】").type
usemap イメージマップ名 クライアントサイド・
イメージマップ
(クリッカッブルマップ
)と関連付ける際に指定
※IEは対応していない
<input type="image" src="sample.gif"
alt="サンプル画像" usemap="#map" />
[window.]document.formName.inputName.usemap
[window.]document.forms[i].elements[j].usemap
[window.]document.getElementById("【ID属性値名】").usemap
value 文字列 コントロールの初期値
を指定。type属性が
"checkbox"か"radio"
の場合は省略可能
<input type="text" value="お名前を記入してください" /> [window.]document.formName.inputName.defaultValue
[window.]document.forms[i].elements[j].defaultValue
[window.]document.getElementById("【ID属性値名】").defaultValue
[window.]document.formName.inputName.value
[window.]document.forms[i].elements[j].value
[window.]document.getElementById("【ID属性値名】").value

追加が可能なイベントハンドラ属性

onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup

有限会社タグパンダ
喜安 亮介

4/10

 INDEX
Web標準HTMLタグリファレンス(最終回)
フォームや入力部品を表す9つの正しいXHTMLタグ
フォーム
  form フォームを定義するform要素
  label ラベルを定義するlabel要素
input 入力部品を定義するinput要素
  textarea 複数行のテキスト入力欄を定義するtextarea要素
  select 選択メニューを定義するselect要素
  optgroup 選択メニューの項目のグループを定義するoptgroup要素
  option 選択可能な項目を定義するoption要素
  fieldset テーマとして関連があるラベルとコントロールをグループ化するfieldset要素
  legend fieldset要素に対する説明文や表題を定義するlegend要素



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

デザインハック 記事ランキング

本日 月間