HTML フォームの設置

HTML form 要素やフォームの部品などの使い方や設置方法に関する説明やサンプルを掲載しています。

目次

更新日:2018年08月29日

作成日:2015年08月13日

フォームはお問い合わせやアンケートなどで、ユーザーが入力した内容をサーバー上のプログラムにデータとして送信するための仕組みです。

フォームに関連付けられるプログラムは、原則として1つだけです。1つのフォームの中で送信ボタンを複数設置するような使い方はできません。そのような場合は、フォームを分けて設計する必要があります。

form 要素

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

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

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

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

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

action 属性
action = "URL" (必須)
フォームの内容を処理するプログラムの URL (データの送信先)を指定します。
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 タグの action 属性

<form>タグの action属性が「""」(空)である場合は、自分自身に送信することを意味します。

$_SERVER['PHP_SELF']も自分自身への送信になりますが、$_SERVER['PHP_SELF']を action 属性値として直接 <form> タグに記述すると XSS 脆弱性となるので、絶対に避けてください。「""」(空)にするか、以下のように htmlspecialchars() 関数でエスケープします。

<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 属性には以下のような値を指定することができます。

type = "text"
1行テキスト入力フィールドを生成します。通常のテキスト(名前、E-mailアドレス、住所等)を入力するフィールドです。2行以上にわたる長い文章を入力させたい場合には、textarea 要素を使用します。
データを受信したプログラムがそれぞれの項目を区別できるようにするために name 属性でデータに名前を付けます。また、size 属性でコントロールの幅を「文字数」で指定します。
送信されるデータは、name 属性と入力されたデータ(または value 属性の値)とセットで送信されます。
First Name <input type="text" name="first-name" size="15">
First Name
type = "password"
パスワード入力ボックスを生成します。入力したテキストが●やアスタリスク(*)などに置き換えて表示されます。ただし、データが暗号化されるわけではないので(通常のテキストとして送信されるため)、セキュリティが高いとは言えません。セキュリティの確保には別途 SSL 等の暗号化技術を利用する必要があります。
送信されるデータは、name 属性と入力されたデータ(または value 属性の値)とセットで送信されます。
パスワード形式の入力欄では初期値(value 属性の値)の設定は行わないようにします。(ソースを見るとパスワードの文字列を確認できてしまいます)
Password : <input type="password" name="pw" size="15">
Password :
type = "checkbox"
チェックボックスを生成します。チェックボックスは複数選択が可能で、checked 属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。
複数の input 要素で同じ名前を共有することができ、同時に複数の項目を選択することができます。それぞれに異なる value 属性を与えます。
送信されるデータは、name 属性と value 属性の値とセットで送信されます。
<input type="checkbox" name="drink" value="wine"> Wine 
<input type="checkbox" name="drink" value="beer"> Beer
Wine 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
Email Phone 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 要素は、同じ名前を持つ1つのグループとして扱われます。

value 属性

value 属性は、コントロールの種類によって、以下のように値の意味が異なります。

type="text" , type="password"
入力フィールドの初期値を指定します。初期値となるテキストがない場合は、 value="" と空の値を指定しておくと良いです。
type="checkbox", type="radio"
選択状態のときに送信されるデータの値を指定します。
type="submit", type="reset", type="button"
ボタンの上に表示されるラベル(文字列)を指定します。
type="image", type="hidden"
送信されるデータの値を指定します。
type="file"
選択するファイルの初期値を指定します。

size 属性

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

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

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

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

<form action="" 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>

Name:

E-mail:

Gender:
Male Female

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

上記の例では、 action="" として送信先を自分自身に指定しています。また、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 属性で指定した値が、入力欄に初期値として表示されます。

チェックボックスとラジオボタンの関連付け

チェックボックスやラジオボタンは、複数設置してユーザーの選択を促すのが一般的です。複数のチェックボックスやラジオボタンを関連付ける(1つのグループとして認識させる)には name 属性で共通の(同じ)名前を各 input 要素に指定します。

<form action="" 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>

Gender:
Male Female

Favorite Drink(s):
Wine Beer Sake

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 を指定した場合と同じになります)。行数を超える項目の選択のためにスクロールバーが自動的に表示されます。
<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> 
size = 1 または size の指定なし
<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 キーを押しながらクリックすると、複数を選択することができます。)
<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> 
5 Boroughs of New York

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> 
New York Area

コントロールの名前(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 要素内でも、同一グループに属することを示すために名前を重複させる場合があります。テキスト入力フィールドの場合は、名前が重複すると項目の区別ができなくなるので重複させないようにします。

コントロールのラベル(label 要素)

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

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

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

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

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

明示的なラベル付け

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

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


フォームのコントロールの 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>

<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>

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

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

コントロールのグループ化(fieldset 要素)

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

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

legend 要素

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

<form action="" 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>
Required


Options

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

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

tabindex 属性

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

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

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

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

<form action="" 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 属性を上記のように指定した場合

Name:
ヒント

E-mail:
ヒント

tabindex 属性の指定なしの場合

Name:
ヒント

E-mail:
ヒント

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 キーを押しながら該当キーを押す。
Manhattan[m] Brooklyn[b] Queens[q]

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

フォームのレイアウト

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

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

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

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

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

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

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

以下は、CSS のサンプルです。ラベルを囲んでいる dt 要素のスタイルも指定しています。

#form_sample6 dd {
  margin: 10px 0 20px;
}
#form_sample6 dt {
  padding-left: 10px;
  border-left: 10px solid #68A6F9;
  margin-left: 8px;
}

コントロールの幅

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

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

<form action="" method="post" id="form_sample7">
  <dl>
    <dt><label for="name">お名前 </label></dt>
    <dd><input class="form_med" type="text" name="name" value="" size="20"></dd>
    <dt><label for="email">E-mail </label></dt>
    <dd><input class="form_med" type="text" name="email" value="" size="20"></dd>  
    <dt><label for="comment">コメント </label></dt>
    <dd><textarea class="form_long" name="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 action="" method="post" id="form_sample10">
  <fieldset>
  <legend>お問い合わせ</legend>
  <dl>
    <dt><label for="name">お名前 </label></dt>
    <dd><input class="form_med" type="text" name="name" value="" size="20"></dd>
    <dt><label for="email">E-mail </label></dt>
    <dd><input class="form_med" type="text" name="email" value="" size="20"></dd>  
    <dt><label for="comment">コメント </label></dt>
    <dd><textarea class="form_long" name="comment" rows="5" cols="30">ご意見やご質問を入力してください。</textarea></dd>  
    <dd><input type="submit" value="送信"></dd>
  </dl>
  </fieldset>
</form>
fieldset {
  padding: 20px;
  border: 1px solid #aaa;
  border-radius: 8px;
}
legend {
  padding: 5px;
  border: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  width: 200px;
  text-align: center;
  background-color: #EEE;
  border-radius: 4px;
  font-weight: bold;
  position: relative;
  top: 10px;
}
お問い合わせ

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