En HTML les formulaires sont contenus dans la balise <form></form>.
Pour créer un champ de formulaire on utilise la balise <input></input>.
Chaque balises <input></input> doivent être contenue dans une balise <p></p>.
Il existe plusieurs type de champ, que l’on définit avec l’attribut « type » (type= « ») :
type= « text » | met un petit champ de texte d’une ligne. |
type= « password » | met un champ où les caractères seront camouflés. |
type= « email » | met un champ dédié aux emails. |
type= « url » | met un champ dédié aux liens. |
type= « tel » | met un champ dédié aux numéro de téléphone. |
type= « number » | met un champ qui permet de choisir un numéro. |
type= « range » | même chose que « number », mais avec un curseur à déplacer. |
type= « color » | met un champ qui permet de choisir une couleur. |
type= « date » | met un champ qui permet de choisir une date. |
type= « week » | met un champ qui permet de choisir une date en sélectionnant une semaine. |
type= « month » | met un champ qui permet de choisir une date en sélectionnant un mois. |
type= « time » | met un champ qui permet de choisir une heure. |
type= « search » | met un champ de recherche. |
type= « checkbox » | permet de faire un champ à choix multiple. |
type= « radio » | permet de faire un champ à choix unique. |
type= « submit » | créé un bouton pour envoyer les réponses du formulaire au serveur. |
type= « button » | créer un bouton générique dont la fonction sera définit ultérieurement en javascript. |
type= « reset » | permet de remettre à zéro le formulaire. |
type= « image » | équivalent de « submit », mais sous forme d’image. (à la suite mettre src= « ») |
Les autres attributs :
method= « » | (à mettre dans la balise <form>) il définit par quel moyen les données vont être envoyées. valeurs : get, post (valeur la plus souvent utilisées). |
action= « » | c’est l’adresse de la page ou du programme qui va traiter les informations. ex: action= »traitement.php ». |
name= « » | permet d’attribuer un nom à une balise. Il est très utile pour repérer les réponses après que le serveur les ai récupérées. |
id= « » | sert à relier un <input></input> à un <label></label>. |
value= « » | dans un champ à remplir, il sert à mettre à pré-remplir celui-ci. Dans un bouton, il sert à définir ce qui va s’afficher dans ce-dernier. Dans la balise <option> il a la même fonction que « name= ». |
for= « » | ( à mettre dans une balise <label>) sert à relier un <label></label> à un <input></input>. |
placeholder= « » | dans un champ à remplir, il sert à donner un exemple. Il disparaît automatiquement lorsqu’on remplit le champ en question. |
checked | sert à cocher par défaut la case où il sera placé. |
autofocus | sert à placer le curseur automatiquement dans le champ à remplir où il sera placé. |
required | sert à définir que le champ, où il sera placé, doit obligatoirement rempli avant d’envoyer le formulaire. |
selected | (à mettre dans <option>) sert à choisir une valeur par défaut, dans la liste déroulante (créé avec <select></select>). |
min= « » | sert à définir un nombre minimum pour les champs « number » et « range ». |
max= « » | sert à définir un nombre maximum pour les champs « number » et « range ». |
step= « » | sert à définir un « pas » de déplacement (de n en n) pour les champs « number » et « range ». |
Les balises :
<textarea> | met un grand champ de texte avec plusieurs lignes. |
<label> | permet de mettre un libellé à un champ de formulaire. |
<select> | permet de mettre une liste déroulante. |
<option> | (à placer entre les balises <select></select>) permet d’ajouter une valeur à la liste déroulante. |
<optgroup> | permet de regrouper plusieurs valeurs d’une liste déroulante. |
<fieldset> | permet de regrouper plusieurs champs du formulaire. |
<legend> | permet de nommer une délimitation réaliser avec <fieldset></fieldset>. |
Pour changer le style des champs sélectionnés avec le curseur on utilisera en css « :focus », pour les champs obligatoire « :required » et pour les champs invalide « :invalid ».
Résumé en vidéo :
https://ada-lovelace.fr/wp-content/uploads/2019/12/formulaires.mp4