input要素

Home>HTML>要素リファレンス>input

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

input要素の役割

input要素は、フォームの部品として使われます。
テキストの入力フィールドやチェックボックス、ラジオボタン、非表示フィールドなどをtype属性で使い分けることができます。
name属性やid属性により、送信先に値を渡すことができます。

input要素に設定できる属性

属性名 意味
accept 受付可能なMIMEタイプを指定。
accesskey ショートカットキーを設定。
align 画像に対するテキストの位置を指定。非推奨。
alt 画像を表示する際の代替テキストを入力。
checked 選択されている状態で表示する。
class クラス名。CSSを適用するときなどに使用する。
dir 文字表記の方向。左から右(ltr)と、右から左(rtl)を指定する。通常はltrなので、右から左へ表記する言語を使わないのであれば、指定しなくてよい。
disabled 選択したり変更したりできないようにする。
id ID名。CSSを適用するときに使用する。
ismap サーバに保存されているイメージマップを指定。
lang 言語コード。日本語、英語といった言語を指定する。html要素に記述してあれば、明示する必要はない。
maxlength 入力できる最大文字数を指定。
name 要素の名前。
readonly 変更できないようにする。
size 横幅を指定。
src 画像のURL(画像を表示するときに使用)。
style スタイルシートを直接記述する。
tabindex Tabキーを押したときに移動する順番。
title 補足情報。テキストにカーソルを合わせるとtitle属性に指定した文字列をポップアップで表示する。
type input要素を表示する形式を決める。
usemap イメージマップを使うときに指定する。
value 初期設定の値、又はラベル文字。

input要素の使い方

type属性による違い

button 押しボタンを表示。value属性を使うとそのテキストが表示される。
checkbox チェックボックスを表示。
file ファイルを参照するフィールドとボタンを表示。
hidden 隠し属性。表示させたくないが、CGIに値を渡したい場合に使用。
image 画像を表示。送信ボタンとして使える。
password パスワード入力フィールド。入力した文字は読めないようになる。
radio ラジオボタンを表示。name属性を統一することで、複数の中から一つを選ばせることができる。
reset リセットボタン。フォーム内のすべてのフィールドをクリアする。
submit 送信ボタンを表示。フォームのデータを送信する。
text 1行の入力フィールドを表示。

input要素は、type属性により以上の形式で表示できます。このほか、リスト項目から一つ選ばせるためのselect要素およびoption要素、改行を含めた長文を入力できるtextarea要素などがあります。

accept属性

type属性にfileが指定されたときに、送信できるファイルの形式を制限するための属性です。画像ファイルのみを送信させたい場合には、[accept="image/gif"]や[accept="image/jpeg"]と記述します。

ただし、accept属性に対応しているブラウザは殆どないため、使う必要はないでしょう。

align属性

type属性にimageを指定したときに表示される画像と、その後に続いて表示されるテキストがある場合に、テキストと画像の位置関係を指定します。

bottom 画像に対して下寄りに表示。
left 画像を左側に表示し、テキストは右側に表示。
middle 画像の高さに対して中央に表示。
right 画像を右側に表示し、テキストは左側に表示。
top 画像に対して上寄りに表示。

<input type="image" align="bottom">文字との位置関係

文字との位置関係

checkedとdisabledとreadonly属性

checked属性は、チェックボックスやラジオボタンで、予め選択された状態にしたいときに、指定します。
HTMLではcheckedと省略できますが、XHTMLではchecked="checked"と表記します。


disable属性は、使用禁止状態にします。そのフィールドの選択自体ができなくなり、初期値が設定されている状態でも、送信ボタンを押しても、その値は送信されません。

readonly属性は、読み取り専用にします。その部分は変更したり削除することはできませんが、送信ボタンを押すと値は送信されます。

ismapとusemap属性

type属性にimageが設定されているときに有効になります。両者ともイメージマップ(クリッカブルマップ)を使い動作をさせたい場合に使います。

ismapはクライアントサイドのクリッカブルマップ、usemapはサーバーサイドのクリッカブルマップを使う場合に用います。

<input type="image" usemap="#map" src="画像URL">
<map name="map">
<area shape="rect" coords="座標" href="URL">
<area shape="rect" coords="座標" href="URL">
</map>

上記のように、クリッカブルマップを作成して、クリックした部分によってリンク先を変更することができます。

usemapやismapは、InternetExplorerでは対応しておらず、動作しません。

関連リンク

よく読まれている記事

UpDate:2010-4-9