Radio button within section

HTML & CSS
1

I have tried to add cursor pointer and when user clicks a radio button it will be checked status.
So, not only on label or checkbox but all container inside section. If I uunderstand radion button will be controlled using FOR

for="radio-label-1"

and ID input. But how is controlled section in this case as input and label are separated.

Need help why is not working the following code:

<!DOCTYPE HTML>

<html>

<head>
<title>Label and input inside section</title>
</head>

<body>
<form id="" class="" action="" method="post" role="form">   
<section class="XXX">
<header class="">

<div class="XXX">
<div class=""><input type="radio" id="radio-label-1" class="radio-input" name="XXX">

<label class="radio-label" for="radio-label-1">Finance</label>
</div></div>
<div class="image-container"><div class="icon-image"></div></div>

</header>

</section>

<section class="XXX">
<header class="">

<div class="">
<div class=""><input type="radio" id="radio-label-2" class="radio-input">

<label class="radio-label" for="radio-label-2">AI</label>
</div></div>
<div class="image-container"><div class="icon-image"></div></div>

</header>

</section>
</form>
</body>

</html>
2

To begin with, using the header and section elements within the context of a form like makes no semantic sense to me, also I don’t think it helps what you are trying to do.
Forms have their own elements for grouping inputs.
You can make the whole of the radio input container selectable by using the label element in a different way, that is: make the label the input’s container.
When an input is nested inside the label, you don’t have to use the ID and for to link them, the other side effect is that the entire container is clickable for selection. So you can style the label as a block or however you want it and have a large clickable container around the input.

3 Likes
3

Thank you for the message. I have tested already this option and I understand label and within input element.

My option uses a different way as it is more suitable. If I use radio button inside a checkbox I can open payment method (accordion menu).

So, do you have also an example where it is separate label and input element? As you see a standard approach uses your example but I try to separate them inside group radio section and Bootstrap V3 technique.

Maybe you have also another example.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.