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

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

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

  4. cssを読み込む

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

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

2021年5月
 12
3456789
10111213141516
17181920212223
24252627282930
31  
Translate »