Comment concevoir des formulaires accessibles avec HTML et CSS
Table des matières
- Présentation
- Composants d'un formulaire
- Formulaires accessibles avec HTML
- Conclusion
Introduction
Les formulaires font partie intégrante de la création d'un site Web. Ils sont utilisés pour collecter des données auprès des utilisateurs lorsqu'ils soumettent leurs coordonnées. Les formulaires sont importants dans l'interaction des utilisateurs qui soumettent leur formulaire d'inscription, se connectent au formulaire, s'abonnent à la newsletter ou envoient un message pour recevoir des commentaires. Créer des formulaires accessibles est important pour tout le monde, en particulier pour les lecteurs d'écran, afin de remplir le formulaire sans aucun problème.
Composants d'un formulaire
Un formulaire est composé de différents composants tels que
- formulaire : c'est le conteneur qui accepte tous les autres éléments du formulaire comme la balise d'entrée, le bouton de soumission, la zone de texte, les cases à cocher et le bouton radio
<form></form>
Copier après la connexion
- input : c'est l'élément HTML qui accepte les détails de l'utilisateur. La balise d'entrée est servie en fonction du but de l'entrée ; texte, numéro, mot de passe, email entre autres
<form>
<input type="text" />
<input type="email" />
<input type="password" />
<input type="radio" />
<input type="checkbox" />
<input type="file" />
<input type="range" />
<input type="color" />
<input type="date"/>
</form>
Copier après la connexion
- label : cette balise qui donne un aperçu du détail à remplir dans une saisie. Il s'associe à la balise d'entrée.
<form> <label for="email">Email</label> <input type="email">
Copier après la connexion
- textarea: this is an multi-line input tag that accept 524,288 characters by default except the maxlength attribute is set up to a value. It is used to accept reviews, messages and comments from the users
<form> <label for="message">Message:</label> <textarea>
Copier après la connexion
- select: this element is for creating a dropdown in which the users are able to select one option by default or more options when the attribute multiple is being used.
<form> <select>
Copier après la connexion
- checkbox: this element allow users to select one or more options.
<form> <label for="subscribe"></label> <input type="checkbox">
Copier après la connexion
- button: this tag will the users the opportunity to submit their details upon completion. These details are submitted to server.
<form> <button type="submit">Submit</button> </form>
Copier après la connexion
Formulaires accessibles avec HTML
- Inclure des balises sématiques
En utilisant les bonnes balises sématiques telles que