エンジニアのひよこ_level10

【毎日更新!】新卒2年目エンジニアブログです! プログラムだけじゃなく、マネジメントとかも書いていきたい!

【HTML】inputタグの丸いボタン、radioボタンの書き方【214日目】

こんなやつ、見たことないですか?


あ、これ押せるので試してみてください。
 

radioボタンって言います

これはラジオボタンと呼ばれているもので、

『必ず1つだけ選ぶ』選択肢で使います。 

 

 片方を押したら、もう片方が消えるとかですね。

 

どうやって書くの?

<input name="fruits" type="radio" value="apple" />りんご

<input name="fruits" type="radio" value="orange" />みかん

 

こんな感じです。

 

nameの意味

『name』と書かれているのは、それぞれが『セットである』ことを示すものです!

今回だと、りんごとみかんがセットですね。

 

セットだと何がいいか。

ボタンをクリックした時に、セットの中の1つしか選べないというやつです。

 

これは、りんごとみかんがセット、1から4がセットなので、クリックしたときにセットのなかから一個しか選べないやつです。

 

 valueの意味

これは、クリックしたものがなにかを示すものです。

決定ボタンを押した後に、サーバーにどのデータを送るか決めるものです。

 

もしnameがなかったら?

こんなふうに全部押せちゃいます。

 

ということで、適切にnameをセットしましょうね!