ブラウザ上での入力フォームなどの作り方です(各要素、タグについては各ページ参照)。
◆サンプル<form> |
この機能を使用すると計算フォームなどを作る事もできます。
また、メール送信ができたり、今後出てくるCGIやスクリプトを使用するときにデータを渡すことができたりもしますが、ここではやりません。
なぜなら、これらの機能はセキュリティ対策が必要だからです。
ここではあくまでもこういう機能があるんだということを覚えていただければよろしいかと思います。後の章でまた取り上げますのでお楽しみに!
ちなみに要素form、<form>タグの詳細仕様は下記の通りです。
要素form、<form>タグはユーザー入力に対応するフォーム設定に利用される要素、タグです。
要素 | 意味 | 用途 | 使用例 |
---|---|---|---|
form | form | ユーザー入力フォーム | <form>~</form> |
htmlファイルの<body></body>タグの内側に記述できます。
FORMタグ内で利用する要素の内、セレクトボックスとテキストエリア以外はこのINPUT要素のTYPE属性の属性値・オプションとして利用します。
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タグだけでなく他のタグ・要素にも設定できる属性です。
属性 | 意味 | 用途 |
---|---|---|
id | identify | タグ識別子・参照設定(セレクタ) |
class | class | 参照設定(セレクタ) |
lang | language | リンク参照先の国・地域言語を設定 |
dir | direction | 右書き・左書きの方向指定 |
title | title | ブラウザ上でタグをポイントすると表示されるテキストを設定 |
style | style | CSSインライン設定用 |
target | target | リンク参照先の表示方法設定 |
※イベント | イベントハンドル | (マウス)ポインタの動作や状態に応じて処理を記述するための設定 |
【formタグと他のタグにも設定可能な属性】
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のインライン設定を行うことができる属性です。
target はリンク参照先の表示方法を設定します。
属性値には[ _top ]、[ _self ]、[ _parent ]、[ _blank ]があります。
既定では、現在開いているウィンドウにリンク先が表示され、、現在のウィンドウは開いたまま、リンク先を新しいウィンドウに表示したい場合、[ target="_blank" ]を設定します。
[ _top ]、[ _self ]、[ _parent ]については、frame(フレーム)で利用します。
HTMLではユーザーの操作によって何らかの処理を行いたい場合にそのタイミングにあたる属性がいくつか用意されています。
こうしたタイミングにあたる属性はイベントハンドル、イベントハンドラなどと呼ばれ、JavaScriptやvbscriptの関数等を設定することができます。
詳細は、イベントハンドル・イベントハンドラ参照。