第12回目の講座です。前回は、フォームを作る中で必要なパーツ「一行テキスト入力欄」についてご紹介しました。今回も引き続き、フォーム欄で使われるパーツ「ラジオボタン」と「チェックボックス」の作り方についてご紹介していきたいと思います。目次ラジオボタンをつくるラジオボタンとは複数ある選択肢の中から一つだけを選んでもらうときに使われます。性別や、血液型を選んでもらうときに使います。ユーザーがどれか一つを選択すると、その他の選択肢は自動的に選択できなくなります。ラジオボタンをつくる際に使う主な属性をまず3つご紹介します。type="radio">」です<input>タグにtype属性でradioの値を指定します。選択肢それぞれに同じname属性の値をつけることで一つのグループとしてまとめることができます。チェックを予め選択した状態にするにはchecked属性で指定をします。選択される項目や選択をしてほしい項目に入れておくとユーザーがの使いやすさにつながります。それでは、さっそくラジオボタンをつくるコードを書いてみましょう。今回は、性別を選択するラジオボタンを作ります。「男」「女」「その他」の選択肢をname属性で「"gender"」のグループにしましょう。「女」にchecked属性を指定させ、あらかじめ選択させましょう。サンプルコードはこちらです。</form></body></html>ブラウザで表示すると画像のようになります。cheked属性で指定した「女」の項目にあらかじめチェックが入っていることがわかります。チェックボックスをつくるチェックボックスの作り方についてご紹介します。選択肢をチェックする点でラジオボタンと似ていますが、大きく違う点はチェックボックスは複数の項目を選択可能です。ユーザーの答える項目が必ずしも一つとは限らない場合にはチェックボックスを使うとよいでしょう。チェックボックスををつくる際に使う主な属性をまず3つご紹介します。type="checkbox">」です。<input>タグにtype属性でcheckboxの値を指定します。ラジオボタンと同じようにそれぞれに同じname属性の値をつけることで一つのグループとしてまとめることができます。checked属性も同様に項目を指定をするとあらかじめ選択された状態になります。それでは、さっそくチェックボックスをつくるコードを書いてみましょう。今回はユーザーの好きな動物を選択してもらうチェックボックスを作ります。「猫」「犬」「ウサギ」「ハムスター」の選択肢をname属性で「"animal"」の一つのグループにしましょう。「猫」にchecked属性を指定させ、あらかじめ選択させましょう。サンプルコードはこちらです。</form></body></html>ブラウザで表示すると画像のようになります。クリックをすると複数項目にチェックが入れれますね。cheked属性で指定した「猫」の項目にもあらかじめ選択がされていたかと思います。今回はフォームで使われる「ラジオボタン」と「チェックボックス」の作り方についてご紹介していきました。