S’il est assez facile de créer un formulaire en HTML, le faire bien et en exploitant toutes les possibilités de HTML 5, ce n’est pas la même chose !
C’est pourtant très important : créer un formulaire correctement permet non seulement un développement plus rapide, mais aussi une meilleure expérience utilisateur et un meilleur SEO.
Voyons ensemble comment améliorer vos formulaires HTML.
Le formulaire HTML : comment ça marche ?
Un formulaire HTML est un ensemble de widgets permettant une interaction entre un utilisateur et le site web.
C’est notamment via des formulaires que se font les principales interactions avec le serveur ! En effet, les données saisies via ce type d’élément sont souvent envoyées vers le back-end pour y être traitées (souvent via du PHP). Il peut s’agir de formulaire de connexion, de commande d’un produit, d’envoi de commentaires, etc. Bref, les forms HTML sont partout !
Et, avec l’évolution de HTML5 et du support des navigateurs, ils continuent de s’améliorer, et permettent beaucoup plus de choses que ce que vous pensez sûrement.
Faisons le point ensemble !
Les différentes balises et attributs du formulaire HTML
Les balises
Vous le savez probablement, un formulaire HTML est constitué d’un ensemble de balises, représentant les éléments du form.
On retrouve notamment :
- input, pour un champ simple (mais qui peut être de type différent, on en reparlera) ;
- textarea, pour une entrée de texte plus longue (une “zone de texte”, littéralement) ;
- select, pour afficher une liste déroulante, avec des tags option et optgroup ;
- button, souvent pour l’envoi du formulaire (mais peut avoir d’autres usages).
Les attributs spécifiques
Chacun de ces éléments peut en plus recevoir des attributs, et c’est là que ça devient intéressant ! Avec le temps, les navigateurs se sont mis à implémenter et à supporter de plus en plus d’attributs, pour personnaliser facilement les formulaires.
Les attributs classiques
Pour un premier exemple classique, le tag input peut recevoir un attribut type ayant pour valeurs possibles : text, email, date, text, number, etc.
Mais également d’autres types, plus nouveaux et moins classiques, entre autres : week, url et datetime-local.
Pour retrouver la liste complète, voici une documentation exhaustive.
Attention toutefois à bien vérifier que les navigateurs supportent les types que vous voulez implémenter ; ce n’est pas toujours le cas.
Les attributs HTML plus récents et à connaître
Si on sort du classique, on se rend compte qu’une balise formulaire HTML peut contenir beaucoup d’autres attributs pouvant faciliter le développement et offrir une meilleure expérience utilisateur.
Par exemple, toujours pour un input :
- inputmode, qui décide de l’affichage du clavier, sur smartphone notamment (”numeric”, par exemple) ;
- pattern, qui peut contenir une regex pour valider le contenu du champ (utile notamment pour les numéros de téléphone) ;
- minLength, maxLength, pour définir le nombre min et max de caractères ;
- required, pour signifier au navigateur que le formulaire ne peut pas être soumis si ce champ n’est pas rempli ni correctement rempli ;
- min, max et step pour les types “range”.
Il en existe d’autres, et évidemment chaque tag HTML (textarea, button, etc.) possède ses propres attributs ! Une rapide recherche Google vous permettra d’en savoir plus.
La validation d’un formulaire HTML
Il y a deux façons de faire pour valider un formulaire HTML que l’on soumet à un serveur :
- En utilisant une validation côté front, par le navigateur, avant la soumission du formulaire ;
- En faisant une vérification côté back end, après la soumission du formulaire.
La première solution possède l’avantage d’économiser un appel serveur en cas de formulaire invalide (et donc un gain de temps et de ressources serveur). La deuxième solution a elle l’avantage d’avoir une validation plus sûre (car un appel serveur peut toujours être effectué sans passer par le formulaire).
Souvent, on met en place une validation côté front et back, pour plus de sécurité.
Mais ici, on parle de formulaire HTML, alors ce qui nous intéresse, c’est la validation côté client !
Les attributs de validation
On en a déjà cité dans la section précédente, certains attributs, ajoutés à certains tags HTML, empêchent la soumission d’un formulaire qui n’est pas correctement rempli.
C’est évidemment le cas de required, mais aussi des différents attributs min et max et pattern.
API de contraintes de validation HTML5
Chose qui n’est pas forcément connue de tous les développeurs freelance, il existe une API native de validation de formulaire HTML5 ! Attention toutefois, comme pour chaque API front-end, à bien vérifier qu’elle soit implémentée par le ou les navigateurs visés.
Cette API met à disposition du développeur un ensemble d’attributs et de méthodes pour valider un formulaire avec du JavaScript.
Pour chaque élément d’un formulaire, on a accès à un objet validity, qui possède un certain nombre de propriétés de vérification. Pour que cela soit plus parlant, voyons un exemple, avec commentaires :
<!-- on récupère l'élément `email` du formulaire -->
var email = document.getElementById("mail");
<!-- On crée une fonction appelée à chaque appui d’une touche du clavier (lorsque le champ email est sélectionné) -->
email.addEventListener("keyup", function (event) {
<!-- Via l’object ‘validity’ et sa propriété ‘typeMismatch’, on teste la correspondance entre la valeur rentrée et celle récupérée -->
if(email.validity.typeMismatch) {
<!-- si elles ne correspondent pas, on affiche un message personnalisé via la méthode de l’API ‘setCustomValidity’ -->
email.setCustomValidity("J'attend un e-mail, mon cher !");
} else {
email.setCustomValidity("");
}
});
Si vous voulez voir la documentation officielle de cette API, rendez-vous ici !
Améliorer le SEO
Mais avoir un formulaire HTML bien construit ne bénéficie pas seulement à l’utilisateur, cela joue aussi sur le SEO (Search Engine Optimization).
En effet, la façon dont Google rank les pages web passe en partie par un parsing du HTML de votre page web.
Et là, l’optimisation du SEO par le HTML se fait de deux façons différentes :
- Google prenant de plus en plus en compte l’UX pour son classement, si votre site est user-friendly, le moteur de recherche en prendra compte ;
- Certains attributs agissent de manière directe sur le SEO, notamment par leur présence et leur contenu (par exemple l’attribut alt d’une image).
L’optimisation d’un formulaire HTML (et du formulaire HTML en général) en utilisant HTML5 est donc une façon d’optimiser votre classement sur les moteurs de recherche !
Créer un beau formulaire HTML avec du style CSS
Un formulaire HTML bien fait, c’est bien ! Mais, vous l’aurez remarqué, c’est en général pas très joli. Il faut donc améliorer tout cela via du CSS.
Il existe aujourd’hui des façons rapides et efficaces de faire ça, si jamais vous ne voulez pas vous embêter avec du CSS, ou si vous n’êtes pas très bon avec : ce sont les frameworks CSS ! Tels que Bootstrap ou Tailwind, ils surchargent automatiquement les formulaires que vous créez pour les rendre beaux et responsives. Si vous voulez en savoir plus, nous avons écrit un article complet sur les frameworks CSS.
Mais pour avoir un article complet sur les formulaires HTML5, il nous faut nous étendre un peu plus sur ce sujet et donner des exemples d’intégration de CSS dans des forms web.
Appliquer un style global aux éléments du formulaire
Si votre site comporte plusieurs formulaires HTML (ou des champs de formulaire disséminés à plusieurs endroits), la première chose à faire est de surcharger le style sur tous les mêmes éléments. Ainsi, votre site gardera une certaine cohérence et la même charte graphique partout.
Par exemple, vous pouvez ajouter dans votre fichier CSS global :
input {
/** Style appliqué à tous les inputs du site */
}
textarea {
/** Style appliqué à tous les textareas du site */
}
Et ainsi appliquer du style global sur chaque élément natif d’un formulaire HTML (donc également les select, button, etc.).
Le Responsive Web Design (RWD)
La part des mobiles utilisés pour naviguer sur le web étant toujours de plus en plus importante, avoir un site adapté mobile est essentiel ! Et pour cela, il existe ce qu’on appelle le Responsive Web Design.
Dans notre cas, il s’agit de rendre un formulaire, via du CSS, adapté à tous les types d’écrans, pour faciliter l’UX et l’UI.
Pour en savoir plus, nous avons écrit un article entièrement dédié à l’utilisation du Responsive Web Design et aux Media Queries.
Ajouter de l’interaction au formulaire avec du JavaScript
Si le CSS est utile pour rendre un formulaire HTML plus attrayant, on utilise le JavaScript pour le rendre dynamique !
On l’a déjà vu, le JavaScript peut notamment servir à la validation du formulaire, mais ce n’est pas tout.
On peut aussi l’utiliser pour faire une requête serveur à une API avec les données du formulaire (et ainsi empêcher le rechargement de la page).
Le JavaScript peut aussi être utilisé pour cacher ou afficher dynamiquement certains champs d’un formulaire (par exemple en posant de nouvelles questions à l’utilisateur s’il a coché une checkbox spécifique).
Bref, les utilisations du JavaScript dans le cadre du formulaire peuvent être nombreuses et bénéfiques !
Conclusion
On l’a vu, avoir un formulaire HTML bien construit, beau et dynamique aide autant à avoir une UX/UI améliorée qu’à avoir un meilleur SEO.
Grâce à de nouveaux attributs ou API, HTML5 possède aujourd’hui assez d’éléments pour pouvoir faire facilement un formulaire qui soit adapté aux utilisateurs (et aux moteurs de recherche).
Nous espérons que cet article aura pu vous aider dans votre futur développement de form HTML !
Si toutefois vous avez d’autres astuces pour ce type de développement, dites-les nous en commentaire !
