HTMLでラジオボタン を作ってみよう

はじめに

ラジオボタンの作り方がわからないのですが教えてもらますか?
ラジオボタンを作るのは簡単なので大丈夫ですよ。
ありがとうございます。最初から1個目のところにチェックが入った状態のものが欲しいのですができますか?
checkedを指定するだけなので非常に簡単です。
サンプルを使ってご紹介していきたいと思います。

ラジオボタンを作ろう

ラジオボタンを作ってみようと思います。
まず、はチェックが入っていないラジオボタンを作ろうと思います。
htmlは次のように記述します。


<input type="radio" name="radio" value="yes">YES
<input type="radio" name="radio" value="no">NO

上記ものは次のようになります。
YES
NO
最初からチェックが入っていない状態で切り替えることができますね。
ここで大切なことは name を合わせることです。
今回はradioと書かせていただきましたが、ここを合わせないと切り替えができなくなります。
ここでは、nameの名前を違ったものにした際どうなるのかもテストしておきましょう。


<input type="radio" name="radio1" value="yes">YES
<input type="radio" name="radio2" value="no">NO

上記のコードは次のように動作します。
YES
NO
どちらのラジオボタンも押すことができて、意味をなしていないことがわかりますね。
nameは必ず揃えましょう。
次に、最初からチェックされているラジオボタンを作ろうと思います。
作り方は非常に簡単でcheckedを指定するだけです。
サンプルでは、YESに最初からcheckが入っている状態にしようと思います。


<input type="radio" name="radio" value="yes" checked="checked">YES
<input type="radio" name="radio" value="no">NO

上記のコードは次のように動作します。
YES
NO
最初からYESにcheckが入っていることがわかるかと思います。
必要用途に応じて使ってみてくださいね。
また、ラジオボタンのnameを違うものにしてラジオボタンとして機能しないというのはよくある間違いですので、ご注意ください。

関連記事

  1. htmlの文字化け

  2. videoタグを使って動画を埋め込んでみよう

  3. アコーディオンを作ってみよう

  4. HTMLでAタグに電話番号を設定しよう

  5. HTMLで見出しをつける

  6. メモ帳で書けるhtml

2024年4月
1234567
891011121314
15161718192021
22232425262728
2930  
Translate »