フォームの作成

テキストボックス

1行のテキストボックスはinput要素にtype属性をtextと指定することで表示されます。

<input type="text"　name="name" id="name">

type属性の値を変更すると次のように変わります。

<p>text：<input type="text"></p>
<p>password：<input type="password"></p>
<p>checkbox：<input type="checkbox" name="route" id="r1" value="search"><label for="r1">検索エンジン</label><input type="checkbox" name="route" id="r2" value="cm"><label for="r2">テレビCM</label><input type="checkbox" name="route" id="r3" value="magazine"><label for="r3">雑誌</label>
</p>
<p>radio：<input type="radio" name="number" id="n1" value="1"><label for="n1">1人</label><input type="radio" name="number" id="n2" value="2"><label for="n2">2人</label>
</p>
<p>submit：<input type="submit" name="submit" id="submit" value="送信"></p>
<p>reset：<input type="reset" name="reset" id="reset" value="リセット"></p>
<p>image：<input type="image" src="images/abc.png" alt="abc"></p>

text：

password：

checkbox：検索エンジンテレビCM雑誌

radio：1人2人

submit：

reset：

name属性を使用する場合の注意

name属性はPHPにデータを渡す時にそれぞれのデーターの目印になりますので必ず記述する必要があります。
PHPにデータを送信するときにデータは連想配列の状態で送られます。name属性がキーとなりval属性の値がデータの値となるわけです。
その際にチェックボックスやmultiple属性のついたリストの場合は、複数の値を選択することになります。この場合はname属性に[]をつけます。
例えば　name=”tel[]”のようにします。そうすることで複数の値を選択しても二次元配列の状態にしてデータを送信してくれることになります。
ここは重要なポイントですからしっかりと押さえておきましょう。

HTML5から拡大された機能

HTML5からテキストボックスの機能の拡大が図られています。
ブラウザによっては非対応のものも多いですが、対応してない場合は標準のテキストボックスが表示されるだけですから、積極的に使用してみると良いでしょうが、あまり対応してないですね。。Operaの人にはいいかも。

<p>search：<input type="search"></p>
<p>tel：<input type="tel"></p>
<p>url：<input type="url"></p>
<p>email：<input type="email"></p>
<p>datetime：<input type="datetime"></p>
<p>datetime-local：<input type="datetime-local"></p>
<p>date：<input type="date"></p>
<p>month：<input type="month"></p>
<p>week：<input type="week"></p>
<p>time：<input type="time"></p>
<p>number：<input type="number"></p>
<p>range：<input type="range"></p>
<p>color：<input type="color"></p>

search：

tel：

url：

email：

datetime：

datetime-local：

date：

month：

week：

time：

number：

range：

color：

複数行のテキスト

textarea要素は複数行のテキスト入力欄を表示します。この要素は空要素ではありません。終了タグを忘れないようにしましょう。また、あらかじめ要素内容として入れたテキストが、初期状態でテキスト入力欄に入力された状態で表示されます。

<textarea rows="7" cols="50">ご意見はこちらへ</textarea>

ご意見はこちらへ

メニューを構成する要素

メニューの要素はulとli 要素と似た構成です。select要素で複数のoption要素を囲みます。

<select>
	<option>メニュー1</option>
	<option>メニュー2</option>
	<option>メニュー3</option>
	<option>メニュー4</option>
	<option>メニュー5</option>
</select>

メニュー1メニュー2メニュー3メニュー4メニュー5