4.1 Élément <fieldset>
Le groupement des éléments de formulaire permet de combiner logiquement des éléments associés, ce qui améliore la structure du formulaire et le rend plus convivial pour les utilisateurs. HTML propose deux balises pour le groupement des éléments de formulaire : <fieldset> et <legend>.
L'élément <fieldset> est utilisé pour grouper des éléments de formulaire associés à l'intérieur de <form>. Visuellement, cet élément est généralement affiché comme un cadre autour des éléments groupés, ce qui aide l'utilisateur à comprendre quels champs appartiennent au même groupe.
Exemple d'utilisation :
Dans cet exemple, on voit deux groupes d'éléments de formulaire : "Personal Information" et "Account Details", chacun encadré par l'élément <fieldset> et pourvu d'un titre <legend>.
HTML
<form action="/submit" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</fieldset>
<button type="submit" id="submit">Submit</button>
</form>
<script>
const inputs = document.getElementsByTagName("input");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
e.preventDefault();
const values = [];
let allValid = true;
for (let input of inputs) {
if (!input.validity.valid) {
allValid = false;
break;
}
values.push(input.value);
}
if (allValid) {
alert(
"Personal Information:\n" +
`Name: ${values[0]}\n` +
`Email: ${values[1]}\n\n` +
"Account Details:\n" +
`Username: ${values[2]}\n` +
`Password: ${values[3]}`
);
} else {
alert("Veuillez remplir tous les champs");
}
});
</script>
HTML
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</fieldset>
<input type="submit" value="Submit">
</form>
Attributs principaux de <fieldset> :
Attribut disabled : rend tous les éléments à l'intérieur de <fieldset> inaccessibles pour l'utilisateur (ils ne peuvent pas être modifiés et ne seront pas envoyés au serveur).
HTML
<fieldset disabled>
<legend>Disabled Group</legend>
<label for="disabled-field">This field is disabled:</label>
<input type="text" id="disabled-field" name="disabled-field">
</fieldset>
4.2 Élément <legend>
L'élément <legend> est utilisé pour ajouter un titre à un groupe d'éléments créé avec <fieldset>. Il aide l'utilisateur à comprendre l'objectif et le contexte du groupe de champs de formulaire.
Exemple d'utilisation :
HTML
<fieldset>
<legend>Contact Information</legend>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone">
<label for="address">Address:</label>
<input type="text" id="address" name="address">
</fieldset>
Caractéristiques de l'élément <legend> :
- Positionnement : l'élément
<legend>est toujours positionné à l'intérieur de<fieldset>, et il se situe généralement en haut du cadre. -
Texte : le texte à l'intérieur de
<legend>décrit le groupe de champs de formulaire, ce qui aide les utilisateurs à s'orienter rapidement dans le formulaire.
Conseils utiles pour l'utilisation de <fieldset> et <legend>
- Groupement logique : utilisez
<fieldset>et<legend>pour un groupement logique des éléments de formulaire — cela rendra le formulaire plus organisé et compréhensible pour l'utilisateur. -
Accessibilité : les éléments
<fieldset>et<legend>améliorent l'accessibilité du formulaire, en aidant les utilisateurs utilisant des technologies d'assistance à comprendre la structure et le contenu du formulaire. - Style et mise en forme : utilisez CSS pour styliser
<fieldset>et<legend>pour améliorer l'apparence du formulaire.
4.3 Exemples d'utilisation de <fieldset> et <legend>
Formulaire d'inscription avec groupement des champs :
HTML
<form form action="/submit" method="post">
<fieldset>
<legend>Personal Details</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" required>
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname" required>
</fieldset>
<fieldset>
<legend>Login Information</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</fieldset>
<button type="submit" id="submit">Submit</button>
</form>
<script>
const inputs = document.getElementsByTagName("input");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
e.preventDefault();
const values = [];
let allValid = true;
for (let input of inputs) {
if (!input.validity.valid) {
allValid = false;
break;
}
values.push(input.value);
}
if (allValid) {
alert(
"Personal Details:\n" +
`First name: ${values[0]}\n` +
`Last Name: ${values[1]}\n\n` +
"Login information:\n" +
`Username: ${values[2]}\n` +
`Password: ${values[3]}`
);
} else {
alert("Veuillez remplir tous les champs");
}
});
</script>
HTML
<form>
<fieldset>
<legend>Personal Details</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname">
</fieldset>
<fieldset>
<legend>Login Information</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</fieldset>
<input type="submit" value="Register">
</form>
Formulaire avec différents types de données :
HTML
<form action="/auth" method="post">
<fieldset>
<legend>Contact Information</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label for="newsletter">Subscribe to newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="updates">Receive updates:</label>
<input type="checkbox" id="updates" name="updates">
</fieldset>
<button type="submit" id="submit">Submit</button>
</form>
<script>
const form = document.querySelector("form");
const inputs = form.querySelectorAll("input");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
e.preventDefault();
let email = "";
let phone = "";
let newsletter = 0;
let updates = 0;
let allValid = true;
inputs.forEach((input) => {
if (input.type === "email" && (!input.validity.valid)) {
allValid = false;
} else if (input.type === "tel" && (!input.validity.valid)) {
allValid = false;
}
if (input.type === "email") {
email = input.value;
} else if (input.type === "tel") {
phone = input.value;
} else if (input.type === "checkbox") {
if (input.id === "newsletter") {
newsletter = input.checked ? 1 : 0;
} else if (input.id === "updates") {
updates = input.checked ? 1 : 0;
}
}
});
if (allValid) {
alert(
"Contact Information\n" +
`Email: ${email}\n` +
`Phone Number: ${phone}\n\n` +
"Preferences\n" +
`Subscribe to newsletter: ${newsletter}\n` +
`Receive updates: ${updates}`
);
} else {
alert("Les champs Email et Téléphone doivent être remplis");
}
});
</script>
HTML
<form>
<fieldset>
<legend>Contact Information</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label for="newsletter">Subscribe to newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="updates">Receive updates:</label>
<input type="checkbox" id="updates" name="updates">
</fieldset>
<input type="submit" value="Submit">
</form>
CSS
fieldset {
border: 2px solid #ccc;
padding: 20px;
}
legend {
font-weight: bold;
padding: 0 10px;
}
GO TO FULL VERSION