DEV 7.3 Enhance forms with special HTML mark-up

Example form coding showing use of <fieldset> & <legend>, <label>, tabindex:

<fieldset tabindex="1">
<legend>Contact information</legend>
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name">

</div>
<br>
<div>
<label for="mail">E-mail address:</label>
<input type="text" name="mail" id="mail">

</div>
<br>
</fieldset>

This produces:

NB: Layout and style for this form was produced with CSS - the <div> and <br> tags are necessary for this example.

Example form coding showing use of <optgroup>:

<select ... >
  <optgroup label="Swedish Cars">
  <option value ="volvo">Volvo</option>

  <option value ="saab">Saab</option>
</optgroup>
  <optgroup label="German Cars">
  <option value      ="mercedes">Mercedes</option>

  <option value ="audi">Audi</option>
</optgroup>
</select>

This produces:

Example of good radio button coding using <fieldset> & <legend>, <label> :

<fieldset>
<legend>Preferred wine</legend>
  <input type="radio" name="wine" value="red"      id="red">

  <label for="red">Red wine</label>
  
  <input type="radio" name="wine"      value="white" id="white">

  <label for="white">White wine</label>
  
   <input type="radio" name="wine"       value="rose"  id="rose">

   <label for="rose">Rose wine</label>
</fieldset>

This produces:

See also extended example with style sheet on a separate page.