Les formulaires HTML
- Episode N° 11
- Difficulté difficile
- Publié le 03/05/2020 par Ronan HELLO
- Dernière mise à jour le 21/12/2023
Alors déjà bravo à vous d’être arrivé jusqu’ici, mais maintenant il va falloir tout lire pour bien comprendre la jungle des formulaires web en HTML 5. Et ne râlez pas, c’était bien pire avant, et bien entendu, je vais vous guider pas à pas sur chaque étape de la conception d’un formulaire.
Structure générale d’un formulaire
Premièrement, un formulaire commence toujours par l’ouverture d’une balise <form> et se termine donc par la fermeture de cette dernière avec </form>. C’est entre ces balises que nous allons pouvoir insérer et manipuler les différents champs qui constitueront le formulaire. Généralement, votre formulaire débute par la déclaration de plusieurs champs, et se termine par un bouton de soumission, c’est cette structure que nous allons adopter dans cet épisode.
Baliser un champ de formulaire
Lorsque vous êtes amenés à compléter un formulaire sur internet, vous pouvez saisir différents types de données. Pour chaque type de donnée, que ce soit, du texte, un nombre, une date ou même un fichier, il existe un champ de formulaire adéquat. La variété des champs disponible permettent souvent une validation partielle des données entrées avant l’envoi du formulaire, mais également une interface utilisateur simplifiée grâce à des dispositions de clavier adaptées aux différents champs sur mobile. Nous verrons ces deux atouts champ par champ afin de bien cerner leur fonctionnement.
La balise <input>
La première balise pratiquement incontournable de tout formulaire est la balise <input>. Cette balise va permettre d’afficher un champ de saisi pour l’utilisateur. Par défaut, le champ accepte tous les caractères textuels, vous pouvez saisir ce que vous souhaitez dans ce champ à l’aide de votre clavier (texte, nombre, symboles). On ajoutera un nom au champ à l’aide de l’attribut name comme dans l’exemple ci-dessous. De manière générale, il faudra essayer de spécifier une valeur en anglais pour l’attribut name, ce qui facilitera grandement son traitement par la suite. Voici un champ très simple qui affiche un champ texte pour y saisir votre prénom.
<input name="first_name">
Le libellé
Il est possible d’afficher un petit texte en guise de libellé pour chaque champ d’un formulaire. Pour cela, il faudra ajouter une balise <label> autour de votre champ en question comme ceci:
<form>
<label>Prénom
<input name="first_name">
</label>
</form>
Si vous avez copié l’exemple ci-dessus, vous pouvez essayer de cliquer sur le mot “prénom”. Vous constaterez que le champ est devenu actif, le curseur de saisi est maintenant positionné dans le champ, vous pouvez donc commencer à écrire dedans.
En revanche, la structure HTML des balises n’est pas très élégante, on remarque que la position du mot est étrange. Il existe donc une deuxième technique, que je privilégie fortement, qui permet de lier un label à un champ. Pour cela, il faudra placer la balise <label> avant ou après (ou où vous souhaitez), le champ <input> comme ceci:
<form>
<label>Prénom</label>
<input name="first_name">
</form>
Au niveau du navigateur, le rendu visuel est le même, mais petit problème, lorsque vous cliquez sur le mot “Prénom”, plus rien ne se passe, le champ <label> n’est plus lié à la balise <input>. Pour faire revenir ce fonctionnement, il suffira d’ajouter un attribut id à votre balise <input> et un attribut for à la balise <label>. Les valeurs dans ces deux attributs doivent être identique afin que le lien se fasse correctement entre les deux balises, comme ceci :
<form>
<label for="first_name">Prénom</label>
<input id="first_name" name="first_name">
</form>
Si vous cliquez sur le mot “Prénom”, le curseur se place maintenant directement dans le champ, le problème est donc réglé !
Vous devez surement vous demander pourquoi on a dû rajouter un attribut id qui a la même valeur que notre précédent attribut name, et vous auriez bien raison. Mais n’oublions pas que chaque chose à son utilité, l’attribut name sert à nommer la future valeur qui sera rentrée par l'utilisateur, alors que l’attribut id permet de donner un identifiant unique au champ afin de lui rattacher un label par exemple. Il existe donc beaucoup de cas ou la valeur dans l’attribut name, n’est pas la même que pour le champ id.
L’attribut placeholder
Il existe en plus du libellé, une indication supplémentaire que l’on peut renseigner en ajoutant un attribut placeholder directement sur la balise. Cet attribut, une fois renseigné, permet d’afficher un exemple de la valeur attendue en gris clair directement dans le champ comme ceci :
Attention, un attribut placeholder ne remplace en rien une balise <label>, leur rôles sont différents et complémentaires. Le placeholder est plutôt utilisé pour donner une indication sur le type ou le format de valeur souhaitée dans le champ.
L'attribut value
Si maintenant vous souhaitez directement ajouter une valeur par défaut au champ, vous pouvez la renseigner directement dans un attribut value. La valeur saisie sera alors automatiquement préremplie dans le champ du formulaire, l’utilisateur pourra alors, soit la laisser, soit la modifier. L’attribut valeur est mis à jour à chaque fois que la valeur du champ est modifiée, c’est cet attribut qui possède la véritable valeur du champ. C’est le contenu de l’attribut value qui nous intéresse et que l’on souhaite récupérer à la soumission du formulaire.
Les différents type de champs
Maintenant que vous avez vu comment créer un champ tout à fait classique, nous allons pouvoir nous pencher sur les différents types de champs possible. Changer le type d’un champ permet d’automatiser certaines tâches, comme par exemple une validation partielle des données entrées saisie dans le champ, ou encore le type de clavier à présenter à l’utilisateur si ce dernier utilise un appareil mobile.
Il est possible de modifier le type de champ directement en ajoutant un attribut type à la balise input, et en spécifiant une valeur bien précise parmi celles proposées.
Les nombres
Vous savez comment créer un champ pour rédiger une phrase, mais qu’en est-il des champs de saisi des valeurs numériques ? Vous pouvez très simplement créer un champ de saisi de nombre en utilisant la valeur ‘number’ dans l’attribut type. Vous remarquerez alors que vous ne pourrez entrer que des nombres (à l’exception de la lettre ‘e’, qui sert en mathématique à exprimer les puissances).
Il est également possible de définir une valeur maximale et minimale, ainsi qu’un intervalle entre les valeurs à l’aide des attributs max, min et step. Voici un exemple complet d’un champ n’acceptant que les valeurs entre 4 et 15, allant de deux en deux.
<input type="number" min="4" max="15" step="2">
Si vous tentez de remplir ce champ via un terminal mobile, vous remarquerez que le clavier s'adapte et affiche en premier la saisie des nombres. Sur un ordinateur, vous verrez apparaître des flèches sur le côté du champ permettant d’incrémenter ou de décrémenter la valeur (en fonction de l’attribut step indiqué, ici les flèches iront donc de 2 en 2, si l’attribut n’est pas renseigné, les valeurs iront alors de de 1 en 1).
Le champ email
Pour créer un champ de type email, vous devez simplement écrire le mot clé ‘email’ dans l’attribut type de votre balise <input>. Voici un exemple :
<input type="email" id="email" name="email" placeholder="john@doe.com">
Si vous essayez de saisir une chaîne de caractère qui n’est pas une adresse email, automatiquement votre navigateur vous avertira que la valeur présente dans le champ ne correspond pas à un format d’adresse email. Ce champ est extrêmement utile pour les différents formulaires de contact ou de connexion inscription de votre site internet. Essayez de valider le formulaire ci-dessous en renseignant une chaine de caractère simple dans le champ email, vous verrez alors apparaître l’alerte de votre navigateur.
Il faut savoir que lorsqu’un utilisateur s’apprête à renseigner un champ email, son clavier mobile change et affiche un “@” et un “.” autour de la barre d’espace, pour optimiser la saisie manuelle. (Encore et toujours de l'expérience utilisateur, donc on en profite).
Le champ mot de passe
Lorsque vous tapez votre mot de passe sur un site internet, les caractères ne s’affichent pas et vous avez des étoiles (*) ou des points noirs (•) à la place des caractères. C’est possible grâce au champ de type password que vous pouvez réaliser très simplement comme ceci :
<input type="password" id="password" name="password">
N’hésitez pas à tester les différents champs directement dans votre page HTML. Il est évident qu’un champ destiné à accueillir le mot de passe de l’utilisateur DOIT OBLIGATOIREMENT être de type password, il en va de la sécurité de vos visiteurs.
Le champ tel
Vous pouvez également définir l’attribut type de la balise <input> sur la valeur tel, vous créerez ainsi un champ destiné à recevoir un numéro de téléphone. Ce champ affichera directement un clavier avec une présentation des numéros pour faciliter la saisie du numéro de téléphone.
Il est possible de spécifier un format de numéro de téléphone spécifique à l’aide d’une REGEX (une formule permettant de valider un pattern de caractères, nous aurons probablement l’occasion de revenir dessus dans d’autres formations, on dit REGEX pour “Expression Régulière” ou “regular expression” en anglais). Pour cela, il faut utiliser l’attribut pattern et ajouter en valeur la REGEX souhaitée comme ici :
<input type="tel"
pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"
name="phone_number">
L’exemple mentionné ici avec la REGEX provient du site https://alsacreation.com que je vous recommande très fortement afin de consolider votre formation à l’aide de diverses ressources.
Le champ url
Si maintenant vous souhaitez ajouter un champ pour que l'utilisateur puisse saisir une URL, vous pouvez utiliser tout simplement le type url. Le navigateur s’occupera alors de vérifier si la chaîne de caractères entrée dans le champ par l’utilisateur correspond ou non à une URL (le navigateur ne valide pas si l’URL existe réellement, mais uniquement si le format correspond bien à celui d’une URL standard). Le champ ressemblera alors à ceci :
<input type="url" name="website_url">
Le champ recherche
Pour créer un champ de recherche, ou du moins la barre de saisie du texte, vous pouvez utiliser le valeur search dans l'attribut type. Cette valeur aura pour effet d’ajouter une petite croix à la fin du champ permettant à l’utilisateur d’effacer très simplement les mots déjà saisis dans le champ de recherche. (Attention, là également, l’apparence de la croix varie en fonction des navigateurs web.
<input type="search" name="search">
Les time, date, week, month et datetime
Pour saisir une temporalité dans un formulaire, il existe toute une variété de champs possible. Leurs mécanismes sont identiques, je ne les présenterais donc pas tous, mais bien entendu, je vous invite fortement à tester chacun d’entre eux.
Les champs que j’utilise le plus sont les champs de type date et datetime-local. Ces deux champs permettent respectivement de proposer une saisie de date, et une saisie plus complète avec l’heure et les minutes. L’un des soucis majeurs proposé par les champs de temporalité est que la saisie par l’utilisateur est peu pratique, certains navigateurs proposent un calendrier de saisie (comme dans Google Chrome ou Firefox) tandis que Edge propose une liste déroulante. De plus, les calendriers permettent de facilement saisir une date, mais lorsqu’il faut choisir l’heure et les minutes, l’interface se complique encore.
C’est pour cette raison que beaucoup de sites ne proposent pas le champ date par défaut et préfèrent utiliser un champ personnalisé (par exemple, sur AirBnb, la saisie des dates est réalisée avec un champ personnalisé et non un champ date classique. Voici la liste de tous les champs de temporalité que vous pouvez tester simplement. Pour chacun d’entre eux, il est également possible de définir une date minimale et maximale.
Les couleurs
Il existe un champ qui permet aux utilisateurs de choisir une couleur dans une palette interactive. Pour cela, il suffit de renseigner la valeur color dans l’attribut type du champ. La valeur retournée sera alors sous le format hexadécimal comme ici (#5e0cb8). Ce format universel permet de spécifier des couleurs à l’aide de 3 séries de deux caractères (5e, 0c, b8). Ces trois valeurs indiquent respectivement la puissance d’allumage des pixels rouge vert et bleu sur votre écran afin de créer une couleur précise.
<input type="color" name="color" value="5e0cb8">
Le champ de type color vous permettra alors très simplement de récupérer cette valeur hexadécimale. Le souci étant que l’interface proposé sur les ordinateurs sous Windows n’est pas très pratique et paraît vieillotte. On préférera également ici utiliser des champs personnalisés, permettant à l’utilisateur de choisir une couleur présente dans un échantillon ou une palette définie à l’avance.
Le curseur
Il existe un champ cette fois un peu plus exotique qu’une zone de saisie classique, vous avez la possibilité de créer des curseurs de sélection. Pour créer un curseur, il suffit de mettre la valeur range dans l’attribut type de votre balise <input>.
<input type="range" name="happiness" min="0" max="10" step="2">
Dans ce champ également, vous avez la possibilité de définir une valeur minimale, maximale et un écart entre des valeurs. Il est possible d’ajouter des marques à l’aide de la balise complémentaire <datalist>. Cette balise contiendra alors des balises enfants <option> avec une valeur spécifique. Il faudra ensuite lier la balise datalist à l’aide d’un attribut id et d’un attribut list sur le champ de type range comme dans l’exemple ci-dessous.
Les envois de fichiers
Les formulaires permettent également d’envoyer des fichiers au serveur à l’aide d’un champ de type file. Ce champ à une apparence particulière, il dispose d’un bouton permettant d’aller chercher un ou plusieurs fichiers directement sur votre disque dur.
Il est possible de spécifier un format ou le nombre de fichiers à ajouter. Lorsqu’un formulaire contient un champ d’ajout de fichier, il faudra appliquer une modification à la balise <form> en lui ajoutant l’attribut enctype="multipart/form-data", sans quoi, votre fichier ne sera pas envoyé avec le reste de vos données. Voici un exemple de champ d’upload de fichiers:
<input type="file" name="files" accept="image/png, image/jpeg" multiple>
Les cases à cocher multiples
Vous avez la possibilité de créer des cases à cocher en spécifiant cette fois la valeur checkbox dans l’attribut type. La logique est cette fois un peu différente puisqu’ici nous allons devoir écrire plusieurs balises <input type="checkbox">, nous allons devoir en rédiger une par choix disponible. Pour chaque balise, nous allons également lui attribuer un nom qui sera différent comme ceci :
<input type="checkbox" value="cat" name="animals[]" id="cat">
<label for="cat">Chat</label>
<input type="checkbox" value="dog "name="animals[]" id="dog">
<label for="dog">Chien</label>
<input type="checkbox" value="rabbit" name="animals[]" id="rabbit">
<label for="rabbit">Lapin</label>
Ce que l’on peut remarquer avec le code détaillé plus haut, c’est que pour chaque champ, l’attribut value est renseigné afin d’envoyer cette valeur lors de la soumission du formulaire, si la case à bien été cochée. On remarque également que l’attribut name est suffixé par [], c’est simplement une indication qui permet au formulaire de regrouper les différentes valeurs sous un même nom, ici animals. Il est possible de pré cocher un champ à l’aide de l’attribut checked que l’on peut ajouter directement sur la balise <input>.
Les cases à cocher unique
Pour les cases à cocher unique, la logique est exactement la même. Il faudra simplement remplacer la valeur checkbox par radio de l’attribut type. La différence entre ces deux types de champs est évidemment le nombre de réponses attendues. Pour une liste de champs checkboxes, on s'attend à avoir zéro, une ou plusieurs valeurs, alors qu’avec des champs de type radio, on s‘attendra plutôt à en avoir zéro ou une. Il est donc inutile de regrouper les valeurs sous un même nom, on pourra donc retirer le suffixe [] aux champs. Voici un exemple de champs radio :
<input type="radio" value="cat" name="animal" id="cat">
<label for="cat">Chat</label>
<input type="radio" value="dog "name="animal" id="dog">
<label for="dog">Chien</label>
<input type="radio" value="rabbit" name="animal" id="rabbit">
<label for="rabbit">Lapin</label>
Les champs cachés
Dans certains cas, vous devrez faire passer une valeur via le formulaire, mais sans que l’utilisateur puisse la modifier ou même la voir. Pour ce cas de figure, vous pouvez définir l’attribut type sur la valeur hidden. Cela aura pour effet de ne pas afficher le champ. Libre à vous ensuite d’affecter une valeur et un nom au champ afin de bien faire transiter l’information au travers du formulaire.
Il est également possible de cacher n’importe quel champ en lui ajoutant cette fois un attribut hidden, mais ce n’est pas une bonne pratique, et cela ne corrige en rien les soucis énoncés plus haut.
Nous en avons fini avec les champs dit ‘classiques’, ces champs qui ne sont finalement que des variantes d’une même balise <input>. Je sais que cette partie était relativement longue et complexe, mais vous y avez survécu, c’est déjà pas mal. Bon cependant il reste encore quelques éléments à voir, mais là, beaucoup plus passionnants que cette liste exhaustive de champs.
La balise <textarea>
Nous allons enfin parler de la balise permettant de créer une zone de texte, la balise <textarea>. Cette balise retrouve le comportement normal des balises HTML classiques, c’est à dire que contrairement à la balise <input>, la balise <textarea> s’ouvre et se ferme comme ceci :
<textarea name="message"></textarea>
Il est maintenant possible d'appliquer les attributs similaires aux balises <input> vu précédemment, à l’exception près que cette fois, la valeur n’est pas spécifiée dans un attribut mais bien entre les deux balises ouvrante et fermante. Vous avez également la possibilité de définir un nombre de lignes par défaut (et donc la hauteur du bloc) de la balise. Voici un exemple d’usage de la balise :
<label for="message">Votre message</label>
<textarea id="message" name="message" rows="5">Mon message est rédigé ici</textarea>
La balise textarea à la particularité de pouvoir être redimensionnée depuis son coin en bas à droite. Cette possibilité de redimensionnement peut être gérée à l’aide de quelques règles CSS que nous verrons dans la formation CSS.
Il existe à nouveau pour cette balise beaucoup d’attributs possibles, je vous invite à lire la documentation officielle des textarea afin de comprendre le périmètre d’action de cette balise : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea.
La balise <select>
Ici nous allons nous intéresser aux sélecteurs HTML. Cette balise <select> permet de mettre en place très rapidement et très simplement une liste déroulante de sélection. Pour cela, il suffit de créer une balise <select> et d’y insérer autant de balises enfant <option> que d’options souhaitées. Voici un exemple :
<label for="animal">Votre animal préféré ?</label>
<select id="animal" name="animal">
<option value="cat">Chat</option>
<option value="dog">Chien</option>
<option value="rabbit">Lapin</option>
</select>
Là également, il est possible de présélectionner une option à l’aide de l’attribut selected. Vous pouvez également désactiver une option (qui apparaîtra grisée et qui ne sera pas sélectionnable) à l’aide de l’attribut disabled.
Vous pouvez aussi organiser les options différentes à l’aide de la balise <optgroup> qui vous permettra de créer des sections dans vos options disponibles. Cette balise possède un attribut label afin de définir le titre à afficher pour la section délimitée. Voici un exemple complet :
<label for="animal">Votre animal préféré ?</label>
<select id="animal" name="animal">
<optgroup label="Animaux de compagnie">
<option value="cat">Chat</option>
<option value="dog">Chien</option>
<option value="rabbit">Lapin</option>
</optgroup>
<optgroup label="Animaux de la ferme">
<option value="cow">Vache</option>
<option value="pig">Cochon</option>
<option value="sheep">Mouton</option>
</optgroup>
</select>
Si vous souhaitez afficher un champ blanc tant que l’utilisateur n’a pas interagi avec le sélecteur, il faudra alors créer une balise <option> vide en premier afin de ne pas afficher de valeur par défaut.
Soumettre le formulaire
Votre formulaire est enfin prêt, vous savez comment créer des champs, les personnaliser et surtout choisir le format adéquat. Il ne reste plus qu'à ajouter un petit bouton permettant la soumission de votre formulaire ! Et là encore, il existe plusieurs solutions.
La balise <input type="submit">
Oui, vous avez bien lu, il existe une balise <input> que nous n’avions pas traité, le type submit, et pour cause, bien que ce soit une valeur pour la balise <input> ce n’est pas un champ à proprement parler, mais bien un bouton de soumission pour notre formulaire. Le message à afficher dans le bouton sera à saisir dans le champ value comme ceci :
<input type="submit" value="Valider et envoyer">
Rien de bien compliqué donc, cette configuration de la balise <input> permet de créer un bouton très simplement. Cependant, je ne vous conseille pas forcément cette technique. Si vous souhaitez ajouter une image, ou même une icône à votre bouton, vous ne pourrez pas le faire simplement car l’attribut value de la balise n’accepte que du texte. C’est pour cette raison que je vous recommande d’utiliser cette seconde technique :
La balise <button type=”submit”>
Il est également possible de créer un bouton de soumission à l’aide de la balise <button>, cependant, il ne faut pas oublier de lui passer l’attribut type à la valeur submit auquel cas, le bouton ne ferait rien. Cette méthode utilise la balise <button> qui est une balise classique, vous allez donc pouvoir insérer entre la balise ouvrante et la balise fermante le contenu que vous souhaitez comme par exemple, du texte, des icônes, des images ou tout autre élément HTML que vous désirez. Cette configuration vous donne une plus grande flexibilité, c’est donc cette technique que je choisi d’appliquer chaque fois que je créé un nouveau formulaire. Voici des exemples d’usage :
<button type="submit">Valider et envoyer</button>
<button type="submit">
<img src="images/chaton.webp" alt="Image du bouton envoyer">
</button>
Les attributs action, method
Maintenant que vous commencez à y voir clair dans tout ce fourbi de balises HTML, revenons aux bases, la balise <form>. En réalité, je ne vous avais pas tout dit à son sujet. Une fois votre formulaire rempli par les visiteurs de votre site web, ils vont vouloir le soumettre, et les valeurs seront alors envoyées, la question est “où et comment ?”.
Pour répondre à cette question, il faut savoir avant tout que lorsque l’on soumet un formulaire les valeurs sont envoyées vers le serveur, qui se chargera de les traiter. Pour la première partie de la question : “où ?”, il suffit de définir une URL sur laquelle nous souhaitons envoyer les valeurs. Pour cela, il faudra spécifier un attribut action qui prendra pour valeur l’URL de la page ou du script chargé de traiter les données reçues. Comme ceci:
<form action="/chemin/vers/traitement.php">
Pour la seconde partie de la question “comment ?”, il existe deux réponses, soit “en mode caché”, soit, par “l’url”. Nous pouvons envoyer les données vers le serveur en utilisant l’URL de la page, il faudra alors spécifier GET dans l’attribut method. Si vous ne souhaitez pas afficher les valeurs dans l’URL (comme par exemple un formulaire de connexion ou vous ne voulez pas que les mots de passes apparaissent en clair dans l’URL), il faudra utiliser la method POST.
<form action="/chemin/vers/traitement.php" method="POST">
D’une manière générale, la majorité des formulaires sur un site internet sont paramétrés pour envoyer les données en utilisant la méthode POST, en revanche, si vous omettez l’attribut method, le formulaire sera automatiquement configuré sur GET, veillez donc bien à toujours spécifier la méthode d'envoi des données.
L’envoi des fichiers
Lorsque votre formulaire comprend un champ <input type="file">, il faut ajouter un paramètre pour que le formulaire puisse prendre en charge l’envoi de fichiers vers le serveur. Pour cela, il faudra ajouter l’attribut enctype à votre balise <form> et y renseigner la valeur multipart/form-data. Si vous oubliez de spécifier cet attribut, le fichier ne sera tout simplement pas envoyé lors de la soumission du formulaire. Votre balise <form>, uniquement si vous souhaitez prendre en charge des fichiers, devrait alors ressembler à ceci :
<form action="/chemin/vers/traitement.php" method="POST" enctype="multipart/form-data">
<!-- Le contenu du formulaire -->
</form>
Réglages et organisation des champs
Après ce long chapitre, vous pourrez faire une pause, mais promis, c’est la dernière section, et elle est plus courte que les précédentes. Je vous avais prévenu, les formulaires en HTML, c’est quelque chose de complexe, et on ne peut pas y passer outre. Aller, courage !
L’attribut required
Si vous souhaitez rendre certains champs de votre formulaire obligatoire, vous devrez alors ajouter l’attribut required à votre champ, cela fonctionne avec tous les champs <input>, les <textarea> et les <select>. Si le champ n’est pas rempli, alors le formulaire ne se soumettra pas et le navigateur indiquera qu’un champ obligatoire est manquant, je vous recommande de toujours spécifier cet attribut lorsque c’est nécessaire, il n’y a rien de plus frustrant pour un utilisateur que de soumettre un formulaire incomplet et de devoir le saisir.
<input name="prenom" value="Ronan" required>
L’attribut disabled
Chaque champ de votre formulaire peut également être désactivable, que ce soit pour simplement présenter la valeur, ou indiquer à l’utilisateur que ce champ n’est pas éditable. Pour cela, il suffit d’ajouter l’attribut disabled à votre champ. Ce dernier apparaîtra alors en grisé et la saisie sera rendu impossible pour l’utilisateur.
<input name="prenom" value="Ronan" disabled>
L’attribut autofocus
Un dernier attribut qu’il peut être intéressant de connaître est l’autofocus. Il permet de définir un champ afin de pouvoir débuter instantanément la saisie sans avoir à cliquer pour sélectionner le champ en question. Pour réaliser ça, je vous recommande d’appliquer l’attribut autofocus uniquement à votre premier champ dans la page, si la seule action de la page est de remplir le formulaire présenté (comme une page de connexion, d’inscription ou de contact par exemple).
<input name="prenom" value="Ronan" autofocus>
La balise <fieldset>
Lorsque votre formulaire commence à devenir complexe en terme de nombre de champs, il peut être judicieux d’organiser les champs par section. Vous pouvez créer une section très simplement en utilisant la balise <fieldset>, qui doit venir encadrer les champs afin de les regrouper, comme ceci :
<fieldset>
<label for="last_name">Nom</label>
<input id="last_name" name="last_name">
<label for="first_name">Prénom</label>
<input id="first_name" name="first_name">
<label for="email">Email</label>
<input type="email" id="email" name="email">
</fieldset>
Cette section apparaît alors avec un trait noir encadrant les champs, évidement, il est totalement possible de changer l'aspect visuel de la balise <fieldset> à l’aide du CSS.
Pour mieux s’y retrouver, il est également possible d’ajouter une légende à notre section, en ajoutant tout simplement une balise <legend> dans notre balise <fieldset> comme ceci :
<fieldset>
<legend>Les champs du profil</legend>
<label for="last_name">Nom</label>
<input id="last_name" name="last_name">
<label for="first_name">Prénom</label>
<input id="first_name" name="first_name">
<label for="email">Email</label>
<input type="email" id="email" name="email">
</fieldset>
Vous pouvez également désactiver tous les champs d’un coup en utilisant l'attribut disabled directement sur la balise <fieldset>, plutôt que sur chaque champ indépendamment les uns des autres.
Exemple de formulaire complet
Pour récapituler, voici un exemple de structure HTML qui pourrait vous servir à créer un formulaire de contact. Vous pouvez conserver ce code, il pourra vous servir plus tard.
En effet ce formulaire ne paie pas de mine, mais sa structure HTML est idéale pour un formulaire de contact. Il faudra le styliser par la suite avec du CSS.
Vous devez être connecté pour pouvoir commenter. Se connecter