Créer des éléments de formulaire HTML avec différents types d'entrée

Introduction

Dans ce laboratoire (lab), les étudiants apprendront à créer des éléments de formulaire HTML complets en utilisant différents types d'entrées (inputs). Le laboratoire propose une approche structurée pour comprendre les attributs des balises de formulaire, implémenter différents éléments d'entrée et explorer les techniques de conception de formulaires. Les participants acquerront une expérience pratique avec les entrées de texte, les boutons radio, les cases à cocher, les téléchargements de fichiers et les boutons de soumission, développant ainsi les compétences essentielles en développement web pour créer des formulaires web interactifs et conviviaux.

Le laboratoire couvre des concepts clés tels que la configuration des balises de formulaire, les variations de types d'entrée et les stratégies pratiques d'implémentation. En travaillant sur des exercices étape par étape, les apprenants comprendront comment structurer des formulaires, définir les attributs d'entrée et créer des éléments d'interaction utilisateur dynamiques qui sont essentiels pour collecter et traiter les données utilisateur dans les applications web.

Comprendre la balise de formulaire et ses attributs de base

Dans cette étape, vous allez apprendre à connaître les balises de formulaire HTML et leurs attributs de base. Les formulaires sont essentiels pour collecter les entrées des utilisateurs sur les pages web, permettant ainsi l'interaction entre les utilisateurs et les sites web.

Commençons par créer un formulaire HTML de base dans le WebIDE. Ouvrez un nouveau fichier dans le répertoire ~/project et nommez-le form_basics.html.

touch ~/project/form_basics.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Form Basics</title>
  </head>
  <body>
    <form action="/submit" method="post">
      <!-- Form elements will be added here -->
    </form>
  </body>
</html>

La balise <form> possède deux attributs clés :

action : Spécifie où les données du formulaire seront envoyées lors de la soumission
method : Définit comment les données sont envoyées (généralement "get" ou "post")

Décortiquons les attributs du formulaire :

action="/submit" : Cela serait généralement un point d'accès côté serveur qui traite les données du formulaire
method="post" : Envoie les données du formulaire dans le corps de la requête, plus sécurisé pour les informations sensibles

Exemple de sortie d'une structure de formulaire de base :

<form action="/submit" method="post">
  <!-- Form will look like this when rendered -->
</form>

Les attributs de formulaire courants incluent :

name : Identifie le formulaire
id : Identifiant unique pour le formulaire
target : Spécifie où afficher la réponse
enctype : Spécifie comment les données du formulaire doivent être encodées

Si vous affichez le formulaire dans un navigateur, il n'affichera pas encore de contenu visible. La structure du formulaire est la base pour ajouter des éléments interactifs tels que des champs de texte, des boutons radio, etc.

Implémenter des éléments d'entrée de texte

Dans cette étape, vous allez apprendre à connaître différents types d'éléments d'entrée de texte dans les formulaires HTML. Nous allons continuer à travailler avec le fichier form_basics.html créé à l'étape précédente.

Les entrées de texte sont des éléments de formulaire fondamentaux qui permettent aux utilisateurs d'entrer différents types d'informations basées sur du texte. Explorons différents types d'entrées :

Ouvrez votre fichier ~/project/form_basics.html et mettez à jour le formulaire avec différents éléments d'entrée de texte :

<form action="/submit" method="post">
  <!-- Single-line text input -->
  <label for="username">Username:</label>
  <input
    type="text"
    id="username"
    name="username"
    placeholder="Enter your username"
  />

  <!-- Email input -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter your email" />

  <!-- Password input -->
  <label for="password">Password:</label>
  <input
    type="password"
    id="password"
    name="password"
    placeholder="Enter your password"
  />

  <!-- Number input -->
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="0" max="120" />

  <!-- Multiline text input -->
  <label for="comments">Comments:</label>
  <textarea
    id="comments"
    name="comments"
    rows="4"
    cols="50"
    placeholder="Enter your comments"
  ></textarea>
</form>

Attributs clés pour les entrées de texte :

type : Définit le type d'entrée (texte, email, mot de passe, nombre)
id : Identifiant unique pour l'entrée
name : Nom utilisé lors de la soumission des données du formulaire
placeholder : Texte d'indication affiché avant l'entrée de l'utilisateur
min et max : Limites pour les entrées numériques
rows et cols : Dimensions pour la zone de texte (textarea)

Exemple de sortie lorsqu'il est affiché dans un navigateur :

Notes : Apprenez-en plus sur Comment prévisualiser des fichiers HTML dans le WebIDE.

Créer des éléments de sélection de boutons radio et de cases à cocher

Dans cette étape, vous allez apprendre à créer des boutons radio et des cases à cocher dans les formulaires HTML. Ces types d'entrées sont essentiels pour permettre aux utilisateurs de faire des sélections parmi des options prédéfinies.

Ouvrez votre fichier ~/project/form_basics.html et ajoutez les éléments de boutons radio et de cases à cocher suivants :

<form action="/submit" method="post">
  <!-- Radio Button Group -->
  <fieldset>
    <legend>Select Your Favorite Programming Language:</legend>
    <input type="radio" id="python" name="language" value="python" />
    <label for="python">Python</label>

    <input type="radio" id="javascript" name="language" value="javascript" />
    <label for="javascript">JavaScript</label>

    <input type="radio" id="java" name="language" value="java" />
    <label for="java">Java</label>
  </fieldset>

  <!-- Checkbox Group -->
  <fieldset>
    <legend>Select Your Skills:</legend>
    <input type="checkbox" id="html" name="skills" value="html" />
    <label for="html">HTML</label>

    <input type="checkbox" id="css" name="skills" value="css" />
    <label for="css">CSS</label>

    <input type="checkbox" id="javascript" name="skills" value="javascript" />
    <label for="javascript">JavaScript</label>
  </fieldset>
</form>

Points clés concernant les boutons radio et les cases à cocher :

Les boutons radio (type="radio") ne permettent qu'une seule sélection dans un groupe
Les cases à cocher (type="checkbox") permettent plusieurs sélections
L'attribut name regroupe les entrées liées
L'attribut value définit la valeur soumise
Les balises <fieldset> et <legend> aident à organiser et à étiqueter les groupes d'entrées

Exemple de sortie lorsqu'il est affiché dans un navigateur :

HTML form with radio buttons and checkboxes

Ajouter des boutons de téléchargement de fichiers et de soumission

Dans cette étape, vous allez apprendre à ajouter des entrées de téléchargement de fichiers et des boutons de soumission à votre formulaire HTML. Ces éléments sont essentiels pour permettre aux utilisateurs de télécharger des fichiers et de soumettre les données du formulaire.

Ouvrez votre fichier ~/project/form_basics.html et ajoutez les éléments suivants :

<form action="/submit" method="post" enctype="multipart/form-data">
  <!-- Previous form elements from previous steps -->

  <!-- File Upload Input -->
  <fieldset>
    <legend>Upload Your Profile Picture:</legend>
    <input type="file" id="profile-pic" name="profile-pic" accept="image/*" />
  </fieldset>

  <!-- Submit and Reset Buttons -->
  <div>
    <input type="submit" value="Submit Form" />
    <input type="reset" value="Clear Form" />
  </div>
</form>

Points clés concernant les boutons de téléchargement de fichiers et de soumission :

type="file" crée une entrée de téléchargement de fichiers
accept="image/*" limite la sélection de fichiers aux images
enctype="multipart/form-data" est requis pour les téléchargements de fichiers
type="submit" crée un bouton pour envoyer les données du formulaire
type="reset" efface toutes les entrées du formulaire

Exemple de sortie lorsqu'il est affiché dans un navigateur :

Attributs importants :

accept : Spécifie les types de fichiers autorisés
value : Définit le texte sur les boutons
name : Identifie l'entrée lors de la soumission

Pratiquer les combinaisons d'éléments de formulaire

Dans cette étape finale, vous allez créer un formulaire d'inscription complet qui combine tous les éléments de formulaire HTML que vous avez appris. Nous allons concevoir un formulaire d'inscription d'utilisateur qui démontre l'application pratique de différents types d'entrées.

Créez un nouveau fichier ~/project/registration_form.html avec le contenu suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>User Registration Form</title>
  </head>
  <body>
    <form action="/register" method="post" enctype="multipart/form-data">
      <h2>User Registration</h2>

      <!-- Personal Information -->
      <fieldset>
        <legend>Personal Details</legend>
        <label for="fullname">Full Name:</label>
        <input type="text" id="fullname" name="fullname" required />

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required />

        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="18" max="100" />
      </fieldset>

      <!-- Account Preferences -->
      <fieldset>
        <legend>Account Preferences</legend>
        <label>Preferred Programming Language:</label>
        <input type="radio" id="python" name="language" value="python" />
        <label for="python">Python</label>

        <input
          type="radio"
          id="javascript"
          name="language"
          value="javascript"
        />
        <label for="javascript">JavaScript</label>

        <label>Skills:</label>
        <input type="checkbox" id="web" name="skills" value="web" />
        <label for="web">Web Development</label>

        <input type="checkbox" id="data" name="skills" value="data" />
        <label for="data">Data Science</label>
      </fieldset>

      <!-- Profile Picture -->
      <fieldset>
        <legend>Profile Picture</legend>
        <input type="file" id="profile" name="profile" accept="image/*" />
      </fieldset>

      <!-- Additional Comments -->
      <fieldset>
        <legend>Additional Information</legend>
        <label for="comments">Comments:</label>
        <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
      </fieldset>

      <!-- Form Submission -->
      <div>
        <input type="submit" value="Register" />
        <input type="reset" value="Clear Form" />
      </div>
    </form>
  </body>
</html>

Caractéristiques clés de ce formulaire combiné :

Plusieurs types d'entrées (texte, email, nombre, boutons radio, cases à cocher)
Téléchargement de fichiers
Zone de texte (textarea) pour les commentaires supplémentaires
Boutons de soumission et de réinitialisation
Des <fieldset> pour organiser les sections du formulaire
Champs obligatoires et facultatifs

Exemple de sortie lorsqu'il est affiché dans un navigateur :

Résumé

Dans ce laboratoire, les participants ont appris les bases de la création de formulaires HTML en explorant les éléments et attributs essentiels des formulaires. Le laboratoire a guidé les étudiants dans la compréhension des structures des balises de formulaire, en mettant l'accent sur des attributs clés tels que action et method, qui définissent la manière dont les données du formulaire sont traitées et transmises. Les participants ont pratiqué la création de mises en page de formulaires de base et la mise en œuvre de différents types d'entrées, notamment les entrées de texte, les boutons radio, les cases à cocher et les éléments de téléchargement de fichiers.

L'approche pratique a permis aux apprenants de développer des compétences pratiques dans la conception de formulaires web interactifs, couvrant des aspects essentiels tels que la configuration des éléments d'entrée, les méthodes de soumission de formulaires et la conception de l'interaction utilisateur. En construisant progressivement les composants de formulaire, les étudiants ont acquis des connaissances sur la structuration d'interfaces web conviviales et fonctionnelles en utilisant les techniques standard de formulaires HTML.