ラジオボタンとチェックボックス - 33歳主婦プログラマーを目指す

本日の教材動画はこちら

選択式入力のタイプについて

選択式の入力タイプには下記の二つがある

・1つしか選択ができないタイプ（ラジオボタン / ドロップダウンメニュー）

・複数選択ができるタイプ（チェックボックス）

＜ラジオボタン＞について

用意された選択肢を1つしか選択できないタイプ。タグの他にname属性とvalue属性の指定が必要。name属性が同じものの中から選択することになり、value属性で送信される値を指定する形になる。

使い方は＜input type="radio" name="〇〇" value="●●"＞。タグ横に選択させたい文字を入力する（＜input type="radio"～…＞xxx という風に）

＜チェックボックス＞について

用意された選択肢を複数選択できるタイプ。タグの他にname属性とvalue属性の指定が必要。name属性が同じものの中から選択することができ、ひとまとまりのデータとして扱われる。こちらもvalue属性で送信される値を指定する形になる。

使い方は＜input type="checkbox" name="〇〇" value="●●"＞。タグ横に選択させたい文字を入力する（＜input type="checkbox"～…＞xx という風に）

＜value＞属性について

今回から増えたvalue属性。多分選択後送信した際に表示される文字指定だと思うのですが、今回送信までは教えられてないので確認はできず（まあ多分解釈はあってると思う）

このvalue属性、調べたところ今回勉強した箇所だけでなく、＜input＞要素自体に使えるようで、前回勉強した text タイプと password タイプに入力した場合は初期値として最初から出力されるようになる様子（実際に入力した様子が下記画像となります）取り扱う type によって、valueの取り扱いも様々なようですね！