Click here to visit our sponsor

ECサイトのお勧め商品カタログ|映画好きのBS/CSガイド

Webアクセシビリティ: フォーム - 構造

フォーム - 構造: 本論へ


フォーム - 構造 本論

FORM 相互送信書式(フォーム)

入力フォームを構成するための部品を含み、そのデータの取り扱いを指定する要素です。

属性

action="URI"

送信されたフォームのデータを処理するプログラムのURIを指定します。
JavaScriptなどの処理はScript要素を含むdivのidを指定すればよいでしょう。
#Script要素はid属性を持つ事は出来ませんので。

method="HTTPメソッド"

フォームのデータを送信する際、どのHTTPメソッドを使用するか指定します。指定できるのは以下の値です。

enctype="MIMEタイプ"

フォームデータを送信する際のMIMEタイプを指定します。

accept-charset="文字コード"

サーバーのプログラムがデータとして受け付け可能な文字コードを指定します。「,」やスペースで区切り、複数指定する事が可能です。初期値は「UNKNOWN」です。
この属性はXHTML Basicでは使用できません。

accept="MIMEタイプ"

サーバーのプログラムがデータとして処理可能なMIMEタイプを指定します。「,」で区切り、複数指定する事が可能です。この属性を指定する事により、type属性が「file」であるinput要素を含む場合は選択できるファイルの制限が可能となります。
この属性はXHTML Basicでは使用できません。

name="名前"

スクリプト言語などから参照する事が出来るようにするため、名前を設定します。この属性は古いブラウザとの互換性のために残されており、id属性を使用し、同じ名前をid属性でも設定します。XHTMLではid属性のみの使用と考えた方がよいでしょう。

target="フレーム名"

フォームを送信した結果を表示させるフレーム、またはウィンドウ名を指定します。指定したフレーム、またはウィンドウがない場合は新しいウィンドウに表示されます。この属性はHTML4.01、XHTML1.0のTransitional DTD Framset DTD でのみ使用可能です。新しいウィンドウを指定する際には「新しいウィンドウで結果を表示します」等の添え書きをすべきでしょう。

このページのトップへ戻る

INPUT 入力書式

ユーザーがデータ入力や選択、送信などを行うための部品となる要素です。type属性の値により、10種類の異なる部品となり、フォームデータが送信される際はname属性で設定した名前とデータが組みとなった形でサーバーに送られます。この要素は他のブロックレベル要素の中でも使用可能ですが、Netscape Navigator4.*以前ではform要素以外のinput要素は無視されます。

閉じタグなしの空要素であるため、XHTMLで使用の際は最後の「>」を「/ >」と記述するようにしてください。

属性

type="形式"
input要素の形式を指定します。指定できるのは以下の値です。

  • 一行テキスト入力フィールド(初期値)

  • パスワード入力用フィールド(入力文字を「アスターリスク(*)」などで表示)
  • |
    チェックボックス(複数選択可)
  • |
    ラジオボタン(ひとつのみ選択可)
  • submit(s) :
    送信ボタン
  • reset(q) :
    リセットボタン(フォーム内の前部品を初期状態にする)
  • button(b) :
    汎用ボタン
  • image(i) :
    src属性で指定した画像を表示した送信ボタン(alt属性も必要です)
  • file(f) :
    送信するファイルの選択
  • hidden :
    フォーム上は非表示でサーバーに送信するデータ

XHTML Basicでは「button」「image」「file」を値として 指定できません。

name="名前"

その部品の名前を指定します。
この名前とデータが組みとなり、サーバーに送信されます。ラジオボタン、チェックボックスでは共通する項目の選択肢として利用するものには同じ名前を付けます。input要素のname属性はそのform要素内のみに使用されます。id属性とは別物です。

value="値"

そのinput要素の初期値を設定します。

古いブラウザなどではテキスト入力フィールドでも初期値を設定していなければ、使用できない場合があります。フォーム内のinput要素の初期値は出来るだけ設定すべきでしょう。

テキスト入力フィールドに初期値を設定し、JavaScriptが有効な場合、その部品にフォーカスされると初期値がクリアされ、いちいち初期値を消す手間が減るという方法もありますね。


<script type="text/javascript"><!--
  function clearform(which,name){
    if (which.value == name)
    which.value = ''
  }
//--></script>

<input type="text" size="32" name="control" value="name" onfocus="clearform(this,'name');">
size="幅"

サーバーのプログラムがデータとして受け付け可能な文字コードを指定します。「,」やスペースで区切り、複数指定する事が可能です。初期値は「UNKNOWN」です。
この属性はXHTML Basicでは使用できません。

accept="MIMEタイプ"

部品の幅を指定します。
type属性がtext password の場合は文字数、それ以外はピクセル数で指定します。

maxlength="最大文字数"

type属性がtext password の場合の入力可能な最大文字数を指定します。初期値は入力可能な文字数に制限はありません。

checked

type属性がcheckbox radio の場合、そのボタンが選択されている状態にします。XHTMLでは最小化せずにchecked="checked"と記述します。

disabled

部品が選択、変更できないようにする場合、指定します。この属性が指定されている部品のテータはサーバーに送信されません。この状態を変更するにはスクリプトを利用する必要があります。XHTMLでは最小化せずにdisabled="disabled"と記述します。
この属性はXHTML Basicでは使用できません。

readonly

部品が変更できないようにする場合、指定します。選択は可能で、データはサーバーに送信されます。この状態を変更するにはスクリプトを利用する必要があります。XHTMLでは最小化せずにreadonly="readonly"と記述します。
この属性はXHTML Basicでは使用できません。

accept="MIMEタイプ"

type属性が「file」である場合に処理可能なMIMEタイプを指定します。「,」で区切り、複数指定する事が可能です。この属性を指定する事により、選択できるファイルの制限が可能となります。
この属性はXHTML Basicでは使用できません。

tabindex="Tab移動順"

タブキーを押して部品間を移動させる場合、その順序を指定します。指定出来る値は0-32767。ただし、0を指定したり、指定ない場合は指定されているものの後に移動します。同じ値の場合はより前にあるものから順に移動します。上肢不自由な方の為のアクシビリティとして、指定が推奨されています。(キーボードでの操作が容易になる)サイト構成を考える場合、統一されたページ操作を確保し、そのマニュアル的ページを提供すべきでしょう。

accesskey="ショートカットキー"

部品にショートカットキーを割り当てます。文字コード中の任意の1文字を指定します。利用方法はOS、ブラウザなど環境に依存します。Windowsでは「altキー」、Macintoshでは「controlキー」を同時に押し、利用します。上肢不自由な方の為のアクシビリティとして、指定が推奨されています。(キーボードでの操作が容易になる)サイト構成を考える場合、統一されたページ操作を確保し、そのマニュアル的ページを提供すべきでしょう。

src="URI"

type属性が「image」の場合に送信ボタンとして利用する画像のURIを指定します。

alt="代替テキスト"

type属性が「image」の場合、画像が表示できない時に代わりに表示させるテキストを指定します。古いブラウザでは多くの場合、name属性、value属性の値が表示されます。

usemap="URI"

type属性が「image」の場合、map要素のname属性、id属性で指定された名前を指定し、画像にクライアントサイド・イメージマップを対応させます。
この属性はXHTML Basicでは使用できません。

このページのトップへ戻る

TEXTAREA 多行テキスト入力

複数行の入力が可能なテキスト入力フィールドを作成する要素です。この要素の内容として配置された文字はこのフィールドにあらかじめ入力された初期値として表示されます。ブロックレベル要素やインライン要素の子要素としても使用可能ですが、Netscape Navigator4.*以前では無視されます。

属性

rows="行数"

省略不可の属性で、入力フィールドの表示行数を指定します。この値により入力可能な行数が制御されるわけではありません。

cols="幅"

省略不可の属性で、入力フィールドの表示幅を文字数で指定します。実際に表示される入力幅は環境により、大きく異なります。この値により入力可能な一行幅が制御されるわけではありません。

name="名前"

入力フィールドの名前を指定します。フォームのデータが送信される際はこの名前とデータが組みとなって送信されます。name属性の有効範囲はそのform要素中のみで使用されます。id属性とは別物です。

disabled
readonly
tabindex="Tab移動順"
accesskey="ショートカットキー"

以上、input要素を参考にして下さい。

このページのトップへ戻る

BUTTON ボタン

HTML4.01から採用されたボタン専用の要素で、input要素で作成されるボタンと機能的には同じですが、内容を持ち、ラベルとして表示する事が可能です。ほとんどの要素を子要素に持て、ボタン内にそれを表示させられますが、内容として配置した画像をイメージマップとして利用する事は出来ません。ブロックレベル要素やインライン要素の子要素としても使用可能です。Netscape Navigator4.*以前ではbutton要素自体無視されます。

属性

name="名前"

ボタンの名前を指定します。フォームのデータが送信される際はこの名前とvalue属性の値が組みとなって送信されます。name属性の有効範囲はそのform要素中のみで使用されます。id属性とは別物です。

type="形式"

ボタンの形式を指定します。指定出来るのは以下のものです。

value="値"

name属性の名前と組みになり、サーバーに送られる値を指定します。

disabled
readonly
tabindex="Tab移動順"
accesskey="ショートカットキー"

以上、input要素を参考にして下さい。

このページのトップへ戻る

SELECT オプション選択子

メニューを作成する要素です。メニュー内の選択肢はselect要素の子要素である option要素で指定します。メニューの表示形式はブラウザに依存しますが、一般的にはプルダウンメニュー、size属性を指定されてればリストボックスとして表示されます。ブロックレベル要素やインライン要素の子要素としても使用可能ですが、Netscape Navigator4.*以前では無視されます。

属性

name="名前"

メニューの名前を指定します。フォームのデータが送信される際はこの名前とoption要素の選択されたの値が組みとなって送信されます。name属性の有効範囲はそのform要素中のみで使用されます。id属性とは別物です。

size="行数"

リストボックスとして表示させる場合、表示させる行数を指定します。一般にこの属性を指定する事でプルダウンメニューではなく、リストボックスとして表示されるようになります。

multiple

選択肢から複数選択出来るようにする場合指定します。この属性が指定されていない場合はひとつのみの選択となります。XHTMLでは最小化せずにmultiple="multiple"と指定します。

disabled
tabindex="Tab移動順"

以上、input要素を参考にして下さい。

このページのトップへ戻る

OPTION オプション・メニュー

select要素で作られるメニューの選択肢となる要素です。ひとつひとつの選択肢毎に指定し、通常はこの内容がメニュー表示されますが、label属性が指定されている場合はその値が優先して表示さます。

属性

value="値"

その選択肢が選択され、サーバーに送信される際の値を指定します。この属性が指定されていなければ、表示されている内容が送信されます。

selected

選択肢をあらかじめ選択された状態にします。XHTMLでは最小化せずにselected="selected"と指定します。

label="選択肢"

他のoption要素の内容より優先し、表示される選択肢を指定します。主にoptgroup要素により選択肢がグループ化された時に、その選択肢として使用されます。この属性が指定されてなかったり、未対応なブラウザではoption要素の内容がそのままメニューの選択肢として表示されます。

対応ブラウザならばメニューの選択肢にIEと表示されます。

<option label="IE" value="IE">Internet Explorer</option>
このページのトップへ戻る

OPTGROUP オプション・グループ

メニューの選択肢をグループ化する要素です。対応ブラウザではメニューが階層表示されます。ただし、階層化出来るのは一階層で、深い階層となったメニューは作成出来ません。未対応の古いブラウザではoption要素の内容がそのまま表示され、対応ブラウザではoptgroup要素とoption要素のlabel属性指定された内容が階層表示されます。

属性

label="選択肢"

グループ化したoption要素による選択肢を選択するための第一階層に表示される選択肢を指定します。

disabled

input要素を参考にして下さい。

このページのトップへ戻る

LABEL 書式欄のラベル

フォームの構成部品とそのラベルを明確に関連づけるための要素です。記述方法には二通りあり、label要素の中にinput要素などのファーム部品要素を入れ子にする方法とlabel要素のfor属性を用いて、各ファーム要素のid属性と関連づける方法があります。

label要素を指定する事により、ラベルの内容部分でカーソルをクリックしてもその部品にフォーカスされるようになります。

テーブルのセルでラベルと部品が区切られた場合や別々なブロックレベル要素にラベルと部品が分かれている場合など、複数のラベルを付けたい場合などもfor属性を用いると関連づけられるように設計されています。

入れ子にする場合はひとつの部品しか含ませる事は出来ません。

属性

for="部品のid"

ラベルと関連づける部品のid属性と同じ値を指定します。これにより、ラベルと部品が関連づけられます。この属性を指定しない場合は部品を入れ子にしなければなりません。

accesskey="ショートカットキー"

ラベルにショートカットキーを割り当てます。これにより、ラベルが選択された状態になりますが、同時に関連する部品もまた選択された状態になります。
input要素も参考にして下さい。

このページのトップへ戻る

FIELDSET 書式制御(フォーム制御)のグループ化

フォームの中の関連する部品、ラベルをグループ化する要素です。この要素の先頭にlegend要素を配置し、グループ毎のラベルを設定します。

使用例としては入力フォームで住所を国、都道府県、市町村、区、番地と細かく分け、入力させる場合、氏名などの情報とは分け、グループ化させ、表示させた方が判りいい場合などに使います。

このページのトップへ戻る

LEGEND 欄設定時の表題

fieldset要素により、グループ化された部品群にラベルを設定する要素です。fieldset要素内の先頭に必ずひとつのみ配置します。

属性

accesskey="ショートカットキー"

input要素を参考にして下さい。

このページのトップへ戻る

2002-08-22 著作
Copyright ©2003-2013 問い合わせ. All Rights Reserved
[all that's jazz][wag ひょうきん者]
Netscape 6.* Mozilla(ja) だと「表示」→「スタイルシートを使う」で画面表示を変更できます。
Netscape Communicator 4.* は簡易版のスタイルシートを適用しています。
このページのトップへ戻る