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

  6. HTMLで見出しをつける

2021年10月
 123
45678910
11121314151617
18192021222324
25262728293031
Translate »