Objectifs
- ِ Etre capable de travailler avec l'élément <fieldset> d'un formulaire.
Introduction
- La balise HTML <fieldset> est utilisée pour regrouper des éléments de formulaire associés.
- Ce regroupement rend les contrôles plus compréhensibles.
- L'utilisation de cet élément rend les documents plus accessibles aux personnes handicapées.
- Le nom du groupe est donné par le premier élément <legend>, qui est un enfant de l'élément <fieldset>.
Syntaxe
-
Syntaxe globale:
<fieldset> <legend> Titre </legend> ... contenu, formulaire ... </fieldset>Les attributs
Attribut Valeur Description disabled disabled Spécifie qu’un groupe d’éléments relié du formulaire doit être désactivé
Désactive tous les descendants de contrôle de formulaire de l'élément <fieldset>.form Id du formulaire Indique si l’élement <fieldset> appartient à un ou plusieurs formulaires name texte Indique le nom du groupe d’élément <fieldset> legend align = top | bottom | left | right La légende sera affichée respectivement sur le bord supérieur, inférieur, gauche, droite. Source:http://41mag.fr/liste-des-balises-html5 Exemples
<style> fieldset { width: 300px; border: 2px solid #dcdcdc; border-radius: 10px; padding: 10px 20px; text-align: leftt; } </style> <form> <fieldset> <legend>Renseignements personnels :</legend> Prénom & nom : <input name="nom" type="text" placeholder="Vos prénom et nom" /><br /> Mail : <input name="mail" type="text" placeholder= "Votre mail" style="margin-left: 68px;margin-top: 6px;" /><br /> </fieldset> <fieldset> <legend>Site web :</legend> Site web : <input name="adresse" type="text" placeholder="Votre Site Web"style="margin-left: 44px;" /> </fieldset> <fieldset> <legend>Message :</legend> <textarea cols="38" rows="10" placeholder="Votre message"></textarea> </fieldset> </form>Résultat
Applications
- Créer un formulaire comprenant un groupe de champs ayant pour titre "Vos coordonnés". Le groupe doit permettre la saisie du nom, du prénom, la date de naissance, de l’adresse, de la ville et du code postal.
- Créer un formulaire d'inscription qui comporte les champs: nom, prénom, email, login, mot de passe (à deux reprises) et un bouton d'envoie.
- Eléments de correction
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <div> <form name="inscription" method="post" action="#"> <fieldset> <legend>Inscription</legend> <div> Nom </div> <div > <input type="text" name="nom" class="exercice1_champ" /> </div><br /> <div > Prénom </div> <div> <input type="text" name="prenom" class="exercice1_champ" /> </div><br /> <div> Email </div> <div > <input type="text" name="email" class="exercice1_champ" /> </div><br /> <div > Mot de passe </div> <div > <input type="password" name="mdp" class="exercice1_champ" /> </div><br /> <div > Confirmer </div> <div> <input type="password" name="remdp" class="exercice1_champ" /> </div><br /> <div > </div> <div> <input type="submit" name="sinscrire" value="S'inscrire" /> </div><br /> </fieldset> </form> </div> </body> </html>
- Eléments de correction