HTMLタグ辞典×ＣＳＳ

<form action="★1" method="★2" enctype="★3" target="★4"> ～ </form>

• ★1：データの送信先（URL）
• ★2：get、post（データの送信方法）
• ★3：データを送信する際のMIMEタイプ
• ★4：ウィンドウ名

フォームを利用して、アンケート等、ユーザーがデータを入力して送信するような仕組みをWebページに設定できます。テキストの入力フィールドや送信ボタンなど、フォームの部品を作成する様々なタグは、すべてこの<form> ～</form>タグの間に配置します。

• <form> ～</form>
  この範囲が入力フォームであることを示します。
• [action属性]
  フォームに入力されたデータを処理するCGIなどのプログラムのURLを指定します。この属性を省略することはできません。
• [method属性]
  入力されたデータの送信形式を設定します。「get」と「post」のどちらかを使います。「post」を使用するのが一般的です。
• [enctype属性]
  method="post"の時、フォームをどのような形式にエンコードするのかを指定します。指定できる値は「application/x-www-form-urlencoded」（初期値）か「multipart/form-date」で、省略した場合は前者として扱われます。
• [target属性]
  データ送信後の結果を表示させるウィンドウ名を指定します。

<input type="submit" ★>、   <input type="reset" ★>

• ★：value="表示名"

フォームの内容を送信するボタン「<input type="submit">」と、書いた内容をリセットするボタン「<input type="reset">」をそれぞれ作成できる。フォームに入力したデータを送信してもらうには「<input type="submit">」が必須。

<input type="button" ★>

• ★：name="名前"
• ★：value="表示名"

汎用ボタンを設置する。このボタン自体に既定の動作はありません。JavaScriptなどとともに使用されます。

<button type="#" ★> ～ </button>

• #：submit, reset, button
• ★：name="名前"
• ★：value="送信されるテキスト"

type属性に指定した値によって役割が変わるボタンを設置します。

• [type属性]
  submit | 送信ボタン（初期値）
  reset | リセットボタン
  button | 汎用の押しボタン

<input type="image" ★>

• ★：src="画像ファイル名（URL）"
• ★：name="名前"
• ★：alt="画像の代わりのテキスト"

ボタンを任意の画像を使って表示する。

<input type="text" ★>

• ★：size="フィールド幅"（半角文字数）
• ★：name="名前"
• ★：value="デフォルトで表示されるテキスト"
• ★：maxlength="入力可能な最大文字数"

１行のテキスト入力フィールドを設置する。「text」の代わりに「password」を指定すると、入力した文字が直接表示されず「●」等で置き換えて表示される。

<textaea ★> ～ </textaea>

• ★：name="名前"
• ★：cols="フィールド幅"（半角文字数）
• ★：rows="行数"

複数行の入力が出来るテキスト入力フィールド（テキストボックス）を設置する。

<input type="radio" ★※>

• ★：name="名前"
• ★：value="送信されるテキスト
• ※：checked（初期状態にて、これで指定したボタンを選択）

<input>タグのtype属性に「radio」を指定すると、選択しから１つを選択するためのラジオボタンを設置できます。

<input type="checkbox" ★※>

• ★：name="名前"
• ★：value="送信されるテキスト
• ※：checked（初期状態にて、これで指定したボタンを選択）

<input>タグのtype属性に「checkbox」を指定すると、複数の選択肢を選択可能なチェックボックスを設置できます。

<input type="hidden" ★>

• ★：name="名前"
• ★：value="送信されるテキスト

<input>タグのtype属性に「hidden」を指定すると、ユーザーには表示されずに送信されるテキストを指定できます。

<input type="file" ★>

• ★：name="名前"

<input>タグのtype属性に「file」を指定すると、ユーザーにファイルを選択・アップロードさせるための入力フィールドとボタンを設置します。

なお、ファイルを送信させるフォームには、<form>タグのentype属性に「multipart/form-date」を指定します。

<select ★><option ◇> ～ </option></select>

• ★：name="名前"
• ◇：value="送信されるテキスト
• ※：selected（初期状態にて、これで指定したボタンを選択）

<select> ～ </select>タグでメニューを設置します。メニュー内の選択肢は<option>タグを使って指定し、<option> ～ </option>タグ内のテキストがメニューに表示される項目になります。

このように作成したメニューは、一般的にプルダウンメニューの形式で表示されます。

<select size="#"　★※1><option ◇※2> ～ </option></select>

• #：表示行数
• ★：name="メニュー名"
• ※1：multiple（複数の項目を選択可にする）
• ◇：value="送信されるテキスト
• ※2：selected（初期状態にて、これで指定したボタンを選択）

<select>タグに表示行数を指定するsize属性を設定すると、リストボックス形式のメニューを作成できます。個々の選択肢は<option>タグを使って指定し、<option> ～ </option>タグ内のテキストがメニューに表示される項目になります。

<optgroup label="★"><option label="◇"> ～ </option></option>

• ★：グループ名
• ◇：簡略化した項目名

メニューの項目をグループ化するには<optgroup>タグを使います。<select>タグと<option>タグの間に記入し、作成されたメニューの選択項目をグループ化します。

<fieldset> ～ </fieldset>、  <legend> ～ </legend>

フォームを構成する様々な部品をグループ化するには<fieldset> ～ </fieldset>タグを使います。<legend>タグは、そのグループ化された部品にキャプション（タイトル、等）をつけるタグで、<fieldset> ～ </fieldset>タグ内の一番最初に置きます。

<label> ～ </label>  <label for="#"> ～ /label>

• #：参照する部品のid属性と同じ値

フォームを構成する様々な部品と、ラベルを関連付けます。ラベルでひとくくりにすると、ラジオボタンやチェックボックス等が、テキスト部分をクリックしてもチェックできるようになります。