close

Introduction à Form HTML : structure, types d'entrée et exemples

HTML form est un élément crucial du développement Web qui permet aux utilisateurs d'interagir avec un site Web et de soumettre des données à un serveur. Form sont utilisés à des fins très diverses, telles que la collecte d' form informations sur les utilisateurs, le traitement des entrées des utilisateurs et l'activation des actions des utilisateurs sur un site Web. Dans cet article, nous allons explorer les attributs et les différents types de champs de saisie, sélectionner des éléments, des zones de texte et des boutons couramment utilisés en HTML form.

Champs de saisie

  • <input type="text">: crée un champ de saisie de texte dans lequel les utilisateurs peuvent saisir des caractères alphanumériques.
  • <input type="password">: Affiche un champ de saisie de mot de passe qui masque les caractères saisis.
  • <input type="email">: Fournit une validation par e-mail pour les champs de saisie qui nécessitent une adresse e-mail valide.
  • <input type="number">: Limite la saisie aux valeurs numériques uniquement.
  • <input type="checkbox">: Représente une case à cocher que les utilisateurs peuvent sélectionner ou désélectionner.
  • <input type="radio">: Représente un bouton radio qui permet aux utilisateurs de sélectionner une option parmi un groupe d'options.
  • <input type="file">: permet aux utilisateurs de sélectionner et de télécharger des fichiers.
  • <input type="submit">: Affiche un bouton qui soumet le form lorsqu'il est cliqué.
  • <input type="reset">: Affiche un bouton qui réinitialise le form à son état initial.
  • <input type="date">: Fournit un sélecteur de date pour sélectionner des dates.
  • <input type="time">: permet aux utilisateurs de saisir des valeurs de temps.

Sélectionner les éléments

  • <select>: Crée un menu déroulant avec des options sélectionnables.
  • <option>: Définit une option dans le menu déroulant, placée à l'intérieur de la <select> balise.
  • <optgroup>: Regroupe les options associées dans le menu déroulant.
  • <select multiple>: permet aux utilisateurs de sélectionner plusieurs options simultanément en maintenant enfoncée la touche Ctrl(ou la touche Commande sur Mac) tout en cliquant.

Zones de texte

<textarea>: crée un champ de saisie de texte multiligne dans lequel les utilisateurs peuvent saisir et modifier des blocs de texte plus longs. Il peut être redimensionné et configuré avec des attributs tels que rows et cols pour définir ses dimensions.

Boutons

<button>: Représente un bouton qui peut déclencher diverses actions dans un fichier form. Il peut être utilisé pour soumettre un form, par form une fonction JavaScript, ou naviguer vers une autre page.

Exemple d'utilisation :

<form action="/submit-form" method="post">  
  <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>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

Cet exemple présente l' utilisation de divers form éléments, notamment input les champs, textarea, et un bouton. N'hésitez pas à personnaliser les éléments et les attributs en fonction de vos besoins spécifiques. checkbox select dropdown submit form