超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ 選択ボタンを作る

タグ名プロパティ説明
<input>typeradioラジオボタン
checkboxチェックボックス
nameデータ名データに名前をつける
valueテキスト送信されるテキスト
checkedデフォルトで選択

<input type="radio"> でラジオボタン、<input type="checkbox"> でチェックボックスを作成します。
ラジオボタンは選択肢の中から1つだけ選択する場合、チェックボックスは複数選択に使います。
name 属性はデータに名前をつけて受信側でデータを判別できるようにします。選択ボタンの場合は選択肢は同一グループになるので、名前は全て同じになります。
value 属性は選択されたデータが何かを判別するためにテキストを入れておくために設定します。送信するデータとして、この value 属性で設定されたテキストが送信されます。

あなたの性別は?
 男  女  おかまちゃん

好きなアーティストは?(複数選択可)
 浜崎あゆみ
 宇多田ヒカル
 Every Little Thing
 JUDY AND MARY
 ZARD
 Do As Infinity
 MISIA

選択してみて下さい。
ラジオボタンの方は、1つしか選択できませんね。チェックボックスは複数選択できます。
ソースはこうなってます。

<form>
あなたの性別は?<br>
 <input type="radio" name="sex" value="otoko">男
 <input type="radio" name="sex" value="onna">女
 <input type="radio" name="sex" value="okama">おかまちゃん
<br><br>
好きなアーティストは?(複数選択可)<br>
 <input type="checkbox" checked name="artist"
value="hamasaki">
浜崎あゆみ<br>
 <input type="checkbox" name="artist" value="utada">
宇多田ヒカル<br>
 <input type="checkbox" name="artist" value="elt">
Every Little Thing<br>
 <input type="checkbox" name="artist" value="jam">
JUDY AND MARY<br>
 <input type="checkbox" name="artist" value="zard">
ZARD<br>
 <input type="checkbox" name="artist" value="dai">
Do As Infinity<br>
 <input type="checkbox" name="artist" value="misia">
MISIA<br>
</form>

1問目も2問目も、name 属性はそれぞれ同じ名前になっています。
チェックボックスに1つだけ checked 属性が入っていますね。これにより、その1つだけがあらかじめ選択された状態になっています。