Le code HTML permet de créer la structure du formulaire qui sera l’interface avec laquelle les visiteurs pourront renseigner des informations. Le traitement de ces informations et de la réponse renvoyée au visiteur est une tout autre partie de la création d’un formulaire qui ne sera pas liée au HTML. C’est bien souvent le travail du développeur qui pourra récupérer les donner saisies à l’aide des langages PHP ou JavaScript.
La structure globale d’un formulaire reste dans la même logique que n’importe quelle structure de la page. Ils s’agira d’envelopper des balises « d’objets » (les champs) dans des container.
Un formulaire se déclare avec l’élément form en HTML, c’est entre les balises ouvrantes et fermantes d’un élément form que vous intégrerez le contenu de votre formulaire. Le contenu du formulaire sera constitué de champs (ou zones de saisies), de labels et d’un bouton de validation du formulaire.
L’élément form et ses attributs
En plus des attributs classiques permettant l’identification d’un élément hmlt (class & id), l’ élément form aura avoir besoin de deux attributs pour fonctionner normalement : method et action.
<form class="mon_formulaire" id="contact" method="post" action="mon_script.php">
<?-- Contenu de mon formulaire -->
</form>L’attribut methode
L’attribut method va indiquer comment doivent être envoyées les données saisies par l’utilisateur. Cet attribut peut prendre deux valeurs : get et post.
- get : pour envoyer les données à la suite de l’URL indiqué dans l’attribut « action ». L’URI et les données seront séparés par un caractère « ? »
- post : permet d’envoyer les données au serveur en les incluant dans le corps du formulaire.
L’attribut action
Il permettra de renseigner l’URL du script, programme ou page qui traitera les données envoyées par le formulaire lors de sa soumission, par le clic de l’internaute sur un bouton d’envoi.
Les différents types de champs
L’élément label
La balise <label> permet de décrire les champs de formulaire de votre page web. Elle est particulièrement utile pour rendre votre formulaire plus accessible aux utilisateurs de lecteurs d’écran. Lorsqu’un utilisateur de lecteur d’écran navigue sur votre site, il peut utiliser la touche « Tab » pour passer d’un champ de formulaire à l’autre. Les étiquettes associées à chaque champ de formulaire sont lues par le lecteur d’écran, ce qui permet à l’utilisateur de comprendre à quoi correspond chaque champ.
L’attribut for de la balise <label> est utilisé pour associer l’étiquette à un élément de formulaire en spécifiant l’identifiant de cet élément.
Voici comment utiliser la balise <label>:
<label for="nom">Nom:</label><br>
<input type="text" id="nom" name="nom">Dans cet exemple, la balise <label> est utilisée pour décrire le champ de formulaire de type « texte » qui suit. La valeur de l’attribut for doit être identique à l’attribut id du champ de formulaire, ce qui permet de lier l’étiquette à son champ correspondant.
En résumé, la balise <label> est un moyen simple et efficace de rendre votre formulaire plus accessible et de faciliter la navigation de vos utilisateurs. L’attribut for la complète et la rend plus accessible pour des utilisateurs qui utilisent un lecteur d’écran, car cela leur permet de sélectionner l’élément de formulaire en utilisant la touche « entrée » lorsque l’étiquette est en surbrillance. Cela peut également rendre le formulaire plus facile à utiliser pour tous les utilisateurs en leur permettant de cliquer sur l’étiquette plutôt que de devoir trouver l’élément de formulaire avec leur souris.
L’élément input
La balise <input> est utilisée pour créer différents types de champs de formulaire dans une page web. Elle est généralement utilisée en conjonction avec un formulaire défini par la balise <form>.
Voici quelques exemples d’utilisation de la balise <input>:
<form>
<label for="email">Adresse email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="password">Mot de passe:</label><br>
<input type="password" id="password" name="password"><br>
<input type="checkbox" id="newsletter" name="newsletter" value="oui">
<label for="newsletter">S'abonner à la newsletter</label><br>
<input type="submit" value="Envoyer">
</form>
Dans cet exemple, la balise <input> est utilisée pour créer un champ de formulaire de type « email », un champ de formulaire de type « password » et une case à cocher.
Voici les valeurs possibles de l’attribut type de la balise <input>:
- text : crée un champ de texte simple.
- password : crée un champ de texte masqué (les caractères saisis sont remplacés par des astérisques).
- email : crée un champ de texte pour la saisie d’une adresse email.
- number : crée un champ de texte pour la saisie de nombres.
- radio : crée une option unique qui peut être sélectionnée dans un groupe d’options.
- checkbox : crée une case à cocher qui peut être cochée ou décochée.
- submit : crée un bouton de soumission de formulaire.
- reset : crée un bouton de réinitialisation de formulaire.
L’élément textarea
La balise <textarea> est utilisée pour créer un champ de formulaire de type « texte multiligne ». Elle est particulièrement utile lorsque vous voulez que les utilisateurs puissent saisir plusieurs lignes de texte.
Voici comment utiliser la balise <textarea>
<form>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
</form> Dans cet exemple, la balise <textarea> est utilisée pour créer un champ de formulaire de type « texte multiligne » qui a 4 lignes et 50 colonnes. Les utilisateurs peuvent saisir du texte sur plusieurs lignes dans ce champ.
La balise <textarea> peut également être utilisée avec les attributs rows et cols pour définir la hauteur et la largeur du champ de texte multiligne.
En résumé, la balise <textarea> est un moyen simple et efficace de permettre aux utilisateurs de saisir du texte sur plusieurs lignes dans un formulaire HTML.
Les éléments select et option
Les balises <select> et <option> sont utilisées pour créer une liste déroulante dans un formulaire HTML. La balise <select> définit le début de la liste déroulante et la balise <option> définit chaque élément de la liste.
Voici comment utiliser les balises <select> et <option> :
<form>
<label for="pays">Pays:</label><br>
<select id="pays" name="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="allemagne">Allemagne</option>
</select>
</form> Dans cet exemple, la balise <select> est utilisée pour créer une liste déroulante de pays et la balise <option> est utilisée pour définir chaque élément de la liste (France, Espagne, Italie, Allemagne).
La balise <option> peut également être utilisée avec l’attribut selected pour pré-sélectionner un élément de la liste :
<form>
<label for="pays">Pays:</label><br>
<select id="pays" name="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie" selected>Italie</option>
<option value="allemagne">Allemagne</option>
</select>
</form> Dans cet exemple, l’élément « Italie » de la liste est pré-sélectionné.
En résumé, les balises <select> et <option> sont un moyen simple et efficace de permettre aux utilisateurs de sélectionner un élément d’une liste dans un formulaire HTML.
Les attribut des champs
L’attribut placeholder dans le formulaire
L’attribut placeholder permet d’afficher un texte grisé à l’intérieur d’un champ de formulaire qui n’a pas encore été rempli par l’utilisateur. Ce texte disparaît lorsque l’utilisateur commence à saisir du contenu dans le champ. L’attribut placeholder est souvent utilisé pour fournir une indication ou une suggestion sur le type de données à saisir dans le champ. Par exemple :
<input type="text" placeholder="Entrez votre nom">Dans cet exemple, le texte « Entrez votre nom » est affiché à l’intérieur du champ de saisie de texte jusqu’à ce que l’utilisateur commence à saisir du contenu. Lorsque l’utilisateur commence à saisir du texte, le texte de l’attribut placeholder disparaît et est remplacé par les caractères saisis par l’utilisateur. L’attribut placeholder peut être utilisé avec la plupart des champs de formulaire, tels que les champs de saisie de texte, les champs de mot de passe et les champs de sélection.
Il est à noter que l’attribut placeholder n’a pas vocation à remplacer le label, mais sert avant tout à illustrer l’élément attendu lors de la saisie. Il pourra servir à présenter le formatage d’un numéro de téléphone ou une date.
L’attribut value dans le formulaire
L’attribut value est utilisé dans le cadre de formulaire HTML pour définir la valeur d’un champ de formulaire. La valeur du champ de formulaire est envoyée au serveur lorsque le formulaire est soumis.
Voici quelques exemples d’utilisation de l’attribut value:
<form>
<label for="nom">Nom:</label><br>
<input type="text" id="nom" name="nom" value="Dupont"><br>
<label for="pays">Pays:</label><br>
<select id="pays" name="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie" selected>Italie</option>
<option value="allemagne">Allemagne</option>
</select>
</form> Dans cet exemple, l’attribut value est utilisé pour définir la valeur du champ de texte « Nom » et pour définir la valeur de chaque élément de la liste déroulante « Pays ».
En résumé, l’attribut value est un élément important dans le cadre de formulaire HTML, car il permet de définir la valeur des champs de formulaire et de la transmettre au serveur lorsque le formulaire est soumis.
Comment structurer un formulaire HTML pour améliorer son accessibilité et sa manipulation CSS
Les éléments fieldset et legend
Les balises <fieldset> et <legend> sont utilisées pour organiser les champs de formulaire dans une page web.
La balise <fieldset> permet de regrouper des champs de formulaire en un groupe logique. Elle est généralement utilisée en conjonction avec la balise <legend>, qui permet de donner un titre au groupe de champs de formulaire.
Voici comment utiliser les balises <fieldset> et <legend> :
<form>
<fieldset>
<legend>Informations personnelles</legend>
<label for="nom">Nom:</label><br>
<input type="text" id="nom" name="nom"><br>
<label for="prenom">Prénom:</label><br>
<input type="text" id="prenom" name="prenom"><br>
</fieldset>
<fieldset>
<legend>Informations de contact</legend>
<label for="email">Adresse email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="tel">Numéro de téléphone:</label><br>
<input type="tel" id="tel" name="tel"><br>
</fieldset>
<input type="submit" value="Envoyer">
</form> Dans cet exemple, les balises <fieldset> et <legend> sont utilisées pour organiser les champs de formulaire en deux groupes distincts: « Informations personnelles » et « Informations de contact ».
En résumé, les balises <fieldset> et <legend> sont un moyen simple et efficace d’organiser les champs de formulaire et de rendre votre formulaire plus facile à comprendre pour les utilisateurs.
Structurer les champs à l’aide de balises de type block
Il existe plusieurs façons de structurer un formulaire HTML de façon à le rendre facile à traiter graphiquement avec CSS et à lui donner une valeur sémantique appropriée, sans avoir recours à la balise <br>. Voici une approche qui utilise les balises <p>, <ol> et <li> :
<form method="get" action="traitement.php">
<fieldset>
<legend>Informations de contact</legend>
<ol>
<li>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
</li>
<li>
<label for="email">Adresse email :</label>
<input type="email" id="email" name="email">
</li>
<li>
<label for="phone">Numéro de téléphone :</label>
<input type="tel" id="phone" name="phone">
</li>
</ol>
</fieldset>
<fieldset>
<legend>Informations de paiement</legend>
<ol>
<li>
<label for="card-type">Type de carte :</label>
<select id="card-type" name="card-type">
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="american-express">American Express</option>
</select>
</li>
<li>
<label for="card-number">Numéro de carte :</label>
<input type="text" id="card-number" name="card-number">
</li>
<li>
<label for="expiration-date">Date d'expiration :</label>
<input type="month" id="expiration-date" name="expiration-date">
</li>
<li>
<label for="security-code">Code de sécurité :</label>
<input type="text" id="security-code" name="security-code">
</li>
</ol>
</fieldset>
<p>
<input type="submit" value="Valider">
</p>
</form>Dans cet exemple, le formulaire comprend deux « fieldset », chacun avec une légende (« Informations de contact » et « Informations de paiement »). Chaque « fieldset » contient une liste ordonnée (« ol ») de champs de formulaire, chaque champ étant défini par une étiquette (« label ») et un élément de formulaire (« input », « select », etc.). Le bouton « Valider » envoie les données du formulaire au script « traitement.php » lorsqu’il est cliqué.
Cette structure permet de donner une valeur sémantique appropriée à chaque élément du formulaire et de le rendre facile à traiter graphiquement avec CSS.
En résumé, en utilisant les balises <p>, <ol> et <li> de manière appropriée, vous pouvez structurer votre formulaire HTML de façon à le rendre facile à traiter graphiquement avec CSS et à lui donner une valeur sémantique appropriée.