Commentaires
On peut aussi faire des formulaires en HTML, cela permet d'avoir un endroit ou l'utilisateur peut entrer des informations pour nous les communiquer. Le traitement des formulaires ne se fait pas en HTML, il faut utiliser d'autres langages comme le javascript ou le php, on verra ça plus tard, mais en attendant on peut déjà voir comment créer le formulaire.

Les champs de saisie


<input type="text">


Il existe deux champs principaux qui permettent à un utilisateur de saisir quelque chose au clavier. Le premier <input type="text"> permet une saisie monoligne, et comme beaucoup de champs de formulaire c'est une balise auto-fermante.



On peut préciser une valeur aussi pour préremplir le champ avec l'attribut value.



<textarea>


Et il y en a un deuxième pour la saisie multi-ligne qui est <textarea> lui par contre nécessite une balise de fermeture, car il n'utilise pas l'attribut value, la valeur se trouve entre la balise d'ouverture et celle de fermeture.



De plus on peut préciser un attribut rows pour définir le nombre de lignes et cols pour le nombre de colonnes, par exemple :



Mais on les utilisera assez peu, car on peut aussi ajuster la taille du textarea en css, et l'adapter automatiquement à toutes les tailles d'écran, ce qui n'est pas le cas avec ces attributs.

Les labels et name


<label>


Le label n'est pas un champ de saisie, mais un titre pour ces champs. C'est un élément extrêmement important qui permet à l'utilisateur de comprendre ce qui est attendu dans chaque champ.

En plus de ça, le label a un intérêt majeur en terme d'accessibilité.

Arthur, l'apprenti développeurAccessibilité ?

C'est un sujet à part entière, pour résumer, c'est de rendre ton site accessible à tout le monde, y compris aux personnes en situation de handicap comme les malvoyants.

Arthur, l'apprenti développeurAh je ne savais pas qu'il fallait faire ça.

C'est primordial, mais le sujet est très large donc je ne vais pas développer maintenant, sache que ça existe et qu'il y a des moyens en html comme en css d'améliorer l'accessibilité, le label en fait partie. Pour cela on ajoute un attribut "for" qui permet d'associer le label à un champ de formulaire. Il faut que la valeur dans l'attribut for soit égale à l'id de l'élément, par exemple :



<balise name="value">


On peut aussi préciser un attribut name dans tous les champs de formulaire, et c'est même fortement recommandé !

Arthur, l'apprenti développeurEt ça sert à quoi ? J'imagine à donner un nom au champ, mais pourquoi ?

C'est effectivement pour donner un nom au champ, et ça servira pour le traitement du formulaire, comme ça chaque valeur saisie par l'utilisateur aura un nom.



Les champs de sélection


<input type="radio">



Il existe d'autres champs de formulaire, pour de la sélection, ce sont des champs préremplis, et l'utilisateur doit choisir une ou plusieurs valeurs, par exemple il y a le <input type="radio">



Avec celui ci on prévoit une liste d'éléments et l'utilisateur ne peut en sélectionner qu'un au maximum.

Arthur, l'apprenti développeurMais... Tu as mis le même attribut name sur tous les radio, c'est normal ?

Tout à fait, dans le cas du radio, le name permet aussi au navigateur de créer un groupe, ainsi tu ne pourras sélectionner qu'un radio du groupe "age" et si tu fait un autre groupe avec un autre name, l'utilisateur pourra à la fois sélectionner une valeur dans le groupe age et une autre valeur dans le deuxième groupe.

Arthur, l'apprenti développeurOk c'est pratique !

<input type="checkbox">



On a ensuite le checkbox, c'est un peu comme un radio, mais avec celui-ci, l'utilisateur peut sélectionner plusieurs valeurs.



Attention cette fois ci, j'ai ajouté des crochets dans le name, c'est une notation que l'on retrouve dans beaucoup de langages de programmation [] signifie un tableau, car dans le cas du checkbox on ne va pas avoir une seule valeur, mais un tableau de valeurs car l'utilisateur peut en cocher plusieurs.

Arthur, l'apprenti développeurOk je retiens. [] c'est un tableau

<select>


Il existe un dernier champ de sélection, c'est le <select>. Celui-ci est un peu particulier, car le <select> est un conteneur, et il contient des <options> une pour chaque valeur. C'est le <select> qui portera l'attribut name, et les options l'attribut value



Mais pour ce champ, la première valeur est celle sélectionnée par défaut, contrairement au checkbox.

Arthur, l'apprenti développeurOk, c'est plutôt simple en fait !

Les boutons



On peut aussi réaliser des boutons dans un formulaire, il en existe plusieurs types.

<button>


C'est un bouton simple, mais qui n'a aucune action particulière. Il va servir pour créer des fonctionnalités spécifiques en javascript, donc on ne va pas l'utiliser pour le moment, et je te déconseille fortement de l'utiliser dans un formulaire, ça pourrait poser des problèmes.

<input type="button">


C'est à peu de chose près la même chose que le <button>, et pareil on l'utilisera pour faire des fonctionnalités javascript, mais à éviter dans un formulaire.

<input type="submit">


Celui-ci est déjà plus intéressant, il permet d'envoyer le formulaire, je sais que pour le moment nous n'avons rien de prévu pour le recevoir, mais c'est important de le connaitre.



Arthur, l'apprenti développeurOk donc on le met à la fin du formulaire, et on met un attribut value pour le texte dans le bouton.

C'est exact pour l'attribut. Pour la position, ça n'a pas vraiment d'importance, on peut le mettre au milieu, au début, à la fin, ça fonctionnera de toute façon, mais c'est généralement plus pratique pour l'utilisateur que le bouton soit à la fin.

<input type="image">



Celui-ci fonctionne exactement comme le submit, à la différence que l'on peut lui donner le chemin vers une image qui s'affichera à la place du bouton.



Arthur, l'apprenti développeurAh c'est super pour personnaliser le formulaire ça !

En effet, mais tu verras plus tard qu'il y a d'autres moyens pour vraiment personnaliser un formulaire.

<input type="reset">



Ce dernier bouton permet de réinitialiser tous les champs d'un formulaire, ils reprendront la valeur qu'ils avaient au chargement de la page.



Arthur, l'apprenti développeurOk les boutons j'ai compris.

D'autres champs



hÉ bien c'est loin d'être fini, il existe de nombreux autres champs de formulaire.

Arthur, l'apprenti développeurBeaucoup?

Oui, mais ils sont assez simpleS, et presque tous baséS sur le champ <input type="text"> mais avec quelques subtilités.

<input type="password">


Ce champ sert pour que l'utilisateur puisse écrire un texte, qui ne doit pas s'afficher à l'écran pour des raisons de sécurité, comme un mot de passe pour se connecter au site. Les caractères saisis seront affichés généralement sous la forme d'un point ou d'une étoile.



<input type="email">


Ce champ se comporte exactement comme un texte, mais le format va être vérifié lorsque le formulaire est envoyé, et s'il ne correspond pas au format d'une adresse e-mail, une erreur va s'afficher et le formulaire ne sera pas envoyé.



<input type="date">


Ce champ permet la sélection d'une date, on peut d'ailleurs préciser des attributs min et/ou max pour définir si la date doit être dans cet intervalle.



<input type="file">


Celui-ci permet d'ajouter un fichier pour le télécharger sur le serveur, le traitement côté serveur ne sera pas pour aujourd'hui, mais c'est intéressant de savoir que c'est possible !



<input type="number">



Le champ number permet la saisie d'un nombre, il va empêcher la saisie de caractère alphabétique. On peut ici aussi définir un min et max si on le souhaite.





<input type="time">



Similaire au champ date, il permet la saisie d'une heure et minute. De même, min et max peuvent être utilisés pour définir un intervalle, mais cet intervalle ne fonctionne pas sur tous les navigateurs.



<input type="url">



Le champ url, similaire à e-mail, il permet de saisir une url, et le format sera vérifié à l'envoi du formulaire.



<input type="color">



Et enfin, le champ color, qui permet la sélection d'une couleur dans une palette. Le code retourné sera en hexa.



Arthur, l'apprenti développeurPfiou, ça en fait beaucoup !

Et encore j'en ai passé quelques-unes qui ne sont pas vraiment au point sur tous les navigateurs, ou trop peu intéressantes pour être utilisées. Mais ne t'inquiète pas, il n'y a pas besoin de toutes les retenir par cœur, tu sauras les trouver le jour où tu en auras besoin.

Arthur, l'apprenti développeurOuf, ça me rassure un peu, je pense que j'en ai déjà oublié la moitié. J'ai terminé cette partie
Demander de l'assistance