formタグのいくつかの要素の内、input要素は<form></form>タグ内で利用されることが想定されています。
formタグ内で利用する要素の内、セレクトボックスとテキストエリア以外はこのinput要素のtype属性の属性値・オプションとして利用します。
要素input、<input>タグはform要素、<form></form>タグの内側に設定でき、各種入力欄、選択メニューやボタンの要素、タグです。
要素 | 意味 | 用途 | 使用例 |
---|---|---|---|
input | input | インプット・入力 | <form><input type=""></form> HTML4.01:閉じタグなし XHTML:<input type="" /> |
inputタグに設定できる属性は下記の通りです。
ほぼinputタグに固有の属性です。
属性 | 意味 | 用途 |
---|---|---|
type | input type | 利用方法設定 設定値 text | password | checkbox | radio submit | reset | file | hidden | image | button |
name | name | タグ識別子 |
value | default value | (表示される)既定値を設定 除:type="radio"/type="checkbox" |
maxlength | maxlength | type="text"/type="password"の場合は入力可能文字数(整数) 但し、スクロール機能のあるブラウザなどでは記述された文字数を超える場合もある為、この属性の既定値に文字数制限なし。 |
checked | checked | ボタンがクリックされた場合にtype="radio"/type="checkbox"で選択された項目ではboolean値を返す 他のコントロールにこの設定がある場合ブラウザは無視するべきとされる HMTL:<input type="" checked> XHTML:<input type="" checked="checked"> |
src | image src | type="image"(実行ボタン装飾用のイメージ画像)のURLを設定 |
inputタグの非推奨属性は下記の通りです。
非推奨 | ||
---|---|---|
属性 | 意味 | 用途 |
align | align alignment |
位置設定 設定値:bottom | middle | top | left | right |
inputタグに設定できるその他の属性は下記の通りです。
inputタグだけでなく他のタグ・要素にも設定できる属性です。
属性 | 意味 | 用途 |
---|---|---|
alt | alt alternate text |
画像やフォームコントロールが表示されないブラウザ等への文字情報設定 |
accept | accept | カンマ区切りのcontent typeリスト |
readonly | readonly | 読み取り専用設定(INPUT要素とTEXTAREA要素) この属性が設定されている場合でもフォーカスを受けとる、タブインデックスには対応 設定した場合の表示はブラウザに依存 動的に変更する方法はスクリプトのみ HTML4.01:<input type="" readonly> XHTML:<input type="" readonly="readonly"/> |
disabled | disabled | 利用不可設定 BUTTON・INPUT・OPTGROUP・OPTION・SELECT・TEXTAREA要素に設定可 この属性が設定されている場合、フォーカスは受け取らない、タブインデックスが設定されていてもスキップ この属性はローカル宣言が継承された値を上書きするものの継承はされる disabledを設定した場合の表示方法はブラウザに依存 HTML4.01:<input type="" disabled> XHTML:<input type="" disabled="disabled"/> |
ismap | ismap | サーバサイドimg map(イメージマップ)を利用する際に必ず指定する値 |
usemap | usemap | クライアントサイドimg map(イメージマップ)に利用する画像のURLを指定 |
属性 | 意味 | 用途 |
---|---|---|
id | identify | タグ識別子・参照設定(セレクタ) |
class | class | 参照設定(セレクタ) |
lang | language | リンク参照先の国・地域言語を設定 |
dir | direction | 右書き・左書きの方向指定 |
title | title | ブラウザ上でタグをポイントすると表示されるテキストを設定 |
style | style | CSSインライン設定用 |
tabindex | tabindex | キーボードからタブキーが押された際の移動順を設定 |
accesskey | accesskey | キーボードからフォーカスを与える設定 |
※イベント | イベントハンドル | (マウス)ポインタの動作や状態に応じて処理を記述するための設定 |
idはファイル内での一意の識別子(唯一特定できる値で区別できるもの)としての役割を持ちます。
等々です。
その他情報は、name と id参照
name と id
name と idは、両方とも設定することができますが、両方設定した場合には設定値に同じ値を入れる必要があり、更に同じファイル内で一意となる値を設定します。
name と idはそれぞれファイル内での識別子としての役割を持つ為ですが、識別子としてのname と idの違いは、nameが文字参照("e; 等)なども設定値の中に入れられるのに対し、idはこれができません。
他方 name と異なり idは、識別子としてだけでなく、CSSのセレクタ(参照設定)として、SCRIPTを利用する際に固有の識別子として、またobjectタグの識別子として参照するため、ユーザーエージェントがタグを処理する際の参照先として利用することができます。
しかし、ブラウザの種類やバージョンによってはidをサポートしていない場合があるようです(が、どのブラウザのどのバージョンが対応していないのか不明)。
このため、いかなるブラウザにも対応したい場合や属性値(設定値)に文字参照が含まれる場合には、name属性を利用。
文字参照などを含まない場合には、id を利用する方が汎用性がありますが、一部のブラウザでは認識されないケースがあるということを踏まえて設定する必要があります。
classは、idと異なり、同じファイル内で(aタグを含む)複数のタグに同じ名称を設定することが可能です。
また、idの値が一意という条件が満たされれば、同じタグ内に別途classを設定することも可能です。
主な用途は
です。
id と class
id と class は、両方設定することも可能ですし、異なる属性値を設定することもできます(idはそのページで一意でなければならないので複数設定する場合はそれぞれの属性値が他にないものにする必要あり)。
id と class をCSSのセレクタとして見た場合、id は class の設定より優先されます。
langは、aタグで設定される場合には、[ lang="en" ]、[ lang="ja" ]のようにリンク参照先の国や地域の言語を設定することができます。
dirは、direction(方向)の略で右から左に向かって書く右書き(right to left)か左から右に向かって書く左書き(left to right)の記述書式の方向指定で国際化における指定可能属性です。
dirの属性値は、right to leftの略語、[ rtl ]か、left to rightの略語[ ltr ]です。
titleは、aタグを含むほぼ全てのタグで設定可能で、ブラウザ上でポイントされた場合に、titleに設定された属性値が表示されます。
styleは、CSSのインライン設定を行うことができる属性です。
tabindex はキーボードから[ tab ]キーが押された際の移動順を設定します。
いわゆるクライアントアプリケーション(VB6.0までのVB等)とは異なり、ブラウザの場合は、設定しない場合、上から下に順にタブ移動します(aタグ、formの各種タグ等)。
それでよい場合は設定する必要はありませんが、指定した順に移動させたい場合に利用します。
もっとも自由に移動できてしまうマウスも利用できる環境でキーボード操作によるタブキーの移動順だけを変更したいケースはほとんどないでしょう。
OSがWindowsやMacであればたいていの場合マウスを利用しますが、WindowsやMacユーザーのマウスが壊れて代用がないけど操作したい場合はもちろん、マウスよりもキーボード操作を好むユーザーの場合、またUNIX/Linuxユーザーはキーボード操作が基本だったりしますからタブキーの操作が考慮されています。
Windows自体も、これらOSで利用するアプリケーションでもタブキーで移動する事ができるようになっていたりします。
accesskey はキーボードから「指定した」ショートカットキーを利用できるようにする属性です。
[ a href="" accesskey="H" ] などと設定するとWindowsでは[ alt ]キーや[ ctrl ]キー、Macは[ cmd ]キー等と組み合わせて属性値として設定したキーをキーボードから入力するとそのアンカーにフォーカスします。
accesskey はformの各種タグなどにも設定できます。
HTMLではユーザーの操作によって何らかの処理を行いたい場合にそのタイミングにあたる属性がいくつか用意されています。
こうしたタイミングにあたる属性はイベントハンドル、イベントハンドラなどと呼ばれ、JavaScriptやvbscriptの関数等を設定することができます。
詳細は、イベントハンドル・イベントハンドラ参照。