【HTML】 body要素内のタグフォーム編

フォームを構成するには、丁寧にマークアップし、各種フォーム用のタグを適切に配置しなければなりません。

マークアップ例と共に、それぞれのフォーム用タグの役割を詳しく解説します。

フォーム

<h2>お問い合わせ<h2/>
<p>当サイトへのお問い合わせはこちらからどうぞ。</p>
<form method="post" action="./postmail.cgi">
 <dl>
  <dt><label for="name">お名前</label></dt>
  <dd><input type="text" size="50" name="お名前" id="name" value="" /></dd>
  <dt><label for="email">メールアドレス</label></dt>
  <dd><input type="text" size="50" name="メールアドレス" id="email" value="" /></dd>
  <dt><label for="age">年齢</label></dt>
  <dd>
   <select size="5" name="年齢" id="age">
    <option value="10">～10代</option>
    <option value="20">20代</option>
    <option value="30">30代</option>
    <option value="40">40代</option>
    <option value="50">50代～</option>
   </select>
  </dd>
  <dt><label for="message">お問い合わせ内容</label></dt>
  <dd><textarea cols="40" rows="7" name="お問い合わせ内容" id="message"></textarea></dd>
 </dl>
 <p><input type="submit" value="送信する" /></p>
</form>

form要素

<form method="post" action="./postmail.cgi">
</form>

問い合わせフォームなど、各種フォームを形成する要素がform要素です。

method属性に、各種フォーム情報の送信方法を指定します。
get、post等を送信方法によって指定します。
一般的なメールフォームやお問い合わせフォームではpostを指定する場合が多いです。

action属性には、送信先のURI（CGI等の場所）を指定します。

フォームはform要素単体で機能するものではありません。
CGIやPHPなど、ウェブで動作するプログラムと併せて利用することによって初めて機能します。

難しくて分からないうちは、有志の方が配布しているフリーのCGI等がありますので、そういったものをお借りして手をつけ始めるのが良いでしょう。

form要素はフォームを構成するパーツの入れ物として使います。
よって、form要素の中身はしっかりと自分でマークアップする必要があります。

例えばtable要素で表としてまとめたり、dl要素で「ラベル」と「入力欄」を組み合わせたりして構成します。

label要素

<label for="name">お名前</label>

label要素は、中身をラベルとして指定します。
for属性で対応するinput要素を設定します。

ラベルとして指定された中身のテキストは、対応するinput要素と関連付けされます。

通常はinput要素を選択しないと、ユーザーは入力や選択ができません。
しかし、label要素で関連付けすることにより、中身のテキストをクリックしても入力や選択ができるようになります。

些細な点ですが、ユーザーの利便性の向上につながります。

input要素

<!-- テキスト入力フィールド -->
<input type="text" size="50" id="name" value="" />

<!-- パスワード入力フィールド -->
<input type="password" size="50" id="password" value="" />

<!-- ファイルアップロード -->
<input type="file" id="file" value="" />

<!-- チェックボックス -->
<input type="checkbox" id="checkbox" value="" />

<!-- ラジオボタン -->
<input type="radio" id="radio" name="group01" value="" />

<!-- 不可視フィールド -->
<input type="hidden" id="hidden" value="" />

<!-- 送信ボタン -->
<input type="submit" id="submit" value="送信する" />

<!-- 取り消しボタン -->
<input type="reset" id="reset" value="リセットする" />

<!-- 汎用ボタン -->
<input type="button" id="button" value="汎用ボタン" />

input要素は、フォーム内のパーツを埋め込む要素です。
type属性を指定することにより、各種パーツとして機能します。

例として、テキスト入力欄（text）、チェックボックス（checkbox）や送信ボタン（submit）などを設定できます。

input要素パーツタイプ別関連する属性値のまとめ

以下の各種属性を、用途に応じて指定します。

（type=”text”）テキスト入力フィールド: （maxlength=””）最大入力文字数を指定
（value=””）入力フィールドの初期値を指定
（type=”password”）パスワード入力フィールド: （maxlength=””）最大入力文字数を指定
（value=””）入力フィールドの初期値を指定
（type=”file”）ファイルアップロード: 特に固有の指定する属性はなし。
ファイルを受け取るためのCGI等を設置する必要あり。
（type=”checkbox”）チェックボックス: （checked=”checked”）チェックボックスをあらかじめチェックした状態にする
（value=””）送信される値を指定
（type=”radio”）ラジオボタン: （name=””）同じname属性を持つラジオボタンで、一つのラジオボタングループを形成する
（checked=”checked”）ラジオボタンをあらかじめチェックした状態にする
（value=””）送信される値を指定
（type=”hidden”）不可視フィールド: ユーザーが変更できない情報や、見せる必要のない情報を埋め込む際に使用
（value=””）フィールドの初期値を指定
（type=”submit”）送信ボタン: fotm要素のaction属性で指定したアクションを呼び出すボタンを設置
（value=””）ボタンに表示するテキストを指定
（type=”reset”）取り消しボタン: 入力した情報を全てリセットするボタンを設置
（value=””）ボタンに表示するテキストを指定
（type=”button”）汎用ボタン: 主にjavascriptで使用する汎用ボタンを設置
（value=””）ボタンに表示するテキストを指定

input要素共通で使用できる属性

（accesskey=””）: Altを押しながら指定したキーを押した時にこの部品にフォーカスが移動する
ブラウザのショートカットキーとバッティングしないよう注意が必要
（tabindex=””）: Tabキーで選択する順番を指定する
ユーザーの意思に反した順番にならないよう注意が必要
（disabled=”disabled”）: パーツを無効化する

textarea要素

<textarea cols="40" rows="7" tabindex="3"></textarea><!-- 中身には初期値を入力 -->

表示サンプル

テキストエリア（大きなテキスト入力パーツ）を表示します。
お問い合せ内容など長めの文章を入力する際に使用します。

テキストエリアには、以下の属性を指定できます。
必要に応じて、各種属性を指定してください。

textarea要素使用できる属性

（cols=””）: 横幅を指定する
（rows=””）: 縦幅を指定する
（disabled=”disabled”）: 入力をできなくする。選択は不可。文字は灰色で表示される。
（readonly=”readonly”）: 入力をできなくする。選択は可能。文字色は通常と同じ。
（accesskey=””）: Altを押しながら指定したキーを押した時にこの部品にフォーカスが移動する
ブラウザのショートカットキーとバッティングしないよう注意が必要
（tabindex=””）: Tabキーで選択する順番を指定する
ユーザーの意思に反した順番にならないよう注意が必要

セレクトボックス

<select size="5" name="年齢" id="age">
 <option value="10">～10代</option>
 <option value="20">20代</option>
 <option value="30">30代</option>
 <option value="40">40代</option>
 <option value="50">50代～</option>
</select>

複数の選択肢から選ぶ際に使うセレクトボックスです。
select要素とoption要素を使って構成します。

select要素はoption要素の入れ物です。
option要素で各種選択肢を埋め込んでいきます。

select要素使用できる属性

（size=””）: 表示する選択肢の行数を指定する
指定しなかった場合、クリックするとオープンするパーツが表示される
（multiple=”multiple”）: 複数行選択を可能にする
（accesskey=””）: Altを押しながら指定したキーを押した時にこの部品にフォーカスが移動する
ブラウザのショートカットキーとバッティングしないよう注意が必要
（tabindex=””）: Tabキーで選択する順番を指定する
ユーザーの意思に反した順番にならないよう注意が必要
（disabled=”disabled”）: パーツを無効化する