Créer des formulaires HTML

Bienvenue dans la prochaine leçon ! Vous allez apprendre à créer des formulaires à l’aide de HTML. Les formulaires sont essentiels pour recueillir les données saisies par l’utilisateur, que vous pourrez ensuite traiter avec PHP. Commençons !

Que sont les formulaires HTML ?

Les formulaires HTML servent à recueillir les données saisies par l’utilisateur. Ils permettent aux utilisateurs de remplir des champs, de faire des choix et d’envoyer des données à un serveur pour traitement.

Exemple : Un formulaire de connexion dans lequel les utilisateurs saisissent leur nom d’utilisateur et leur mot de passe.

Point essentiel : Les formulaires servent d’intermédiaire entre l’utilisateur et vos scripts PHP.

Créer un formulaire simple

Voici comment créer un formulaire HTML de base :

Explication :

• action : indique le fichier PHP chargé de traiter les données du formulaire.
• method : indique comment envoyer les données (GET ou POST).
• required : garantit que le champ doit être rempli avant l’envoi.

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

Éléments de formulaire

Les formulaires peuvent inclure différents types de champs pour recueillir diverses sortes de données :

• text : pour la saisie de texte sur une seule ligne.
• email : pour les adresses e-mail.
• password : pour la saisie d’un mot de passe.
• checkbox : pour les choix multiples.
• radio : pour un choix unique.
• submit : pour envoyer le formulaire.

Exemple :

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

Utiliser des boutons radio

Les boutons radio permettent aux utilisateurs de sélectionner une option parmi un groupe. Exemple :

Conseil : Utilisez le même attribut name pour tous les boutons radio d’un groupe.

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

Utiliser des cases à cocher

Les cases à cocher permettent aux utilisateurs de sélectionner plusieurs options. Exemple :

Conseil : Utilisez une syntaxe de tableau (hobbies[]) pour recueillir plusieurs valeurs.

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

Menus déroulants

Les menus déroulants permettent aux utilisateurs de choisir une option dans une liste. Exemple :

Conseil : Utilisez selected pour définir une option par défaut.

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

Accessibilité des formulaires

Veillez à ce que vos formulaires soient accessibles à tous les utilisateurs :

• Utilisez des balises label associées aux champs à l’aide d’attributs for.
• Regroupez les champs associés à l’aide de fieldset et de legend.
• Testez l’utilisation des formulaires sur les appareils mobiles.

Conseil : Des formulaires accessibles améliorent l’expérience utilisateur de tout le monde !

Excellent travail !

Félicitations ! Vous avez appris à créer des formulaires HTML avec différents types de champs, notamment des champs de texte, des boutons radio, des cases à cocher et des menus déroulants. Les formulaires sont à la base de la saisie utilisateur dans le développement web. Dans la prochaine leçon, nous apprendrons à traiter les données des formulaires avec PHP. Continuons à coder !