Création d'un formulaire avec la balise Fieldset

Introduction

La balise HTML <fieldset> est utilisée pour regrouper des éléments HTML ensemble, et elle peut aider à créer des documents organisés et bien structurés. En utilisant la balise <fieldset>, on peut regrouper les champs liés dans un formulaire pour afficher les champs de formulaire de manière plus organisée.

Dans ce laboratoire, nous allons démontrer comment utiliser la balise <fieldset> pour créer des formulaires structurés et organisés.

Note: Vous pouvez pratiquer le codage dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_group("Grouping Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70756{{"Groupement d'éléments de formulaire HTML"}} html/head_elems -.-> lab-70756{{"Groupement d'éléments de formulaire HTML"}} html/layout -.-> lab-70756{{"Groupement d'éléments de formulaire HTML"}} html/doc_flow -.-> lab-70756{{"Groupement d'éléments de formulaire HTML"}} html/forms -.-> lab-70756{{"Groupement d'éléments de formulaire HTML"}} html/form_group -.-> lab-70756{{"Groupement d'éléments de formulaire HTML"}} html/form_access -.-> lab-70756{{"Groupement d'éléments de formulaire HTML"}} html/custom_attr -.-> lab-70756{{"Groupement d'éléments de formulaire HTML"}} end

Création d'une page HTML

Créez un fichier nommé index.html et écrivez la structure de base de la page HTML.

<!doctype html>
<html>
  <head>
    <title>Création d'un formulaire avec la balise Fieldset</title>
  </head>
  <body></body>
</html>

Création d'un formulaire avec Fieldset

Ajoutez un élément de formulaire au corps HTML, puis utilisez la balise <fieldset> pour regrouper les champs de formulaire liés. Nous ajouterons également la balise label aux éléments du formulaire pour ajouter une description au champ d'entrée.

<form>
  <fieldset>
    <legend>Détails de l'utilisateur</legend>
    <label for="fname">Prénom :</label>
    <input type="text" id="fname" name="firstname" /><br /><br />
    <label for="lname">Nom de famille :</label>
    <input type="text" id="lname" name="lastname" /><br /><br />
    <label for="email">Courriel :</label>
    <input type="email" id="email" name="email" /><br /><br />
  </fieldset>
  <fieldset>
    <legend>Détails du compte</legend>
    <label for="uname">Nom d'utilisateur :</label>
    <input type="text" id="uname" name="username" /><br /><br />
    <label for="pass">Mot de passe :</label>
    <input type="password" id="pass" name="password" /><br /><br />
  </fieldset>
  <input type="submit" value="Envoyer" />
</form>

Le code ci-dessus créera un formulaire structuré en deux <fieldset>. Le premier <fieldset> regroupe les détails personnels de l'utilisateur, et le second <fieldset> regroupe les détails du compte. Vous avez peut-être remarqué que nous avons utilisé la balise label pour fournir un contexte aux champs.

Ajout de CSS

Nous pouvons styliser le <fieldset> à l'aide de CSS pour lui donner un design approprié. Nous pouvons ajouter une bordure, une couleur de fond et un peu de remplissage pour que le <fieldset> ait l'air meilleur.

<style>
  fieldset {
    padding: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    margin: 5px;
    background-color: #f8f8f8;
  }
</style>

Ouvrez le fichier HTML sur votre navigateur pour voir le formulaire et l'essayer.

Résumé

La balise <fieldset> crée un document organisé et bien structuré. Elle est utile pour créer des formulaires. Utilisez les balises label pour fournir un contexte aux champs d'entrée. La balise <fieldset> regroupe les champs de formulaire liés et ajoute une bordure autour des champs concernés. Enfin, la mise en forme CSS apporte un design au <fieldset> qui le rend plus attrayant.