4.5 ラジオボタン・チェックボックス
【ここで学ぶ内容】
- ラジオボタン
<input type=”radio” name=”名前” value=”値”>
- チェックボックス
<input type=”checkbox” name=”名前” value=”値”>
ラジオボタン
ラジオボタンは、いくつかの選択肢から1つを選択するための入力部品です。
図 4.5.1 ラジオボタン
では、ラジオボタンを作っていきましょう。
1. ソースコードの記述
先ほど作成した［form.html］のソースコードを、以下のように修正してください。
①ソース・フォルダー ：webpage/ch04
②ファイル名 ：form.html
➢ form.html
<p>性別： <input type="radio" name="gender" value="man">男性 <input type="radio" name="gender" value="woman">女性</p> |
ラジオボタンは、掲示板やアンケートなどで、複数の選択肢から1つだけを選択する場合などに用いられます。ボタンは丸印で表現され、選択されているボタンは丸の中に塗りつぶされた点が入ります。
ラジオボタンは、<input>タグのtype属性に、「radio」を指定することで作成できます。
さらに、name属性によって、選択項目をひとつのグループにできます。ラジオボタンのグループが複数あるときにはこの名前で分けられますので、必ずname属性には名前を指定します。
ラジオボタンでは、グループごとに、それぞれ1つを選択することができます。
また、value属性は、選択された項目を識別するための値で、ここで指定された値がデータとして送信されます。例えば、ここでは「男」を選択した場合、実際に送信されるデータは「男」ではなく、「man」となります。
➢ form.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html><html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの作成</title> </head> <body> <form action="" method="POST"> <p>名前：<input type="text" name="name"></p> <p>メッセージ：</p> <textarea name="message" rows="5" cols="40"></textarea> <p>性別： <input type="radio" name="gender" value="man">男性 <input type="radio" name="gender" value="woman">女性 </p> </form> </body></html> |
2. ブラウザで確認
ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示しましょう。
図 4.5.2
ラジオボタンができました。ボタンのどちらかをクリックすると、クリックしたほうのボタンの中に塗りつぶされた点が入り、そのボタンが選択されたことがわかります。
チェックボックス
先ほど作成したラジオボタンは、複数の選択肢から１つだけを選択するものですが、チェックボックスを利用すると、複数の項目を選択できます。
図 4.5.3 チェックボックス
では、チェックボックスを作っていきましょう。
3. ソースコードの記述
先ほど作成した［form.html］のソースコードを、以下のように修正してください。
①ソース・フォルダー ：webpage/ch04
②ファイル名 ：form.html
➢ form.html
<p>好きな動物： <input type="checkbox" name="animal" value="dog">犬 <input type="checkbox" name="animal" value="cat">猫 <input type="checkbox" name="animal" value="horse">馬 <input type="checkbox" name="animal" value="monkey">猿</p> |
チェックボックスは、type属性に「checkbox」を指定することで作成できます。name属性を必ず指定し、チェックボックスをひとつのグループにします。value属性は、ラジオボタンと同様に、実際に送信されるデータの値となります。
➢ form.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html><html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの作成</title> </head> <body> <form action="" method="POST"> <p>名前：<input type="text" name="name"></p> <p>メッセージ：</p> <textarea name="message" rows="5" cols="40"></textarea> <p>性別： <input type="radio" name="gender" value="man">男性 <input type="radio" name="gender" value="woman">女性 </p> <p>好きな動物： <input type="checkbox" name="animal" value="dog">犬 <input type="checkbox" name="animal" value="cat">猫 <input type="checkbox" name="animal" value="horse">馬 <input type="checkbox" name="animal" value="monkey">猿 </p> </form> </body></html> |
4. ブラウザで確認
ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示しましょう。
図 4.5.4
チェックボックスができました。「□」のような図形が表示され、クリックすると、そこが選択されていることを示す、「
」が現れます。