第26回　フォームに関する基礎知識

園田誠

2008.09.02

今回のポイント
inputタグ
labelタグ
sizeプロパティ
maxlengthプロパティ
textareaタグ

　今回はフォーム（form）について勉強します。フォームはWebプログラムにおいてとても重要かつ基本となる部分で，プログラムと密接な関係にあります。閲覧者が何らかのデータをサーバーサイドのプログラムに送信するにはフォームを利用しなくてはなりません。

　まずは基本となるフォームです（リスト1）。

リスト1●基本となるフォーム

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>フォームの基本形</title>
</head>
<body>

<form action="submit.php" method="GET">

<label for="c_fname">姓</label>
<input type="text" name="c_fname" size="20" id="c_fname" />
<br />

<label for="c_lname">名</label>
<input type="text" name="c_lname" size="20" />
<br />

性別
<input type="radio" value="M" name="c_sex" id="c_sex_m" />
<label for="c_sex_m">男</label>
<input type="radio" value="F" name="c_sex" id="c_sex_f" />
<label for="c_sex_f">女</label>
<br />

<label for="c_pref">都道府県</label>
<select name="c_pref" id="c_pref">
  <option value="東京都">東京都</option>
  <option value="埼玉県">埼玉県</option>
  <option value="千葉県">千葉県</option>
  <option value="神奈川県">神奈川県</option>
</select>
<br />

<label for="c_adr">住所</label>
<input type="text" name="c_adr" size="50" id="c_adr" />
<br />

趣味
<input type="checkbox" name="c_hobby" id="c_hb_1" value="読書" />
<label for="c_hb_1">読書</label>

<input type="checkbox" name="c_hobby" id="c_hb_2" value="ドライブ" />
<label for="c_hb_2">ドライブ</label>

<input type="checkbox" name="c_hobby" id="c_hb_3" value="音楽鑑賞" />
<label for="c_hb_3">音楽鑑賞</label>
<br />

<label for="c_etc">ご意見</label>
<textarea name="c_etc" id="c_etc" rows="3" cols="20"></textarea>

<br />
<input type="submit" value="送信ボタン" />
<input type="reset" value="リセット" />
</form>

</body>
</html>

　フォームの中にはテキストボックスや各種のボタン類が含まれます。こうしたフォーム上に配置する部品類をフォーム・エレメント，あるいは簡単にエレメントと呼びます。このサンプルでは主だったエレメントを，改行だけ入れて適当に配置しています（図1）。