気の向くままに辿るIT/ICT
webzoit.netウェブサイトホームページ
HTML/XHTMLタグ・要素・属性・属性値

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

ウェブ造ホーム前へ次へ
サイト内検索
カスタム検索
『FORMタグ/INPUTタグ・要素・属性編』

INPUT / FORMタグ・要素・属性

input要素タグ

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

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

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

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

要素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で利用するアプリケーションでもタブキーで移動する事ができるようになっていたりします。

accesskey

 accesskey はキーボードから「指定した」ショートカットキーを利用できるようにする属性です。

 [ a href="" accesskey="H" ] などと設定するとWindowsでは[ alt ]キーや[ ctrl ]キー、Macは[ cmd ]キー等と組み合わせて属性値として設定したキーをキーボードから入力するとそのアンカーにフォーカスします。

 accesskey はformの各種タグなどにも設定できます。

イベント

 HTMLではユーザーの操作によって何らかの処理を行いたい場合にそのタイミングにあたる属性がいくつか用意されています。

 こうしたタイミングにあたる属性はイベントハンドル、イベントハンドラなどと呼ばれ、JavaScriptやvbscriptの関数等を設定することができます。

 詳細は、イベントハンドル・イベントハンドラ参照。

各種HTMLとHTMLタグ/要素・属性・属性値

ウェブ造ホーム前へ次へ