HTML FORM

ボタン等のフォーム部品を配置するのに使用します。フォーム部品には、以下の種類があります。

フォーム部品は <FIELDSET> タグでグループ化することができます。

XML文書をXSLTスタイルシートでHTML文書に変換した場合、FORMからの送信データは UTF-8 でエンコーディングされます(エンコーディング方法を指定しても無視されます)。POST先(サーブレットやCGI)でエンコーディング方法を UTF-8 以外に指定すると文字化けしてしまいます。

フォームのデフォルトのボタンは、最初のサブミットボタンである。

ひとつのフォームに複数のサブミットボタンがある場合

<form action="http://itref.fc2web.com">
<input type="submit" name="button1" value="value">
<input type="submit" name="button2" value="value">
</form>

button1をクリックした場合、 button1=value というデータが送信される。button2をクリックした場合、 button2=value というデータが送信される。

<form action="http://itref.fc2web.com">
<input type="submit" name="button" value="button1">
<input type="submit" name="button" value="button2">
</form>

button1をクリックした場合、 button=button1 というデータが送信される。button2をクリックした場合、 button=button2 というデータが送信される。

書式

<form id="ID" class="クラス" style="スタイル" title="タイトル" lang="言語" dir="方向" onclick="スクリプト" ondblclick="スクリプト" onmousedown="スクリプト" onmouseup="スクリプト" onmouseover="スクリプト" onmousemove="スクリプト" onmouseout="スクリプト" onkeypress="スクリプト" onkeydown="スクリプト" onkeyup="スクリプト" action="URI" method="GET|POST" enctype="MIMEタイプ" target="対象" onsubmit="スクリプト" onreset="スクリプト" > ... </form>

開始タグと終了タグは省略できません。

内容モデル

開始タグと終了タグの間にはブロック要素(ただし、FORM 要素を除く)または SCRIPT 要素が現れます。

属性

HTMLのバージョンにより、指定できる属性が異なります。HTMLのバージョンごとに指定できる属性の一覧を次の表に示します。

form要素の属性
属性 HTML5 HTML 4.01
Transitional
HTML 4.01
Strict
XHTML 1.0
Strict
action 必須 必須 必須 必須
autocomplete 省略可能 N/A N/A N/A
method 省略可能 省略可能 省略可能 省略可能
enctype 省略可能 省略可能 省略可能 省略可能
accept 省略可能 省略可能 省略可能 省略可能
name 省略可能 省略可能 省略可能 -
onsubmit 省略可能 省略可能 省略可能 省略可能
onreset 省略可能 省略可能 省略可能 省略可能
target N/A 省略可能 N/A N/A
accept-charset 省略可能 省略可能 省略可能 省略可能
action
サブミット(実行)されたときの動作を指定します。具体的には、実行する CGIやサーブレット、JSP などの URI を記述します。必須属性で省略できません。
autocomplete

on (デフォルト)を指定した場合、フォーム内のinput要素でオートコンプリート(Webブラウザによる入力候補及び自動補完)が有効になる。 off を指定した場合、フォーム内のinput要素でオートコンプリートが無効になる。ただし、Webブラウザによっては、この指定が無視されることがある。

method
サーバーにクエリ送信する形式を指定します。
method 属性値
意味
GET 送信するデータが URL 中に埋め込まれます。(規定値)
POST 送信するデータが URL とは別に送られます。
enctype
MIMEタイプを指定します。
enctype 属性
属性値 意味
application/x-www-form-urlencoded エンコード(変換)された状態で送信します。(規定値)
multipart/form-data 添付ファイルとして送信します。フォームでファイルを送信する場合に指定します。
text/plain プレーンテキストで送信します。フォームの内容をメールで送信する場合に指定します。
name
スクリプティングで使用するためのフォーム名
onsubmit
Submitボタンを押したときに実行するスクリプトを記述します。
onreset
Resetボタンを押したときに実行するスクリプトを記述します。
target
リンク先のページを開くときに現在のウィンドウを使うか、新しいウィンドウを開くかを指定します。省略した場合は、現在のウィンドウを使います。
target 属性
属性値 意味
_blank 新しいウィンドウを開きます
_self 現在のウィンドウを使います
名前 指定した名前のフレームを使います
_top フレーム分割している場合、フレームを解除して現在のウィンドウを使います

DTD

HTMLの各要素はDTDによって定義されています。form要素がDTDでどのように定義されているかを見るには、次のリンクをクリックしてください。

<LABEL>

<label> はフォームの部品にラベルをつける HTML タグです。ラベルとは、フォームの部品に関連付けられた文字列のことです。例えば、チェックボックスにラベルを付けると、ラベルの文字列をクリックしてもチェックボックスをクリックしたことになります。

書式

<label id="ID" class="クラス" style="スタイル" title="タイトル" lang="言語" dir="方向" onclick="スクリプト" ondblclick="スクリプト" onmousedown="スクリプト" onmouseup="スクリプト" onmouseover="スクリプト" onmousemove="スクリプト" onmouseout="スクリプト" onkeypress="スクリプト" onkeydown="スクリプト" onkeyup="スクリプト" accesskey="キー" onfocus="スクリプト" onblur="スクリプト" > 0個以上のインライン要素 </label>

開始タグと終了タグは省略できません。開始タグと終了タグの間にはインライン要素(LABEL 要素を除く)が任意回数表れます。

属性

属性 説明 HT HS XT XS
accesskey 文字 A A A A
for 文字列 関連付けるフォーム部品の ID を指定します。 A A A A
onfocus スクリプト A A A A
onblur スクリプト A A A A

HT : HTML 4.01 transitional
HS : HTML 4.01 strict
XT : XHTML 1.0 transitional
XS : XHTML 1.0 strict
R : 指定必須
A : 指定可能(省略可)
N/A : 指定不可

DTD

HTMLの各要素はDTDによって定義されています。label要素がDTDでどのように定義されているかを見るには、次のリンクをクリックしてください。

HTMLタグ <label> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
<input type="checkbox" id="checkbox1">
文字列をクリックしてもチェックされません<br>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">文字列をクリックするとチェックされます</label>
</form>
文字列をクリックしてもチェックされません

<SELECT>

フォームの中に選択肢フィールドを配置します。選択肢フィールドを作成しただけでは、中身の選択肢はありません。選択肢フィールド内の選択肢は<OPTION>タグで配置します。<FORM>と</FORM>の間に記述しなければなりません。

書式

<select id="ID" class="クラス" style="スタイル" title="タイトル" lang="言語" dir="方向" onclick="スクリプト" ondblclick="スクリプト" onmousedown="スクリプト" onmouseup="スクリプト" onmouseover="スクリプト" onmousemove="スクリプト" onmouseout="スクリプト" onkeypress="スクリプト" onkeydown="スクリプト" onkeyup="スクリプト" disabled multiple name="名前" size=" size " tabindex="n" onfocus="スクリプト" onblur="スクリプト" onchange="スクリプト" >
option要素
</select>

開始タグと終了タグは省略できません。

内容モデル

開始タグと終了タグの間にはOPTGROUP要素タイプまたはOPTION要素タイプが 1 回以上現れます。

属性

属性 説明 HT HS XS
disabled なし disabled属性を指定したselect要素は、ユーザの入力を受け付けない。このとき、ブラウザによっては入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。disabled属性を指定したselect要素の値は、サブミット時にフォームデータを送信しない。 A A A
multiple なし 複数の項目を同時に選択できるよう指定します。省略した場合は、選択できる数はひとつだけです。 A A A
name 文字列 名前を指定します。 A A A
size 数値 一度に表示する選択肢の数を指定します。省略した場合は"1"となります。 A A A

属性はすべて省略可能です。

name
名前を指定します。
multiple
複数の項目を同時に選択できるよう指定します。省略した場合は、選択できる数はひとつだけです。
size
一度に表示する選択肢の数を指定します。省略した場合は"1"となります。

DTD

HTMLの各要素はDTDによって定義されています。select要素がDTDでどのように定義されているかを見るには、次のリンクをクリックしてください。

使用例と表示サンプル

HTMLタグ <select> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
<select>
<option>選択肢 1</option>
<option>選択肢 2</option>
<option>選択肢 3</option>
</select>
</form>

一度に表示する選択肢の数を指定したSELECT要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
<select size="2">
<option>選択肢 1</option>
<option>選択肢 2</option>
<option>選択肢 3</option>
</select>
</form>

複数選択可能なSELECT要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
<select multiple>
<option>選択肢 1</option>
<option>選択肢 2</option>
<option>選択肢 3</option>
</select>
</form>

選択不可能なSELECT要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
<select disabled>
<option>選択肢 1</option>
<option>選択肢 2</option>
<option>選択肢 3</option>
</select>
</form>

イベント属性の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form name="form1">
 <select onfocus="onFocus()" onblur="onBlur()" onchange="onChange()">
  <option>選択肢 1</option>
  <option>選択肢 2</option>
  <option>選択肢 3</option>
 </select>
 イベント: <input type="text" name="text1" readonly></input>
</form>
<script>
function onFocus () {
    document.form1.text1.value = "onfocus";
}
function onBlur () {
    document.form1.text1.value = "onblur";
}
function onChange () {
    document.form1.text1.value = "onchange";
}
</script>
イベント:

<OPTGROUP>

開始タグ<OPTGROUP>と終了タグ</OPTGROUP>の間にある複数の <OPTION> をグループ化します。 <SELECT>の選択肢をカテゴリ分けして表示させるときに使用します。 Internet Explorer 5 では未サポートのようです。

書式

<optgroup id="ID" class="クラス" style="スタイル" title="タイトル" lang="言語" dir="方向" onclick="スクリプト" ondblclick="スクリプト" onmousedown="スクリプト" onmouseup="スクリプト" onmouseover="スクリプト" onmousemove="スクリプト" onmouseout="スクリプト" onkeypress="スクリプト" onkeydown="スクリプト" onkeyup="スクリプト" disabled label="文字列"> ... </optgroup>

開始タグと終了タグは省略できません。開始タグと終了タグの間にはOPTION要素タイプが 1 回以上現れます。

属性

属性 説明 HT HS XS
disabled なし disabled属性を指定したoptgroup要素は、ユーザの入力を受け付けない。このとき、ブラウザによっては入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。disabled属性を指定したoptgroup要素の値は、サブミット時にフォームデータを送信しない。 A A A

label 属性は必須です。その他の属性は省略できます。

disabled
省略可能。この属性を指定すると、選択不可能になります。
label
グループのラベルを指定します。

DTD

HTMLの各要素はDTDによって定義されています。optgroup要素がDTDでどのように定義されているかを見るには、次のリンクをクリックしてください。

HTMLタグ <optgroup> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
<select>
<optgroup label="美勇伝">
<option>石川梨華</option>
<option>三好絵梨香</option>
<option>岡田唯</option>
</optgroup>
<optgroup label="W">
<option>辻希美</option>
<option>加護亜依</option>
</optgroup>
</select>
</form>

<OPTION>

選択肢フィールドに項目を配置します。 <SELECT>と</SELECT>の間に記述することができます。 <OPTGROUP>タグにより、項目をグループ化することができます。

書式

<option id="ID" class="クラス" style="スタイル" title="タイトル" lang="言語" dir="方向" onclick="スクリプト" ondblclick="スクリプト" onmousedown="スクリプト" onmouseup="スクリプト" onmouseover="スクリプト" onmousemove="スクリプト" onmouseout="スクリプト" onkeypress="スクリプト" onkeydown="スクリプト" onkeyup="スクリプト" disabled label="..." selected value="..."> 選択肢に表示する文字列 </option>

HTML では終了タグを省略できます。XHTML では省略できません。開始タグと終了タグの間には文字列が現れます。

属性

属性 説明 HT HS XS
disabled なし disabled属性を指定したoption要素は、ユーザの入力を受け付けない。このとき、ブラウザによっては入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。disabled属性を指定したoption要素の値は、サブミット時にフォームデータを送信しない。 A A A
disabled
省略可能。この属性を指定すると、選択不可能になります。
label
選択肢に表示する文字列を指定します。label属性を省略すると、<option>と</option>の間の文字列が表示されます。 Internet Explorer 6 ではlabel属性を指定しても選択肢には表示されないようです。
selected
この属性を指定すると、あらかじめ選択された状態になります。
value
この選択肢が選択された場合の値を指定します。value属性を省略すると、<option>と</option>の間の文字列が選択されたときの値となります。

DTD

HTMLの各要素はDTDによって定義されています。option要素がDTDでどのように定義されているかを見るには、次のリンクをクリックしてください。

HTMLタグ <option> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
 <select>
  <option>spring</option>
  <option>summer</option>
  <option>fall</option>
  <option>winter</option>
 </select>
</form>

<FIELDSET>

フォームの中の部品をグループ化します。グループ化した部品は枠線で囲まれます。 <FORM> と </FORM> の間に記述します。

<LEGEND> タグでフィールドセットに見出しを付けることができます。

書式

<fieldset id="ID" class="クラス" style="スタイル" title="タイトル" lang="言語" dir="方向" onclick="スクリプト" ondblclick="スクリプト" onmousedown="スクリプト" onmouseup="スクリプト" onmouseover="スクリプト" onmousemove="スクリプト" onmouseout="スクリプト" onkeypress="スクリプト" onkeydown="スクリプト" onkeyup="スクリプト" > ... </fieldset>

開始タグと終了タグは省略できません。

DTD

HTMLの各要素はDTDによって定義されています。fieldset要素がDTDでどのように定義されているかを見るには、次のリンクをクリックしてください。

HTMLタグ <fieldset> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
 <fieldset>
  ユーザ名 <input type="text"> パスワード <input type="password">
 </fieldset>
</form>

ユーザ名 パスワード

<LEGEND>

フィールドセットに見出しを付けます。<FIELDSET> と </FIELDSET> の間に記述します。

書式

<legend id="ID" class="クラス" style="スタイル" title="タイトル" lang="言語" dir="方向" onclick="スクリプト" ondblclick="スクリプト" onmousedown="スクリプト" onmouseup="スクリプト" onmouseover="スクリプト" onmousemove="スクリプト" onmouseout="スクリプト" onkeypress="スクリプト" onkeydown="スクリプト" onkeyup="スクリプト" accesskey="キー" > 見出し </legend>

開始タグと終了タグは省略できません。

属性

HTMLのバージョンにより、指定できる属性が異なります。HTMLのバージョンごとに指定できる属性の一覧を次の表に示します。

legend要素の属性
属性 HTML 4.01
Transitional
HTML 4.01
Strict
XHTML 1.0
Strict
accesskey
align × ×

◎ …… 指定必須
○ …… 指定可能(省略可)
× …… 指定不可

DTD

HTMLの各要素はDTDによって定義されています。legend要素がDTDでどのように定義されているかを見るには、次のリンクをクリックしてください。

HTMLタグ <legend> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
 <fieldset>
  <legend>ログイン</legend>
  ユーザ名 <input type="text"> パスワード <input type="password">
 </fieldset>
</form>

ログイン ユーザ名 パスワード

スポンサーリンク