Pour réunir certains champs de formulaires, vous pouvez les inclure dans un élément fieldset.

Si de plus vous voulez indiquer un titre pour ce bloc, vous devez utiliser l'élément legend.

<form action="ma-page.php" method="post">
  <fieldset>
    <legend>Civilité</legend>
    <label>Nom :</label><input type="text" name="nom" />
    <label>Prénom :</label></input type="text" name="prenom" />
  </fieldset>
  <fieldset>
    <legend>Contact</legend>
    <label>Adresse :</label><textarea name="adresse"></textarea>
    <label>Téléphone :</label><input type="text" name="telephone"/>
  </fieldset>
</form>

Avec le code précédent, vous aurez quatre champs de saisie réparties dans deux cadres distincts. De plus ces cadres auront un titre (généralement placé à cheval sur la bordure du haut).

Ceci peut vous permettre de mieux structurer vos formulaires, ce qui peut être un plus appréciable pour l'utilisateur quand vous proposez des formulaires complexes.

Attention : Si vous décidez de définir un titre à l'aide de l'élément legend, alors cet élément doit obligatoirement être le premier fils de l'élément fieldset.

Pour définir un libellé dans un formulaire, le (X)HTML dispose de l'élément label.
De plus, si vous reliez l'élément label au champ de formulaire, alors un clique sur le libellé donnera le focus au champ.

Pour associer votre libellé au champ de formulaire, il y a deux possibilités :

• Soit vous incluez directement le champ dans votre libellé ;
• Soit vous renseignez l'attibut for de l'élément label avec l'id du champ correspondant.

<!-- en incluant le champ dans le libellé -->
<label>Nom :<input type="text" name="nom" /></label>
 
<!-- en renseignant l'attribut for -->
<label for="id-nom">Nom</label>
<input type="text" name="nom" id="id-nom" />

Si vous associez votre libellé à une case à cocher ou à un bouton radio, alors cliquer sur le libellé aura pour effet de selectionner la case ou le bouton.

Utilisez cet élément vous permet de rendre votre formulaire plus accessible.
Ainsi, si un utilisateur consulte votre site grâce à un lecteur d'écran, ce dernier sera en mesure d'indiquer que tel libellé correspond à tel champ, même si pour une raison ou une autre ces deux informations sont éloignées dans votre code source.

Si vous avez besoin de réunir certaines options d'une liste déroulante, vous pouvez utiliser l'élément optgroup.

Utiliser cet élément vous autorise à regrouper les options en suivant une certaine logique, ce qui est particulièrement appréciable lorsque vous présentez une liste avec un nombre important d'options.

Vous pouvez donner un nom à ce groupe en définissant l'attribut label.

            <label for="form_country">Pays : </label>
            <select id="form_country" name="country">
                <optgroup label="Amérique">
                    <option value="ca">Canada</option>
                    <option value="us">États-Unis</option>
                </optgroup>
                <optgroup label="Europe">
                    <option value="be">Belgique</option>
                    <option value="fr">France</option>
                </optgroup>
            </select>

Attention : Les noms de groupes qui apparaissent dans la liste ne sont pas selectionnables et ne peuvent pas être transmis lorsque le formulaire est soumis.

La balise <form> n'est pas autorisée dans <form>. Elle n'est acceptée que dans

• del
• fieldset
• iframe
• ins
• noframes
• noscript
• object
• td
• th

Il y a deux manières de le faire :

• disabled : le champ input sera grisé dans le navigateur, et n'est pas transmis lors de la soumission du formulaire.

<input type="text" name="toto1" value="toto1" disabled="disabled" />

• readonly : le champ paraîtra comme champ normal, mais la valeur ne sera pas modifiable, et sera transmis lors de la soumission du formulaire.

<input type="text" name="toto2" value="toto2" readonly="readonly" />

Il faut rajouter dans la balise la propriété checked.

Par exemple :

<form>
  <input type="radio" name="a" checked>
  <input type="radio" name="b">
</form>

Avec ce code, le bouton a sera coché par défaut au chargement de la page.

Note : En XHTML, il faut utiliser checked="checked"

Il faut utiliser l'attribut selected dans la balise <option> que l'on souhaite sélectionner.

<select name="monselect">
  <option value="1">un</option>
  <option value="2">deux</option>
  <option value="3" selected="selected">trois</option>
  <option value="4">quatre</option>
</select>

Il faut ajouter l'attribut disabled au bouton radio ou à la case à cocher.

Exemple :

<input name="mon_bouton_radio" type="radio" disabled="disabled" />

<input name="ma_checkbox" type="checkbox" disabled="disabled" />

L'élement textarea permet de saisir du texte sur plusieurs lignes. Le contenu de cette zone doit être compris entre les balises ouvrantes et fermantes textarea.

<textarea name="zone_de_texte" cols="60" rows="10">Le contenu du champ</textarea>