How should I group several radio inputs? - html

Question

When in a form I have several radio inputs that make a single control (example below), what's the most semantic way to group them together?
<form>
<!-- Single radio control made of 3 radio inputs -->
<input type="radio" name="X" value="A" />
<input type="radio" name="X" value="B" />
<input type="radio" name="X" value="C" />
<!-- Some other control -->
<input type="text" name="Y" value="D" />
</form>
I know I can enclose them in a paragraph (<p>..</p>), but I wonder if maybe list (<ul>..</ul>) would be more semantic approach?

Answer 1

You can group together by using fieldset
.radio_button{
list-style-type: none;
}
<form>
<h1>Testing Form Radio buttons</h1>
<fieldset>
<legend>Title</legend>
<ul>
<li class="radio_button">
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." />
Mister
</label>
</li>
<li class="radio_button">
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms." />
Miss
</label>
</li>
</ul>
</fieldset>
</section>
</form>

Answer 2

Try this:
<form>
<!-- Single radio control made of 3 radio inputs -->
<ul>
<li>
<input type="radio" name="X" value="A" />A
</li>
<li>
<input type="radio" name="X" value="B" />B
</li>
<li>
<input type="radio" name="X" value="C" />C
</li>
</ul>
<input type="text" name="Y" value="D" />
</form>

Answer 3

A good way would be using the bootstrap lib and format your forms with bootstrap
: Bootstrap form inputs

Answer 4

You can use the name field same if you want to get only 1 value selected,
And only selected field's value (value = "A") will be submitted.
You can group them using css styles. W3.css is a nice library like bootstrap.
W3.css examples