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. cssを読み込む

  2. ちょっと複雑なテーブルをHTMLで作ろう

  3. HTMLで画像表示してみよう

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

  5. リンクの貼り方

  6. メモ帳で書けるhtml

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930