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

FORMタグ・要素

ウェブ造ホーム前へ次へ
サイト内検索
カスタム検索
入力フォームを作りたい『formタグ編』

FORMタグ・要素

FORMタグとは

 ブラウザ上での入力フォームなどの作り方です(各要素、タグについては各ページ参照)。

◆サンプル<form>

HTMLが知りたい
CSSが知りたい
JavaScriptが知りたい

チェックボックスで選んだのが知りたい
やっぱり。。CGIもAjaxもCもPerlも全部知りたい
チェックボックスの選択肢以外が知りたい

 この機能を使用すると計算フォームなどを作る事もできます。

 また、メール送信ができたり、今後出てくるCGIスクリプトを使用するときにデータを渡すことができたりもしますが、ここではやりません。

 なぜなら、これらの機能はセキュリティ対策が必要だからです。

 ここではあくまでもこういう機能があるんだということを覚えていただければよろしいかと思います。後の章でまた取り上げますのでお楽しみに!

アンカーの下線を消したい!

 ちなみに要素form、<form>タグの詳細仕様は下記の通りです。

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

 要素form、<form>タグはユーザー入力に対応するフォーム設定に利用される要素、タグです。

要素 意味 用途 使用例
form form ユーザー入力フォーム     <form>~</form>

htmlファイルの<body></body>タグの内側に記述できます。

FORMタグで利用できるタグ

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

要素 form・formタグの属性

 formタグに設定できる属性は下記の通りです。

 これらはほぼformタグに固有の属性です。

属性 意味 用途
action action スクリプトファイルのあるURI(URL)を指定
ブラウザはフォームのこのURIを利用し、HTTP URIが未定義であるかのように動作。
method method スクリプトの呼び出し方法を指定
属性値 get | post 
既定値: get 
enctype encode type
encoding type
method="post"の時に利用される※content type(MIME type)を指定
既定値: application/x-www-form-urlencoded 
multipart/form-data は、form要素でinput要素のtype属性にfileが指定された場合(<input type="file">)に利用されるべきとされる。
accept-charset accept-charset フォーム入力値の文字エンコード方式( euc-jp ...etc.)を指定
1つまたはスペース区切りまたはカンマ区切りのリスト
サーバーで単独の実体(文字)ごとに文字エンコード方式を処理できるようにブラウザもこれを行うものとされる
既定値: UNKNOWN 
ブラウザが文書の文字コードをFORMの文字コードとして送る場合もある
accept accept フォームを処理するサーバが正常稼働する※content typeのカンマ区切りリスト
name name スタイルシートやスクリプトから参照されるケースの為に名前を設定(後方互換性対応)
この用途についてはnameではなくidが推奨される

※元々1つの情報(テキストデータ)しか送ることのできなかった電子メールで単一または複数の情報を送ることができるようにIANA(Internet Assigned Numbers Authority)で策定された仕様がMIME(MIME Media Type)、そのデータ内容を示すものがcontent typeで設定値の一例としては"text/html"、 "image/png"、 "image/gif"、 "video/mpeg"、 "text/css"、"audio/basic" 等々があり、メールだけでなく広く利用されています。

要素 form のその他の属性

 formタグに設定できるその他の属性は下記の通りです。

 formタグだけでなく他のタグ・要素にも設定できる属性です。

属性 意味 用途
id identify タグ識別子・参照設定(セレクタ)
class class 参照設定(セレクタ)
lang language リンク参照先の国・地域言語を設定
dir direction 右書き・左書きの方向指定
title title ブラウザ上でタグをポイントすると表示されるテキストを設定
style style CSSインライン設定用
target target リンク参照先の表示方法設定
イベント イベントハンドル (マウス)ポインタの動作や状態に応じて処理を記述するための設定

【formタグと他のタグにも設定可能な属性】

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のインライン設定を行うことができる属性です。

target

 target はリンク参照先の表示方法を設定します。

 属性値には[ _top ]、[ _self ]、[ _parent ]、[ _blank ]があります。

 既定では、現在開いているウィンドウにリンク先が表示され、、現在のウィンドウは開いたまま、リンク先を新しいウィンドウに表示したい場合、[ target="_blank" ]を設定します。

 [ _top ]、[ _self ]、[ _parent ]については、frame(フレーム)で利用します。

イベント

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

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

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

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

ウェブ造ホーム前へ次へ