It is possible to group inputs visually without reflecting this relationship in the HTML code. For example, a surrounding <div> element that is given a border will group inputs together visually. However, this relationship will not be interpreted correctly by assistive technologies, such as screen readers. Therefore, it is important to use meaningful HTML code to group inputs together. Assistive technologies will be able to interpret the relationship between a group of inputs and convey this to the user.
There are various ways that groups of inputs can be grouped visually. However, only certain HTML elements will accurately convey the relationship between groups of inputs. For example, the <fieldset> element can be used to group any related form controls. This is displayed visually with a border around the grouped controls. A <legend> element can also be added to provide a label to the group. Groups of inputs can also be marked up within a list element (either unordered <ul> or ordered <ol>), which offers a logical grouping and ensures the items are grouped visually on the page.
//Marking up related items as lists
<form id="customer" action="submit.php" method="post">
<p>Please let us know how urgent your query is:</p>
<ul>
<li><label for="vurgent">Very urgent!</label> <input type="radio" name="urgency" id="vurgent" value="Very"></li>
<li><label for="asap">As soon as possible please</label> <input type="radio" name="urgency" id="asap" value="Soon"></li>
<li><label for="nurgent">Not urgent, I can wait</label> <input type="radio" name="urgency" id="nurgent" value="Wait"></li>
</ul>
<p>In the past how happy were you with our reponse?</p>
<ul>
<li><label for="very">Very happy</label> <input type="radio" name="happy" id="very" value="very_happy"></li>
<li><label for="satisfied">Satisfied</label> <input type="radio" name="happy" id="satisfied" value="sat"></li>
<li><label for="no_opinion">No opinion, but I got a response that met my needs.</label> <input type="radio" name="happy" id="no_opinion" value="no_op"></li>
<li><label for="unhappy">Unhappy</label> <input type="radio" name="happy" id="unhappy"
value="un_happy"></li>
</ul>
</form>
// Marking up related items using <fieldset> and <legend>
<form id="customer" action="some.php" method="post">
<fieldset>
<legend>Please let us know how urgent your query is:</legend>
<ul>
<li><label for="vurgent">Very urgent!</label> <input type="radio" name="urgency" id="vurgent" value="Very"></li>
<li><label for="asap">As soon as possible please</label> <input type="radio" name="urgency" id="asap" value="Soon"></li>
<li><label for="nurgent">Not urgent, I can wait</label> <input type="radio" name="urgency" id="nurgent" value="Wait"></li>
</ul>
</fieldset>
<fieldset>
<legend>In the past how happy were you with our reponse?</legend>
<ul>
<li><label for="very">Very happy</label> <input type="radio" name="happy" id="very" value="very_happy"></li>
<li><label for="satisfied">Satisfied</label> <input type="radio" name="happy" id="satisfied" value="sat"></li>
<li><label for="no_opinion">No opinion, but I got a response that met my needs.</label> <input type="radio" name="happy" id="no_opinion" value="no_op"></li>
<li><label for="unhappy">Unhappy</label> <input type="radio" name="happy" id="unhappy" value="un_happy"></li>
</ul>
</fieldset>
</form>