Bienvenue dans notre cours résumé sur l’html5. Apprendre html 5 est une belle aventure, n’est ce pas?!. Chaque partie du cours vous présente une nouvelle balise qui a un objectif bien spécifié. On va découvrir dans cette partie de cours comment créer un formulaire dans notre page html? quels sont les éléments d’un formulaire html? et quelles balises utilisées?!
formulaire html : c'est quoi?
Comme vous avez constater , nos pages html sont jusqu’à maintenant des pages statiques à 100%. L’utilisateur ne peut pas interagir : saisir un commentaire, poser une question, s’inscrire au site….
Une page html qui contient un formulaire est une page qui tend d’etre une page dynamique. En effet, un formulaire peut contenir des zones de texte où l’utilisateur peut saisir son nom, son mot de passe (pour s’authentifier par exemple).Aussi, le formulaire peut contenir des listes de choix (choix multiples ou liste à un seul choix), des zones de commentaires, une zone de date, email,etc. Voici des exemples de formulaires :
Donc, on doit apprendre les balises nécessaires pour ajouter les différents éléments d(un formulaire html. Mais avant, je vous encourage à voir la vidéo suivante qui introduit cette partie avec un exemple :
Les éléments d'un formulaire html
Comme présenté dans la vidéo:
- Pour définir un formulaire html , on ajoute la balise <form></form>. Tous les éléments du formulaire se mettent à l’intérieur de cette balise.
- Pour ajouter du texte dans un formulaire html, on utilise la balise <label>texte</label>.
- Pour définir une zone de texte d’une seule ligne, on utilise la balise html <input type=”text”/>. A noté que cette balise input sert à insérer différents éléments d’un formulaire. En effet, c’est l’attribut type qui précise l’élément voulu. Voilà les autres possibilités :
- Pour créer une liste déroulante (par exemple: liste de villes), on utilise la balise <select></select>. Ensuite, on doit définir chaque possibilité via la balise <option>Choix_i</option>.
Exemple :
- On peut ajouter un champ commentaires, c’est à dire une zone de texte multiligne. Pour ce faire, on utilise la balise <textarea></textarea>. Cette balise peut etre utilisée avec ou sans les attributs rows et cols qui définissent respectivement le nombre de lignes à afficher (si rows=5 alors dès la ligne numéro 6, on aura la barre scroll qui s’affiche) et le nombre de colonnes.
- Pour insérer un bouton dans le formulaire, on peut utiliser la balise input avec type=’button’ ou ‘submit’ ou ‘reset’.Aussi, on a la balise <button type=’….’>le texte à afficher dans le bouton </button>
Attributs des champs d'un formulaire
Nous avons vu que la balise input , par exemple, doit obligatoirement avoir l’attribut type pour pouvoir spécifier l’élément à ajouter au formulaire. D’autres attributs peuvent etre utilisés , selon le besoin , c’est à dire qui ne sont pas obligatoires mais ont un role précis. Voilà une liste des attributs qu’on peut utilisé avec les éléments d’un formulaire html :
- value : valeur par défaut du champ
- placeholder : indication grisée dans le champ (disparaît au clic)
- disabled : champ non pris en compte, ne peut être modifié par l’utilisateur
- maxlength : nombre de caractères autorisé
- autofocus : champ sélectionné au chargement de la page
- required : champ obligatoire
- min et max : minimum et maximum pour les champs de type number
Voilà une vidéo qui détaille l’utilisation de chacun des attributs ci-dessus :
Vous pouvez suivre notre cours complet d’HTML. pour approfondir vos compétences sur le développement web en utilisant le langage html5.
Aussi, vous avez une playlist des vidéos (Explication en Darija arabe marocaine) bien organisée qui traite : Vidéos sur l’HTML5.
De plus, nous avons partagé une série des corrections des examens en html 5 et css3 sous format vidéos : Examens HTML 5 + CSS 3