ホームページ作成ガイド

説明文からボタンを選択する

<html><head><title>説明文からボタンを選択する</title></head>
<body>

<form>
<input type="checkbox" id="check">
<label for="check">利用規約を読みました</label><br>
<br>
<input type="radio" id="check1" name="1">
<label for="check1">利用規約に同意する</label>
    
<input type="radio" id="check2" name="1">
<label for="check2">同意しない</label>

</form>

</body>
</html>

チェックボックスやラジオボタンはボタン部分をクリックして選択します。
ですがソフトのUIでは、わざわざボタン部分をクリックしなくても、説明する文章をクリックしても選択されるようになってることが多いです。そのように動作するボタンの作り方を紹介します。

チェックボックスまたはラジオボタンの<input>タグの中に、id="****"と、固有のIDを設定します。
そして選択対象にしたいテキストを<label for="+++++"></label>で囲みます。+++++は先ほど<input>タグに設定したID名を記述します。