Formulaire
Balise de formulaire
En règle générale, si vous avez plus d'un input dans une section de votre site web, c'est que vous avez besoin d'un formulaire. Un formulaire se distingue généralement par quelques balises d'entrées, tel que des <input>, <textarea> ou <select>, suivie par un bouton de soumission qui permet d'envoyer les données. Pour des raisons de sémantique et de fonctionnalité de Javascript, on entourera toujours un formulaire d'une balise <form>
On utilise la balise <form> de la façon suivante:
Libellé
Il est bonne pratique en HTML de mettre le texte expliquant ce qu'il doit y avoir dans un champ d'entré dans une balise <label>. La balise <label> permet de lier le texte et le champ d'entrée, ce qui le rend plus accessible pour les personnes utilisant un lecteur d'écran ou pour les personnes ayant de la difficulté à utiliser une souris d'ordinateur.
La balise <label> peut s'utiliser de 2 façons différentes, soit en incorporant le champ à lier au texte à l'intérieur de la balise ou en utilisant l'attribut for avec un id de champ. Voici une démonstration de ces deux méthodes:
Vous noterez probablement que l'on utilise une quantité phénoménale de balise <p> dans les formulaires en exemple dans ce module. Ce n'est pas normal. Habituellement, il ne devrait pas y avoir de paragraphe autour des <label> ou autour des boutons de soumission. Nous le faisons ici pour forcer des retours de ligne.
Puisque nous n'avons pas encore vu comment utiliser le CSS pour styler nos formulaires, nous devons nous résoudre à utiliser des techniques moins optimales pour contrôler notre affichage pour le moment et éviter que les exemples deviennent illisible. Nous nous débarasserons complètement de ces paragraphes lorsque nous verrons comment contrôler le tout en CSS dans les prochains modules.
Groupe d'inputs
Il est possible de regrouper des inputs ou des contrôles dans des sections du formulaire. C'est une façon intéressante d'organiser vos éléments si le formulaire est plus gros. Pour se faire, nous utiliserons la balise <fieldset> à l'intérieur du formulaire pour spécifier un groupe et la balise <legend> pour donner un nom au groupe à l'intérieur de la balise <fieldset>.
Voici comment utiliser ces balises: