Comment allez-vous créer un formulaire HTML?

Pour créer un formulaire HTML, j’utiliserai l’élément <form>. À l’intérieur, se trouveront des éléments de contrôle tels que des champs de texte (<input type="text">), des champs de mot de passe (<input type="password">), des cases à cocher (<input type="checkbox">), des boutons radio (<input type="radio">), des listes déroulantes (<select> et <option>), des zones de texte (<textarea>) et des boutons d’envoi (<button type="submit"> ou <input type="submit">).

Chaque élément du formulaire aura un attribut name pour l’identifier côté serveur et, en général, un attribut id pour le lier à une étiquette (<label>).

Attributs de <form>:

• action: URL vers laquelle les données du formulaire seront envoyées lors de la soumission.
• method: Méthode HTTP pour l’envoi des données (GET ou POST).
• enctype: Type d’encodage des données lors de l’envoi (par exemple, multipart/form-data pour le téléchargement de fichiers).

Exemple d’un formulaire simple:

<form action="/submit-form" method="post">
  <label for="username">Nom d’utilisateur :</label><br>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Mot de passe :</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Se souvenir de moi</label><br><br>

  <label for="country">Pays :</label><br>
  <select id="country" name="country">
    <option value="ru">Russie</option>
    <option value="us">États-Unis</option>
  </select><br><br>

  <label for="message">Message :</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <button type="submit">Envoyer</button>
</form>

La validation du formulaire peut être réalisée côté client (en utilisant les attributs de validation HTML5, JavaScript) ou côté serveur.

Attributs de validation HTML5:

• required: Champ obligatoire.
• minlength, maxlength: Longueur minimale et maximale du champ de texte.
• min, max: Valeur minimale et maximale pour les champs numériques.
• type avec différentes valeurs (email, url, number, date, etc.) pour une validation automatique par le navigateur.
• pattern: Expression régulière pour valider l’entrée.

Exemple avec validation HTML5:

<form action="/submit-form" method="post">
  <label for="email">Email :</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Âge (de 18 à 99) :</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Code postal (5 chiffres) :</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

  <button type="submit">Envoyer</button>
</form>

Pour styliser le formulaire, CSS sera utilisé. Pour une logique plus avancée ou un envoi asynchrone, JavaScript sera employé. Des attributs ARIA appropriés et une structure HTML correcte amélioreront l’accessibilité du formulaire.