Toolbox

Récap : formulaire HTML

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.
checkedsert à cocher par défaut la case où il sera placé.
autofocussert à placer le curseur automatiquement dans le champ à remplir où il sera placé.
requiredsert à 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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *