Éléments d'un formulaire

Dans le cours concernant les bases de la création d’un formulaire, l’élément input a été évoqué en détail. Cependant, il existe bien d’autres éléments pouvant composer un formulaire.

L'élément <select>

L’élément <select></select> permet de créer une liste déroulante. En général, cet élément est utilisé lorsqu’un grand choix d’options est possible.

Chaque item de la liste doit être entouré de l’élément <option></option>. Cet élément est accompagné de l’attribut value, qui reçoit en valeur le nom de l’item.

Remarque : Par défaut, c’est toujours le premier item qui est pré-sélectionné.

Exemple :

<form>
    <label for="metier">Métier :</label>
    <!-- Liste déroulante -->
    <select id="metier" name="metier">
        <!-- items de la liste -->
        <option value="dev">Développeur</option>
        <option value="res">Réseaux</option>
    </select>
</form>

Pour changer l’item présélectionné, il est possible d’utiliser l’attribut selected à la fin de l’élément <option> choisi.

Exemple :

<option value="dev" selected>Développeur</option>

Lorsque l’attribut multiple est ajouté à la fin de l’élément <select>, cela permet à l’utilisateur de sélectionner plusieurs options.

Exemple :

<label for="metier">Métier :</label>
<!-- Liste déroulante avec la possibilité de choisir plusieurs options -->
<select id="metier" name="metier"  multiple>
    <option value="dev" selected>Développeur</option>
    <option value="res">Réseaux</option>
</select>

L'élément <textarea>

L’élément <textarea></textarea> défini une zone de texte multilignes. Cet élément est généralement utilisé afin que l’utilisateur puisse laisser un message ou un commentaire sous un article, par exemple.

Cet élément est généralement accompagné de l’attribut rows, qui définit le nombre de lignes visibles dans la zone de texte, et de l’attribut cols, qui définit la largeur de la ligne.

Exemple :

<!-- Zone de texte -->
<textarea name="message" rows="10" cols="30">
    Zone de texte
</textarea>

L'élément <button>