Éléments de formulaire de différents types

7.1 Champ de texte

HTML offre de nombreux types de champs de saisie pour les formulaires, permettant aux utilisateurs d'entrer des données dans divers formats, tels que le texte, les e-mails, les dates et bien plus. Examinons en détail les différents types de saisie de données et leur utilisation.

L'élément <input type="text"> est utilisé pour entrer du texte sur une seule ligne. C'est le type de saisie le plus basique et le plus couramment utilisé.

Exemple d'utilisation :

    
      <label for="name">Nom :</label>
      <input type="text" id="name" name="name">
    
  

Attributs

• maxlength: limite le nombre maximum de caractères
• placeholder: texte indicatif qui s'affiche à l'intérieur du champ de saisie tant que l'utilisateur n'a pas commencé à entrer des données
• required: indique que le champ est obligatoire

Exemple avec attributs :

    
      <label for="username">Nom d'utilisateur :</label>
      <input type="text" id="username" name="username" maxlength="20" placeholder="Entrez le nom d'utilisateur" required>
    
  

7.2 Champs pour les nombres

L'élément <input type="number"> est utilisé pour entrer des valeurs numériques. Il permet de restreindre la saisie aux nombres et peut inclure des flèches pour augmenter ou diminuer la valeur.

Exemple d'utilisation :

    
      <label for="quantity">Quantité :</label>
      <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
    
  

Attributs

• min: définit la valeur minimale autorisée
• max: définit la valeur maximale autorisée
• step: détermine le pas de changement de la valeur
• value: définit la valeur initiale

7.3 Champs pour les e-mails

L'élément <input type="email"> est conçu pour entrer des adresses e-mail. Il vérifie si le texte saisi correspond au format d'une adresse e-mail.

Exemple d'utilisation :

    
      <label for="email">Email :</label>
      <input type="email" id="email" name="email" placeholder="example@example.com">
    
  

Attributs

• multiple: permet d'entrer plusieurs adresses e-mail, séparées par des virgules
• pattern: définit une expression régulière pour une vérification supplémentaire des données saisies

Exemple avec attributs :

    
      <label for="emails">Adresses e-mail (séparées par des virgules) :</label>
      <input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
    
  

7.4 Champs pour le numéro de téléphone

L'élément <input type="tel"> est utilisé pour entrer des numéros de téléphone. Il ne vérifie pas le format du numéro, mais permet de configurer un masque d'entrée via l'attribut pattern.

Exemple d'utilisation :

    
      <label for="phone">Téléphone :</label>
      <input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
    
  

Attributs

pattern: définit une expression régulière pour vérifier le format du numéro saisi.

Exemple avec attributs :

    
      <label for="phone">Téléphone :</label>
      <input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
    
  

7.5 Champs pour les dates

L'élément <input type="date"> est utilisé pour entrer des dates. Dans les navigateurs prenant en charge cette fonctionnalité, un widget de calendrier apparaît pour une sélection de date pratique.

Exemple d'utilisation :

    
      <label for="birthday">Date de naissance :</label>
      <input type="date" id="birthday" name="birthday">
    
  

Attributs

• min: définit la date minimale autorisée
• max: définit la date maximale autorisée

Exemple avec attributs :

    
      <label for="appointment">Date de rendez-vous :</label>
      <input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
    
  

7.6 Champs pour entrer le temps

L'élément <input type="time"> est utilisé pour entrer des horaires. Dans les navigateurs prenant en charge cette fonctionnalité, un widget de sélection d'heure apparaît.

Exemple d'utilisation :

    
      <label for="meeting_time">Heure de la réunion :</label>
      <input type="time" id="meeting_time" name="meeting_time">
    
  

Attributs

• min: définit l'heure minimale autorisée
• max: définit l'heure maximale autorisée
• step: détermine le pas de changement de l'heure

Exemple avec attributs :

    
      <label for="alarm">Réveil :</label>
      <input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
    
  

7.7 Champs pour entrer des URL

L'élément <input type="url"> est utilisé pour entrer des adresses web (URL). Il vérifie si le texte saisi correspond au format d'une URL.

Exemple d'utilisation :

    
      <label for="website">Site web :</label>
      <input type="url" id="website" name="website" placeholder="https://example.com">
    
  

Attributs

pattern: définit une expression régulière pour une vérification supplémentaire des données saisies.

Exemple avec attributs :

    
      <label for="personal_website">Site web personnel :</label>
      <input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
    
  

7.8 Champs pour entrer des mots de passe

L'élément <input type="password"> est utilisé pour entrer des mots de passe. Les données saisies sont masquées, remplacées par des symboles (par exemple, des étoiles ou des points).

Exemple d'utilisation :

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

Attributs

• maxlength: limite le nombre maximum de caractères
• placeholder: texte indicatif
• required: indique que le champ est obligatoire

Exemple avec attributs :

    
      <label for="new-password">Nouveau mot de passe :</label>
      <input type="password" id="new_password" name="new_password" maxlength="20" placeholder="Entrez le mot de passe" required>
    
  

7.9 Champs pour une plage de valeurs

L'élément <input type="range"> est utilisé pour entrer des valeurs dans une plage définie. Il est affiché sous la forme d'un curseur.

Exemple d'utilisation :

    
      <label for="volume">Volume :</label>
      <input type="range" id="volume" name="volume">
    
  

Attributs

• min: définit la valeur minimale autorisée
• max: définit la valeur maximale autorisée
• step: détermine le pas de changement de la valeur
• value: définit la valeur initiale

Exemple avec attributs :

    
      <label for="brightness">Luminosité :</label>
      <input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
    
  

7.10 Champs pour sélectionner une couleur

L'élément <input type="color"> est utilisé pour sélectionner une couleur. Dans les navigateurs prenant en charge cette fonctionnalité, un widget de sélection de couleur apparaît.

Exemple d'utilisation :

    
      <label for="favcolor">Choisissez votre couleur préférée :</label>
      <input type="color" id="favcolor" name="favcolor" value="#ff0000">
    
  

Attributs

• value: définit la couleur initiale.

7.11 Champs pour la recherche

L'élément <input type="search"> est utilisé pour entrer des requêtes de recherche. Dans la plupart des navigateurs, il possède des styles intégrés et une fonctionnalité pour effacer le texte saisi.

Exemple d'utilisation :

    
      <label for="search">Recherche :</label>
      <input type="search" id="search" name="search" placeholder="Entrez la requête de recherche">