INPUTタグ・要素／formタグinput要素

『FORMタグ/INPUTタグ・要素・属性編』

INPUT / FORMタグ・要素・属性

input要素タグ

　formタグのいくつかの要素の内、input要素は<form></form>タグ内で利用されることが想定されています。

form要素内で利用するinput要素

　formタグ内で利用する要素の内、セレクトボックスとテキストエリア以外はこのinput要素のtype属性の属性値・オプションとして利用します。

その他formタグ内で利用する要素

TEXTAREA 複数行入力スペース
SELECT PULL DOWN MENU プルダウンメニュー
OPTGROUP オプショングループ／OPTION オプション
FIELDSET フィールドセット／LEGEND レジェンド
LABEL ラベル
BUTTON ボタン
ISINDEX(W3C非推奨)

要素input、<input>タグの詳細

　要素input、<input>タグはform要素、<form></form>タグの内側に設定でき、各種入力欄、選択メニューやボタンの要素、タグです。

要素	意味	用途	使用例
input	input	インプット・入力	<form><input type=""></form> HTML4.01:閉じタグなし XHTML:<input type="" />

要素 input の属性

　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 のその他の属性

　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

　idはファイル内での一意の識別子(唯一特定できる値で区別できるもの)としての役割を持ちます。

(アンカーリンクの識別子)
アンカー(aタグ)以外のタグの識別子
scriptやobjectタグの識別子
外部CSS設定用idセレクタ

等々です。

　その他情報は、name と id参照

name と id

　name と idは、両方とも設定することができますが、両方設定した場合には設定値に同じ値を入れる必要があり、更に同じファイル内で一意となる値を設定します。

　name と idはそれぞれファイル内での識別子としての役割を持つ為ですが、識別子としてのname と idの違いは、nameが文字参照(&quote; 等)なども設定値の中に入れられるのに対し、idはこれができません。

　他方 name と異なり idは、識別子としてだけでなく、CSSのセレクタ(参照設定)として、SCRIPTを利用する際に固有の識別子として、またobjectタグの識別子として参照するため、ユーザーエージェントがタグを処理する際の参照先として利用することができます。

　しかし、ブラウザの種類やバージョンによってはidをサポートしていない場合があるようです(が、どのブラウザのどのバージョンが対応していないのか不明)。

　このため、いかなるブラウザにも対応したい場合や属性値(設定値)に文字参照が含まれる場合には、name属性を利用。

　文字参照などを含まない場合には、id を利用する方が汎用性がありますが、一部のブラウザでは認識されないケースがあるということを踏まえて設定する必要があります。

class

　classは、idと異なり、同じファイル内で(aタグを含む)複数のタグに同じ名称を設定することが可能です。

　また、idの値が一意という条件が満たされれば、同じタグ内に別途classを設定することも可能です。

　主な用途は

外部CSS設定用classセレクタ

です。

id と class

　id と class は、両方設定することも可能ですし、異なる属性値を設定することもできます(idはそのページで一意でなければならないので複数設定する場合はそれぞれの属性値が他にないものにする必要あり)。

　id と class をCSSのセレクタとして見た場合、id は class の設定より優先されます。

lang

　langは、aタグで設定される場合には、[ lang="en" ]、[ lang="ja" ]のようにリンク参照先の国や地域の言語を設定することができます。

dir

　dirは、direction(方向)の略で右から左に向かって書く右書き(right to left)か左から右に向かって書く左書き(left to right)の記述書式の方向指定で国際化における指定可能属性です。

　dirの属性値は、right to leftの略語、[ rtl ]か、left to rightの略語[ ltr ]です。

title

　titleは、aタグを含むほぼ全てのタグで設定可能で、ブラウザ上でポイントされた場合に、titleに設定された属性値が表示されます。

style

　styleは、CSSのインライン設定を行うことができる属性です。

tabindex

　tabindex はキーボードから[ tab ]キーが押された際の移動順を設定します。

　いわゆるクライアントアプリケーション(VB6.0までのVB等)とは異なり、ブラウザの場合は、設定しない場合、上から下に順にタブ移動します(aタグ、formの各種タグ等)。

　それでよい場合は設定する必要はありませんが、指定した順に移動させたい場合に利用します。

　もっとも自由に移動できてしまうマウスも利用できる環境でキーボード操作によるタブキーの移動順だけを変更したいケースはほとんどないでしょう。

　OSがWindowsやMacであればたいていの場合マウスを利用しますが、WindowsやMacユーザーのマウスが壊れて代用がないけど操作したい場合はもちろん、マウスよりもキーボード操作を好むユーザーの場合、またUNIX/Linuxユーザーはキーボード操作が基本だったりしますからタブキーの操作が考慮されています。

　Windows自体も、これらOSで利用するアプリケーションでもタブキーで移動する事ができるようになっていたりします。