今回は【HTML】type属性radioの使い方、ラジオボタンを作成しよう!
の解説になります!
こんな方に読んでほしい
- HTMLを学び始めた方へ
-
HTML
について学びたい方へ - 今回はinput type=”radio”について解説しております。
今回は、input type="radio"
について詳しく解説していきます。
type=”radio”では、「ラジオボタン」の選択ができます。
input type="radio"
で作成すると、ラジオボタンの選択欄が作成されます。
左の図が、input type="text"
になり、通常の入力欄になります。
右の図が、input type="radio"
になり、ラジオボタンの選択欄になります。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
type=”radio”について
input type="radio"
を指定すると、ラジオボタンになります。
また、似たような機能である、「チェックボックス」の違いを解説します。
POINT!
・チェックボックスcheckbox
:複数の選択が可能になります。
・ラジオボタンradio
:1つだけの選択が可能になります。
1つだけ選択したい場合は「ラジオボタン」、複数の選択したい場合は「チェックボックス」
というように覚えておきましょう。
書き方は以下のようになります。
<form method="post">
<div>
<p>ブラウザを選択</p>
<label><input type="radio" name="browser" value="ie">IE</label>
<label><input type="radio" name="browser" value="chrome">Chrome</label>
<label><input type="radio" name="browser" value="firefox">Firefox</label>
</div>
</form>
checked属性(初期の選択)について
checked属性とは、初期状態で選択した状態になります。
checkedのみ記述すれば問題ありません。
<form method="post">
<div>
<p>ブラウザを選択</p>
<label><input type="radio" name="browser" value="ie" checked>IE</label>
<label><input type="radio" name="browser" value="chrome">Chrome</label>
<label><input type="radio" name="browser" value="firefox">Firefox</label>
</div>
</form>
required属性(必須項目)について
required属性とは、必須項目に設定します、エラー表示はブラウザによって違います。
1つでもrequiredを指定すれば、そのグループは有効(必須)になります。
<form method="post">
<div>ブラウザを選択
<label><input type="radio" name="browser" value="ie" required /> IE</label>
<label><input type="radio" name="browser" value="chrome" /> Chrome</label>
<label><input type="radio" name="browser" value="firefox" /> Firefox</label>
</div>
<input type="submit" value="チェック" />
</form>
valueを指定したときに、フォームで送信される値になります。
nameは、複数のラジオボタンに同じname属性値を指定します。
CSSでinput type=”radio”を整える
今回はCSSの「属性セレクタ」を使い整えていきます。
書き方は以下のようになります
input[type="radio"] {
/*--type="radio"のinput要素にのみ適用されます--*/
}
<form method="post">
<div>ブラウザを選択
<label><input type="radio" name="browser" value="ie" required /> IE</label>
<label><input type="radio" name="browser" value="chrome" /> Chrome</label>
<label><input type="radio" name="browser" value="firefox" /> Firefox</label>
</div>
<input type="submit" value="チェック" />
</form>
input[type="radio"] {
transform: scale(1.4); /*--拡大(1.4)--*/
-ms-transform: scale(1.4); /*--Firefox--*/
-webkit-transform: scale(1.4); /*--Chrome、Safari--*/
padding: 10px;
margin-right: 10px;
}
scale
を使いチェックボックを拡大させています。
チェックボックや、ラジオボタンの装飾(CSS)は少し複雑になりますが、今回はシンプルなコードになります。今後は、装飾(CSS)の記事も書きたいと思っております。
関連記事
まとめ
今回はこれで以上です。
次回も「フォーム」について解説していきます。
- POINT
-
input type="radio"
は、 ラジオボタンの選択欄を作成します。 - checked属性とは、初期状態で選択した状態に設定します。
- required属性とは、必須項目に設定します。
- ラジオボタンは1つだけの選択が可能になります。
- チェックボックスは複数の選択が可能になります。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事