• Home
• Web制作資料
• HTML

• Top
• HTML
• CSS
• JavaScript
• PHP
• Plugins
• WordPress

作成日：2015年08月13日

form 要素

フォームの最上位要素として form 要素があります。form 要素でフォームの範囲を以下のように定義します。

<form>・・・フォームの内容・・・</form>

フォームをプログラムと関連付けるために、action 属性と method 属性を指定します。

action 属性では、どこにデータを送るかを指定します。言い換えると、データを受け取るプログラムを指定します。

method 属性では、データの送信方法を指定します。

action 属性

action = "URL"
フォームの内容を処理するプログラムの URL （データの送信先）を指定します。※HTML5 からは自分自身に送信する場合は action 属性自体を省略します。form タグの action 属性

method 属性

method = "HTTP メソッド"
フォームの内容を処理（送信）する方法を以下のいずれかの値を指定します。詳細は「HTTP 通信」を参照してください。

• post ：フォームの本文として送信。問い合わせフォームやアンケートなどは通常はこちらを指定します。
• get ：フォームの内容を URL に ? 区切りで追加して送信（デフォルト）

<form action="contact.php" method="post" >・・・フォームの内容・・・</form>

その他の属性

enctype="MIMEタイプ"

送信の際のデータ形式（MIMEタイプ）を指定します。この属性で Content-Type HTTP ヘッダの値を指定できます。デフォルト値は application/x-www-form-urlencoded です。ファイルを送信する場合は、 multipart/form-data に設定します。

accept-charset="文字セット"

プログラム等のデータの受け側で、受付可能な文字セットを指定します。半角カンマ区切りで、複数指定することができます。

accept="MIMEタイプ"

プログラム等のデータの受け側で、処理可能な MIME タイプを指定します。

name="名前（識別子）"

スクリプト言語（プログラム）などから参照できるよう名前（識別子）を指定します。名前にはハイフンを使わないようにします。

target="フレーム名"

フォーム送信の結果を表示するフレーム、またはウィンドウの名前を指定します。

HTML5 では以下の属性が追加されています。

autocomplete

input 要素がデフォルトで、ブラウザによる値の入力補完を受けるかを指定します。この設定はフォームに属する要素の autocomplete 属性で上書きできます。以下の値が指定可能です。

• off: ユーザは、フォームを使用する度に全ての値を入力するか、もしくは独自の入力補完を使用する必要があります。ブラウザが入力補完をサポートする事はありません。
• on: ブラウザはユーザが以前に入力した値に基づき、これを自動補完の為の候補として使用する事ができます。

novalidate

フォームが送信された時にバリデート（検証）しない事を示す真偽値です。もしこの属性が指定されていない（つまりバリデートされる）場合、この設定の初期値は <button> もしくは <input> の formnovalidate 属性によって上書きする事ができます。

<form id="my_form" method="post">

<form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'], ENT_QUOTES, 'UTF-8'); ?>">

input 要素

入力フィールドやボタンなどのパーツはコントロールと呼ばれています。これらのパーツを生成するには、インライン要素の input 要素を使用します。

type 属性に所定の値を指定することで、入力欄、チェックボックス、ラジオボタン、送信ボタン等のコントロールを生成することができます。

入力フィールドにデータが入力され、form 要素を使ってデータが送信される際には、input 要素の name 属性で付けたコントロール名と value 属性で指定した値を一組にして、form 要素の action 属性で指定したサーバー上のファイル（プログラム）に、 form 要素の method 属性で指定した転送方法で送られます。

type 属性

type 属性には以下のような値を指定することができます。

HTML5 では以下以外にも指定できる値が増えています。参照：input 要素の新しい type 属性

type = "text"

1行テキスト入力フィールドを生成します。通常のテキスト（名前、住所、メールアドレス等）を入力するフィールドです。2行以上にわたる長い文章を入力させたい場合には、textarea 要素を使用します。また、HTML5 からは メールアドレスや電話番号などのための新しい type 属性が追加されています。

データを受信したプログラムがそれぞれの項目を区別できるようにするために name 属性でデータに名前を付けます。また、size 属性でコントロールの幅を「文字数」で指定します。

送信されるデータは、name 属性と入力されたデータ（未入力の場合は value 属性の値）とセットで送信されます。

input 要素の type 属性の既定値は text なので type 属性を省略すると1行テキスト入力フィールドになります。

First Name <input type="text" name="first_name" size="15">

type = "password"

パスワード入力ボックスを生成します。入力したテキストが●やアスタリスク（*）などに置き換えて表示されます。ただし、データが暗号化されるわけではないので（通常のテキストとして送信されるため）、セキュリティが高いとは言えません。セキュリティの確保には別途 SSL 等の暗号化技術を利用する必要があります。

送信されるデータは、name 属性と入力されたデータ（または value 属性の値）とセットで送信されます。

パスワード形式の入力欄では初期値（value 属性の値）の設定は行わないようにします。（ソースを見るとパスワードの文字列を確認できてしまいます）

パスワード欄の自動入力を抑止：
パスワード欄の自動入力を抑止したい場合は、autocomplete 属性にnew-password を指定します。

Password : <input type="password" name="pw" size="15" autocomplete="new-password">

type = "checkbox"

チェックボックスを生成します。チェックボックスは複数選択が可能で、checked 属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。

複数の input 要素で同じ名前を共有することができ、同時に複数の項目を選択することができます。それぞれに異なる value 属性を与えます。

送信されるデータは、name 属性と value 属性の値とセットで送信されます。

name 属性の値に [] を付けると、配列としてデータを送信することができます。

<input type="checkbox" name="drink" value="wine"> Wine <input type="checkbox" name="drink" value="beer"> Beer

type = "radio"

ラジオボタンを生成します。複数の中から一つしか選択できない点がチェックボックスと異なります。複数を一つのグループとして認識させるには、チェックボックス同様、name 属性で同じ名前を付けます。そして、それぞれに異なる value 属性を与えます。checked 属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。

送信されるデータは、name 属性と value 属性の値とセットで送信されます。

<input type="radio" name="contact" value="email"> Email <input type="radio" name="contact" value="phone"> Phone <input type="radio" name="contact" value="mail"> Mail

type = "submit"

送信ボタンを生成します。そのフォームの入力内容の全てをプログラムに送信するボタンです。value 属性を指定すると、ボタンの名前としてその値を表示します。

<input type="submit" value="Submit（送信）">

type = "reset"

リセットボタンを生成します。このボタンを押すと、そのフォームの入力内容の全てをリセットします。value 属性を指定すると、ボタンの名前としてその値を表示します。

<input type="reset" value="クリア">

type = "button"

汎用ボタンを生成します。プログラムなどに任意の指示を出します。ボタンに表示する文字列は value 属性で指定します。

<input type="button" value="Button">

type = "image"

画像のボタンを生成します。使用する画像ファイルは src 属性で指定します。また alt 属性が必須です。ボタンに表示する文字列は value 属性で指定します。width, height で幅と高さを指定できます。

<input type="image" src="btn_01.png" alt="送信する" width="50" height="30">

type = "file"

ファイル参照用のボタンを生成します。

<input type="file" name="file_upload">

HTML5 では、multiple 属性が新たに追加され、複数のファイルを選択して送信することが可能になりました。

ファイルを送信するフォームでは、form 要素に method="post" と enctype="multipart/form-data" を指定しておく必要があります。

type = "hidden"

隠しフィールドを生成します。画面上に表示させずにプログラムに送信するデータを指定します。（ただし、ソースを見れば確認することができます）

送信されるデータは、name 属性と value 属性の値とセットで送信されます。

<input type="hidden" name="hidden_input" id="hidden_input" value="hiddenValue">

name 属性

name 属性ではコントロールの（フォーム部品を識別するための）名前を指定します。

データを受信したプログラムがそれぞれの項目を区別できるようにするためにデータに名前を付けるのが name 属性です。

input 要素では、name 属性はデータ送信時の名前として機能します。name 属性に同じ値が指定された input 要素は、同じ名前を持つ１つのグループとして扱われます。

name 属性の値に [] を付けると、配列としてデータを送信することができます。（PHP フォーム）

※ HTML では name 属性の値にハイフンを使用することはできますが、JavaScript や PHP で操作する場合、プログラム上でハイフンは使えないのでフォーム要素やフォームコントロールの name 属性にはハイフンを使わないようにします（アンダーバーやキャメルケースにします）。

size 属性

size 属性では、コントロールの幅を指定します。

• type="text", type="password" の場合は、文字数で指定します。
• それ以外の場合は、ピクセル値で指定します。
• size 属性を指定しない場合は、コントロールの幅は、ブラウザに依存します。
• また、size 属性を指定した場合も、1文字分の幅がどのぐらいかはブラウザの設定やフォントサイズに依存するので、環境によって幅が異なります。

以下は、input 要素を使った例です。input 要素はインライン要素なので、p 要素や div 要素などを使ってマークアップします。

また、method 属性は通常は post を使用しますが、データがどのように送信するかを確認するためにこの例では get を指定しています。

<form method="get" id="form_sample1">  <p>Name: <br>    <input type="text" name="yourname" id="yourname" value="" size="20" placeholder=" Name">  </p>  <p>E-mail: <br>    <input type="text" name="youremail" id="youremail" value="" size="20" placeholder=" E-mail">  </p>  <p>Gender: <br>    <input type="radio" name="gender" value="male"> Male     <input type="radio" name="gender" value="female">  Female  </p>  <p>    <input type="submit" value="Submit"> <input type="reset" value="Reset">  </p></form>

フォームから送られるデータの確認

上記の例では、 method 属性は get を指定しているので、送信すると送信されたデータを URL で確認することができます。

適当な値を入力して、送信（Submit）ボタンを押してみてください。

例えば Name に「Jonny Smith」、E-mail に「jonny@exmple.com」と入力して、ボタンを押すと、URL 欄には以下のような文字列が表示されます。

http://xxxx.html?yourname=Jonny+Smith&youremail=jonny%40exmple.com&scroll_top=7800

ファイル名の後の ？ マークの後に続くのが、get を使って送信されるデータになります。（name 属性の値）=（入力した値）という形式になっているのがわかります。

※最後に付く &scroll_top=780 は隠しフィールドに設定したスクロール位置の情報ですので、無視してください。これはフォームを送信した後にページトップに戻るのではなく、元の位置に戻るための位置情報です。詳細は「submitした時の位置を保持」を参照ください。

その他の属性

input 要素には以下のような属性も設定できます。

maxlength="最大入力文字数"

type="text" , type="password" の場合に最大入力文字数を指定します。

checked （checked="checked"）

type="checkbox", type="radio" の場合に初期状態で選択されている状態にします。

disabled （disabled="disabled"）

コントロールをフォーカス・選択・変更などをできないようにします。データはサーバーに送られません。

readonly （readonly="readonly"）

コントロールの内容を変更できないようにします（選択は可能）。データはサーバーに送られます。

accept="MIMEタイプ"

type="file" の場合に、プログラムが受け付け可能な MIME タイプを指定します。

src="URL"

type="image" の場合に、送信ボタンとして表示する画像の URL を指定します。

alt="代替テキスト"

type="image" の場合に、送信ボタンとして表示する画像の代替テキストを指定します。

placeholder="初期値"

HTML5 では、placeholder 属性で指定した値が、入力欄に初期値として表示されます。

<form method="get" id="form_sample2">  <p>Gender: <br>    <input type="radio" name="gender" value="male"> Male     <input type="radio" name="gender" value="female">  Female  </p>  <p>Favorite Drink(s): <br>    <input type="checkbox" name="drink" value="wine"> Wine     <input type="checkbox" name="drink" value="beer"> Beer     <input type="checkbox" name="drink" value="sake"> Sake  <p>    <input type="submit" value="Submit">   </p></form>

textarea 要素

複数行のテキスト入力欄を作成する場合は、インライン要素の textarea 要素を利用できます。

1行テキスト入力フィールド（input 要素 type="text"）との違いは、入力欄内で任意の改行ができることです。

また、textarea 要素は input 要素とは異なり、開始タグと終了タグのペアで使います。タグの間に記述された内容が初期値として使われます。データの名前を指定する name 属性のほかに、入力エリアの行数、列数を示す rows 属性と cols 属性を指定します。

name 属性

テキスト入力欄の（フォーム部品を識別するための）名前を指定します。この属性の値は、入力されたデータ（または初期値）とセットで送信されます。

rows 属性

入力欄の高さを行数で指定します。入力内容がこの高さを超えた場合は、入力欄にスクロールバーが表示されます。この属性を指定した場合でも、ブラウザにより見た目の高さは異なります。

cols 属性

入力欄の横幅を文字数で指定します。この属性を指定した場合でも、ブラウザにより見た目の高さは異なります。

<textarea name="comment" rows="3" cols="30">この文字列が初期値として表示されます。</textarea>

その他の属性

disabled （disabled="disabled"）

この属性が指定された部品は、選択や書き換えができなくなり、データもサーバーに送信されなくなります。

readonly （readonly="readonly"）

この属性が指定された部品は、書き換えだけができなくなります（選択は可能）。データはサーバーに送られます。

select 要素 / option 要素

セレクトメニューを作成するには、インライン要素の select 要素 と option 要素を利用します。セレクトメニューはドロップダウンメニュー、プルダウンメニュー等と呼ばれる項目リストで、複数の項目からユーザーが任意の項目を選択できます。

メニューの選択肢は option 要素を使って記述します。選択された option 要素の内容が、select 要素の name 属性で指定した名前のデータとして送信されます。

select 要素

select 要素は、セレクトメニュー全体を定義する要素で、以下のような属性を指定できます。

name = "名前"

フォーム部品を識別するための名前を指定します。この属性の値は、option 要素の値とセットで送信されます。

size = "行数"

メニューの表示行数を指定します。この属性の値に 1 を指定するとプルダウン形式のメニューになり、2 以上を指定するとリスト形式のメニューになります（この属性を指定しない場合は、1 を指定した場合と同じになります）。行数を超える項目の選択のためにスクロールバーが自動的に表示されます。

既定値は multiple 属性を指定していない場合は 1 で、multiple 属性を指定している場合は 4 です。

<select name="places1" size="1">  <option value="manhattan">Manhattan</option>  <option value="brooklyn">Brooklyn</option>  <option value="queens">Queens</option>  <option value="bronx">Bronx</option>  <option value="staten">Staten Island</option></select>

<select name="places2" size="3">  <option value="manhattan">Manhattan</option>  <option value="brooklyn">Brooklyn</option>  <option value="queens">Queens</option>  <option value="bronx">Bronx</option>  <option value="staten">Staten Island</option></select>

multiple （multiple="multiple"）

この属性を指定すると、メニューの中から複数の項目を選択できるようになります。（Shift または Ctrl キーを押しながらクリックすると、複数を選択することができます。）

また、この属性を指定するとリスト形式のメニューになり既定の size は 4 になります。必要に応じて表示される項目数を size 属性で調整します。

<select name="places3" size="5" multiple>  <option value="manhattan">Manhattan</option>  <option value="brooklyn">Brooklyn</option>  <option value="queens">Queens</option>  <option value="bronx">Bronx</option>  <option value="staten">Staten Island</option></select>

option 要素

select 要素の子要素として、各項目を option 要素で定義します。以下のような属性を指定できます。

value="値"

その項目が選択されたときにサーバーに送信される値を指定します。この値が指定されていない場合は、option 要素の内容（option 要素内のテキスト）が送信されます。

label="ラベル"

この属性の値は、メニューの選択肢として表示されますが、実際にはこの属性に対応しているブラウザは少ないようです。この属性を省略した場合、またはこの属性に対応していないブラウザでは、option 要素内のテキストがメニューの選択肢として表示されることになります。

selected（selected="selected"）

その項目を初期状態で選択されている状態にします。select 要素に multiple 属性が指定されている場合は、複数の選択肢に selected 属性を指定することができます。

disabled （disabled="disabled"）

この属性が指定された部品は、選択することができなくなります。

5 Boroughs of New York<br><select name="places1" size="1">  <option value="manhattan">Manhattan</option>  <option value="brooklyn">Brooklyn</option>  <option value="queens">Queens</option>  <option value="bronx">Bronx</option>  <option value="staten">Staten Island</option></select>

optgroup 要素

optgroup 要素を利用すると、セレクトメニューの項目（option 要素）をグループ化することができます。項目が多数ある場合に optgroup 要素でグループ化することで、使いやすいメニューにすることができます。以下が指定できる属性です。

label="ラベル"

そのグループのラベルを指定します。値は、グループのラベルとして表示されます。（必須）

disabled （disabled="disabled"）

この属性が指定された部品は、選択することができなくなります。（あまり意味のない属性？）

以下はサンプルです。

New York Area<br><select name="places5" size="1">  <optgroup label="Manhattan">    <option value="uws">Upper West Side</option>    <option value="ev">East Village</option>    <option value="gramercy">Gramercy Park</option>    <option value="les">Lower East Side</option>  </optgroup>  <optgroup label="Brooklyn">    <option value="williamsburg">Williamsburg</option>    <option value="gp">Green Point</option>    <option value="flatbush">Flatbush</option>    <option value="Red Hook">Red Hook</option>  </optgroup></select>

コントロールの名前（name 属性）

a 要素の name 属性は、文書の中での位置を特定するものなので、id 属性と同様に扱われ、一つの文書内で同じ名前を複数回使うことはできません。

input 要素などのフォームのコントロールの name 属性は、そのコントロールが属する form 要素の範囲内だけで名前を指定します。

そのため、同じ文書内に複数のフォームを使う場合、それぞれの input 要素の name 属性が重複しても問題ありません。次は正しい名前の使い方の例です。

<form method="post" action="contact.php" id="form1"> <p>お名前：<input type="text" name="username" /> ...</form>...<form method="post" action="mail_mz.php" id="form2"> <p>受信者名：<input type="text" name="username" /> ...</form>

また、このラジオボタンやチェックボックスのように、同じ form 要素内でも、同一グループに属することを示すために名前を重複させる場合があります。テキスト入力フィールドの場合は、名前が重複すると項目の区別ができなくなるので重複させないようにします（※敢えて同じ名前を付けてグループとして扱うこともできます）。

※ HTML では name 属性の値にハイフンを使用することはできますが、JavaScript や PHP で操作する場合、プログラム上でハイフンは使えないのでフォーム要素やフォームコントロールの name 属性にはハイフンを使わないようにします（アンダーバーやキャメルケースにします）。

コントロールのラベル（label 要素）

コントロールには、name 属性や id 属性で識別子を指定できますが、これらの識別子はデータ送信（プログラム）上の識別子で、表示上は確認することができません。

送信ボタンやセレクトメニューの項目のように直接ラベルを指定できるコントロールもありますが、ほとんどのコントロールにはラベルがありません。

label 要素を利用することで、コントロールにラベルをつけることができます。そして label 要素で特定のテキスト（文字列）をラベルとして定義することで、コントロールと関連付けすることができます。

label 要素を使うと、ラベルのテキスト（文字列）をクリックすることでコントロールが反応する（ラジオボタンが選択されたり、チェックボックスにチェックが入る等）というメリットがあります。

コントロールのラベル付けには、以下の２つの方法があります。

明示的なラベル付け

label 要素の for 属性に、コントロールの id 属性と同じ値を指定する方法です。

<p><label for="email">E-mail: </label><br>    <input type="text" name="email" id="email" value="" size="20"></p>

E-mail:

フォームのコントロールの name 属性は、所属するフォームの中だけでの識別名で、id 属性とは名前空間を共有しません（id 属性は常に文書中で重複不可です）。以下の例では name 属性と id 属性には異なる値を使っています。

<div>  <input type="radio" name="contact" id="email_contact" value="email">    <label for="email_contact"> Email </label>    <input type="radio" name="contact" id="phone_contact" value="phone">    <label for="phone_contact"> Phone </label>    <input type="radio" name="contact" id="mail_contact" value="mail">    <label for="mail_contact"> Mail </label> </div>

for="ID名" (for 属性)

関連付ける部品の識別名（id 属性の値）を指定します。

「明示的なラベル付け」には以下のようなメリットがあります。

• 一つのコントロールに複数のラベルをつける（複数の label 要素が for 属性で同じ id を参照する）ことができます。
• label 要素とコントロールの間に他の要素があっても構いません。

暗黙的なラベル付け

コントロールを label 要素で囲む方法です。

<p>  <label>E-mail: <br>  　　<input type="text" name="email" id="email" value="" size="20">  </label></p>

E-mail:

<div class="margin_top30 margin_bottom30">  <label><input type="radio" name="contact" value="email"> Email </label>    <label><input type="radio" name="contact" value="phone"> Phone </label>    <label><input type="radio" name="contact" value="mail"> Mail </label> </div>

「明示的なラベル付け」との違いは以下のようなものがあります。

• １つのコントロールに複数のラベルをつけることができない。
• フォームのコントロールを table 要素を使って整列しているような場合には使えない（label 要素の内容はインライン要素に限られます）。
• 対応していないブラウザがある。

コントロールのグループ化（fieldset 要素）

フォーム内の複数のコントロールやラベルをグループ化して、フォームを構造化することができます。

コントロールをグループ化するには、fieldset 要素でグループ化する範囲を定義します。多くのブラウザでは、fieldset 要素の周りに自動的に線が引かれます。

legend 要素

fieldset 要素の直後に legend 要素を指定することで、グループ名をキャプションとして表示させることができます。但し、legend 要素は fieldset 要素の直後に一度しか出現することはできません。

<form method="post" id="form_sample3">  <fieldset>    <legend>Required</legend>    <div>    <label for="your_name">Name: </label><br>      <input type="text" name="your_name" id="your_name" value="" size="20">    </div>    <div>    <label for="your_email">E-mail: </label><br>      <input type="text" name="your_email" id="your_email" value="" size="20">    </div>  </fieldset>  <fieldset>    <legend>Options</legend>    <div>      <input type="radio" name="contact" id="email_ct" value="email">        <label for="email_ct"> Email </label>        <input type="radio" name="contact" id="phone_ct" value="phone">        <label for="phone_ct"> Phone </label>        <input type="radio" name="contact" id="mail_ct" value="mail">        <label for="mail_ct"> Mail </label>     </div>  </fieldset>  <div>    <input type="submit" value="Submit"> <input type="reset" value="Reset">  </div></form>

フォームのアクセシビリティ

コントロールに tabindex 属性や accesskey 属性を指定することにより、アクセシビリティの高いフォームを作成することができます。

tabindex 属性

一般にキーボードである項目を選択するためには、TABキーなどで順番に項目を移動していくか、何らかのショートカットキーと組み合わせて直接項目を指定します。

TABキーなどによる選択は、通常、選択可能項目を文書の先頭から順番に移動していくことになりますが、この選択順序を変更すると都合がよい場合があります。

tabindex 属性はひとつの文書全体での選択順序を指定するもので、0〜32767の範囲の任意の数字を割り当てます。番号が小さいものから順番に選択されます。番号が0 または tabindex 属性を割り当てていない要素は、そのあとで順次選択対象になります。

tabindex 属性に負の値（通常は tabindex="-1"）を指定すると、その要素にはキーボードの順次ナビゲーションでは到達できないようになります。言い換えると、その要素にフォーカスが移動しなくなります。（クリックなどの操作でフォーカスすることはできます）。無効にした入力欄などに指定します。（developer.mozilla.org）

tabindex 属性はinput, select, textarea といったフォームコントロールの他に、a 要素や object 要素, button 要素, area 要素にも割り当てることができます（HTML5 では、の全ての要素に指定することができます）。

<form method="post" id="form_sample4">  <p>Name: <br>    <input type="text" name="yourname" value="" size="20" tabindex="1">    <a href="#" class="noscroll" tabindex="3"> ヒント</a>  </p>  <p>E-mail: <br>    <input type="text" name="youremail" value="" size="20" tabindex="2">    <a href="#" class="noscroll" tabindex="4"> ヒント</a>  </p>  <p>    <input type="submit" value="Submit">  </p></form>

tabindex 属性を上記のように指定した場合

tabindex 属性の指定なしの場合

accesskey 属性

accesskey 属性を使うと、TABキーで順番に選択する代わりに、特定の文字（数字）キーとショートカットキー（ブラウザによって異なる）の組合せで直接その要素を選択（あるいは実行）させることができます。

accesskey 属性は、例えば次のような用途に使用することができます。

• キーボードの操作でリンク先を開く。
• キーボードの操作で入力欄を選択する。
• キーボードの操作でコマンドを実行する。

この属性が使えるのは、a, area, button, input, label, legend, textarea の各要素です（HTML5 では、の全ての要素に指定することができます）。

accesskey 属性の値には、その要素に割り当てるアクセスキーを指定します。

例えば、ラジオボタンに accesskey 属性を割り当てると、ショートカットキーでボタンを選択することができます。

<input type="radio" name="area" value="mhtn" accesskey="m" /> Manhattan[m]<input type="radio" name="area" value="brkl" accesskey="b" /> Brooklyn[b]<input type="radio" name="area" value="qns" accesskey="q" /> Queens[q]

accesskeyを働かせる「ショートカットキー」は、機種やブラウザによって異なります。

Windowsの場合のショートカットキーは、以下を参考にしてください。

• IEの場合：キーボードの Alt を押しながら該当キーを押し、その後 Enter キーを押す。
• Chrome と Safari の場合：キーボードの Alt キーを押しながら該当キーを押す。
• Firefox の場合：キーボードの Alt + Shift キーを押しながら該当キーを押す。

アクセスキーを設定する際には、ブラウザのアクセスキー（またはショートカットキー）と競合しないように注意する必要があります。

フォームのレイアウト

フォームのコントロールの要素はインライン要素なので、それらを続けて記述すると改行されずおかしな表示になってしまいます。そのためコントロールの要素は、何らかのブロックレベル要素で囲んでマークアップする必要があります。

1番簡単なのは、p 要素を利用する方法ですが、その他に div 要素や dl 要素、ul 要素を使ってマークアップする方法があります。

すでに、今までのサンプルで p 要素と div 要素を使った方法は行っているので、以下は dl 要素を使ったマークアップの例です。

ラベルを dt 要素、コントロールを dd 要素で定義することで、フォームを明確に構造化することができます。

<form method="post" id="form_sample6">  <dl>    <dt><label for="name">お名前 </label></dt>    <dd><input type="text" name="name" id="name" value="" size="20"></dd>    <dt><label for="email">E-mail </label></dt>    <dd><input type="text" name="email" id="email" value="" size="20"></dd>      <dt><label for="comment">コメント </label></dt>    <dd><textarea name="comment" id="comment" rows="5" cols="30">ご意見やご質問を入力してください。</textarea></dd>      <dd><input type="submit" value="送信"></dd>  </dl></form>

dd 要素は、通常インデントして表示されるので、必要であれば dd 要素の margin-left を調整します。

また、コントロールの上下のスペースも margin で調節できます（dt 要素、dd 要素のどちらに指定してもかまいません）。

#form_sample6 dd {  margin: 10px 0 20px;}

コントロールの幅

<input type="text"> の幅は size 属性、textarea 要素の幅は cols 属性で指定することができますが、ブラウザによって表示が異なってしまいます。そのためこれらの要素には CSS の width プロパティを指定することで幅を調整します。

その際には、クラスセレクタを利用するのが便利です。

<form method="post" id="form_sample7">  <dl>    <dt><label for="name">お名前 </label></dt>    <dd><input class="form_med" type="text" name="name" id="name" value="" size="20"></dd>    <dt><label for="email">E-mail </label></dt>    <dd><input class="form_med" type="text" name="email" id="email" value="" size="20"></dd>      <dt><label for="comment">コメント </label></dt>    <dd><textarea class="form_long" name="comment" id="comment" rows="5" cols="30">ご意見やご質問を入力してください。</textarea></dd>      <dd><input type="submit" value="送信"></dd>  </dl></form>

以下は、幅を % で指定していますが、デザインに合わせて幅の単位等を指定します。

.form_med {  width: 60%;}.form_long {  width: 90%;}

ボーダーの指定

コントロールのボーダーは、border 関連プロパティで設定できます。

また、padding プロパティでパディングを指定することで、ボーダーと内容領域の間の余白を調整することができます。

.form_med, .form_long {  border-top: 1px solid #888;  border-right: 1px solid #ccc;  border-bottom: 1px solid #ccc;  border-left: 1px solid #888;  border-radius: 4px;  padding: 5px;}

フォントの指定

テキストエリアは、等幅フォントにすることがよくあります。その場合は、textarea 要素に font-family プロパティで「monospace」や「Carrier New」などのフォント指定することで、テキストエリアが等幅フォントで表示されます。

textarea {  font-family: Consolas, 'Courier New', Courier, Monaco, monospace;}

:focus 擬似クラスの指定

:focus 擬似クラスを利用すると、コントロールがフォーカスされた時のスタイルを指定することができます。

.form_med:focus, .form_long:focus {  border-color: #aadbe8;  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);  background-color: #fcfcfc;}

fieldset 要素と legend 要素のスタイル

多くのブラウザで fieldset 要素の周りには自動的にボーダーが引かれ、legend 要素は fieldset 要素の上部のボーダー上に表示されます。

fieldset 要素のボーダーは、CSS のボーダー関連のプロパティで調整することができます。

legend 要素は width, border, text-align, background 等のプロパティを使ってスタイルを指定することができます。

<form method="post" id="form_sample10">  <fieldset>  <legend>お問い合わせ</legend>  <dl>    <dt><label for="name">お名前 </label></dt>    <dd><input class="form_med" type="text" name="name" id="name" value="" size="20"></dd>    <dt><label for="email">E-mail </label></dt>    <dd><input class="form_med" type="text" name="email" id="email" value="" size="20"></dd>      <dt><label for="comment">コメント </label></dt>    <dd><textarea class="form_long" name="comment" id="comment" rows="5" cols="30">ご意見やご質問を入力してください。</textarea></dd>      <dd><input type="submit" value="送信"></dd>  </dl>  </fieldset></form>

fieldset {  padding: 20px;  border: 1px solid #ccc;  border-radius: 8px;}legend {  padding: 5px;  border: 1px solid #B5CEBE;  width: 200px;  text-align: center;  background-color:#F2FBF7;  font-weight: bold;  position: relative;}

dt 要素と dd 要素を並べるレイアウト

以下のように dt 要素のスタイルを指定することで、dt 要素と dd 要素を並べたレイアウトができます。

• display に block を指定
• float に left を指定
• clear に left を指定
• width に適当な幅を指定（表示する文字による）
• text-align に right を指定

その他、マージン等を指定して調整します。また、送信ボタンの位置を調整するために、この例ではクラスを付けてマージンを設定しています。

dt{  display: block;  float: left;  clear: left;  width: 70px;  margin: 0 10px 4px 0;  padding: 0;  border: 0;  text-align: right;  line-height: 36px;}dd.submit {  margin-left: 70px;}

<form method="post" id="form_sample11">  <fieldset>  <legend>お問い合わせ</legend>  <dl>    <dt><label for="name">お名前 </label></dt>    <dd><input class="form_med" type="text" name="name" id="name" value="" size="20"></dd>    <dt><label for="email">E-mail </label></dt>    <dd><input class="form_med" type="text" name="email" id="email" value="" size="20"></dd>      <dt><label for="comment">コメント </label></dt>    <dd><textarea class="form_med" name="comment" id="comment" rows="5" cols="30">ご意見やご質問を入力してください。</textarea></dd>      <dd class="submit"><input type="submit" value="送信"></dd>  </dl>  </fieldset></form>