フォームの作成

フォームの作成

テキストボックス

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

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

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

type属性の種類
属性値 部品の説明
text 1行のテキスト入力欄
password パスワード入力用
checkbox 複数選択可能なチェックボックス
radio 単一選択が可能なラジオボタン
submit 送信ボタン
reset リセットボタン
image 画像のボタン

<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:

radio:

submit:

reset:

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

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

HTML5から拡大された機能

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

HTML5に追加されたtype属性
キーワード 部品の説明
search 検索用の1行入力ボックス
tel tel番号の1行入力ボックス
url urlの1行入力ボックス
email emailの1行入力ボックス
datetime 日時の入力部品(タイムゾーンあり)
datetime-local 日時の入力部品(タイムゾーンなし)
date 年月日入力用部品
month 年月入力用部品
week 年週入力用部品
time 時刻入力用部品
number 数値入力用部品
range スライド型部品
color 色選択用部品

<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>