アンケートフォーム - まとめ

テキストボックス

テキストボックスは、ユーザーからの入力を受け付けてるときに使います
名前、メールアドレス、検索キーワードなど、１行で入力できる短い文字列を入力してもらうためのもの

テキストボックス

<input type-"text" name="t1" maxlength="20">

ここでの「20」は、入力文字数です。
ただし、データベースの「名前」の項目との関係で、「maxlength」で入力文字数をチェックしようとするのはあまり有効ではありません

テキストボックスのサイズを指定

<input type-"text" name="t1" size="50">

テキストエリア

テキストエリアは、複数行の入力ができる領域です

テキストエリア

<textarea name="textarea1" rows="2" cols="20"></textarea>

入力領域のサイズは、「rows（行数）」「cols（列数）」で設定します
初期値を入れておく場合は以下のように記述します

<textarea name="textarea1" rows="5" cols="30">ご自由に入力してください</textarea>

パスワードボックス

テキストボックスで「type="password"」と指定すると、パスワード入力用のパスワード

パスワードボックス

<input type="password" name="p1">

ブラウザによっては「オートコンプリート機能」のように、前回入力したパスワードを自動的にセットしてくれる機能があります
「オートコンプリート機能」を「off」にする場合は、以下のように記述します

<input type="password" name="p1" autocomplete="off">

選択リスト

選択リストは、通販システムで商品を選択してもらったり、アンケートの回答を選択してもらう用途に使います

<select name="menu1">
<option>豊島区</option>
<option>新宿区</option>
<option>板橋区</option>
<option>江東区</option>
</select>

つねに１つのみが表示されていて、クリックすると選択できる値がすべて表示されます
最初から複数の値を表示しておくには「size属性」を使って、以下のように記述します

<select size="4" name="menu1">
<option>豊島区</option>
<option>新宿区</option>
<option>板橋区</option>
<option>江東区</option>
</select>

選択リストに最初に表示される項目を競ってしたい場合は、以下のように記述します

<select size="1" name="menu1">
<option value="1" selected>以下の中から選択してください</option>
<option value="2">豊島区</option>
<option value="3">新宿区</option>
<option value="4">板橋区</option>
<option value="5">江東区</option>
</select>

ラジオボタン

選択対象が少ない場合、ごく限られた選択肢（二者択一など）の場合に使います

データーの削除
<input type="radio" name="r1">する
<input type="radio" name="r1">しない

どれか１つだけを選択させるには「name属性」を同じにする必要があります
値を指定する「value属性」と、選択項目を指定する「checked」を使っても記述できます

データーの削除
<input type="radio" name="r1" value="1" checked>する
<input type="radio" name="r1" value="0">しない

チェックボックス

あてはまるものすべてという複数選択に使います

あてはまるものをすべて選んでください。
<input type="checkbox" name="check1">和食
<input type="checkbox" name="check2">中華
<input type="checkbox" name="check3">洋食

この場合は、何がチェックされたか個別に調べることができます
チェックボックスへのチェック状況をまとめて扱いたいときには、次のように「[]」つけて定義しておきます

あてはまるものをすべて選んでください。
<input type="checkbox" name="c1[]" value="和食">和食
<input type="checkbox" name="c1[]" value="中華">中華
<input type="checkbox" name="c1[]" value="洋食">洋食

この場合は、「チェックされたものは和食と洋食です」というような判別ができます
「value属性」を使ってチェックされた項目の値を設定したり、「checked属性」を使って最初からチェックされている状態にすることができます
「checked属性」は、データベースの「和食」という項目が「1」であったら、checked1で「checked」を出力するという記述もできます

あてはまるものをすべて選んでください。
<input type="checkbox" name="check1" value="ON" checked>和食
<input type="checkbox" name="check2" value="ON">中華
<input type="checkbox" name="check3" value="ON">洋食

隠し項目

ユーザーのセッションデータを保存するのに使われます
サーバー上のセッション機能を使いたくないときや、クッキーやURLの一部としてセッションIDを使いたくないときなどには有効です
ソースでは見ることができるため、見られて困るデータはセットしません

<input type="hidden" name="id" value="999">

ボタン

ボタンはクリックすることでサーバーにデーターを送信するきっかけとなるなど、処理を開始するために使えるフォーム要素です
ボタンには３種類あります

送信ボタン

<input type="submit" name="b1" value="送信する">

クリックするとサーバーにデーターを送信します

送信ボタン

<input type="button" name="b1" value="クリック">

クリックしてもサーバーにデーターを送信しません

送信ボタン

<input type="reset" name="b1" value="リセット">

クリックすることで入力内容をクリアにします