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. ふりがなの付け方

  3. HTMLでテーブルを作ろう

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

  5. htmlで番号付きのリストを作ろう

  6. HTMLでセレクトボックスを作ろう

2021年7月
 1234
567891011
12131415161718
19202122232425
262728293031  
Translate »