6.2 Types de champs de formulaire

Dans cette section, nous allons explorer les différents types de champs de formulaire que vous pouvez utiliser avec la balise <input> et d'autres éléments pour collecter des données spécifiques auprès des utilisateurs. Chaque type de champ de formulaire a une utilisation spécifique et permet de capturer des données d'une manière appropriée.

Texte : <input type="text">

Le champ de texte est utilisé pour collecter une saisie de texte simple. Les utilisateurs peuvent entrer du texte alphanumérique dans ce champ. Voici un exemple d'utilisation du champ de texte :

<input type="text" name="nom" placeholder="Entrez votre nom" />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur text pour créer un champ de texte. L'attribut name est utilisé pour identifier le champ lors de la soumission du formulaire, et l'attribut placeholder affiche un texte indicatif à l'intérieur du champ.

Texte long : <textarea>

Le champ de texte long est utilisé lorsque vous souhaitez permettre aux utilisateurs de saisir plusieurs lignes de texte. La balise <textarea> est utilisée pour créer ce champ. Voici un exemple :

<textarea name="message" placeholder="Entrez votre message"></textarea>

Dans cet exemple, nous avons utilisé la balise <textarea> avec l'attribut name pour identifier le champ de texte long. L'attribut placeholder affiche un texte indicatif à l'intérieur du champ.

Mot de passe : <input type="password">

Le champ de mot de passe est utilisé pour collecter des mots de passe sensibles. Les caractères saisis dans ce champ sont masqués pour des raisons de sécurité. Voici un exemple :

<input type="password" name="motdepasse" placeholder="Entrez votre mot de passe" />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur password pour créer un champ de mot de passe. L'attribut name est utilisé pour identifier le champ lors de la soumission du formulaire, et l'attribut placeholder affiche un texte indicatif à l'intérieur du champ.

Case à cocher : <input type="checkbox">

La case à cocher est utilisée lorsque vous souhaitez donner aux utilisateurs la possibilité de sélectionner plusieurs options. Chaque case à cocher indépendante représente une option. Voici un exemple :

<input type="checkbox" name="langue" value="francais" /> Français
<input type="checkbox" name="langue" value="anglais" /> Anglais

Dans cet exemple, nous avons créé deux cases à cocher pour les langues. Les attributs name sont les mêmes pour les deux cases à cocher, ce qui indique qu'elles appartiennent au même groupe d'options. Les attributs value spécifient les valeurs associées à chaque case à cocher.

Bouton radio : <input type="radio">

Les boutons radio sont utilisés lorsque vous souhaitez que les utilisateurs fassent un seul choix parmi plusieurs options. Chaque bouton radio représente une option exclusive. Voici un exemple :

<input type="radio" name="genre" value="homme" /> Homme
<input type="radio" name="genre" value="femme" /> Femme

Dans cet exemple, nous avons créé deux boutons radio pour le genre. Les attributs name sont les mêmes pour les deux boutons radio, ce qui indique qu'ils appartiennent au même groupe d'options. Les attributs value spécifient les valeurs associées à chaque bouton radio.

Menu déroulant : <select>

Le menu déroulant permet aux utilisateurs de choisir une option parmi une liste déroulante. La balise <select> est utilisée pour créer ce champ. Voici un exemple :

<select name="pays">
    <option value="france">France</option>
    <option value="espagne">Espagne</option>
    <option value="italie">Italie</option>
</select>

Dans cet exemple, nous avons créé un menu déroulant pour les pays. Chaque option est définie avec la balise <option>. L'attribut value spécifie la valeur associée à chaque option.

Champ d'email : <input type="email">

Le champ d'email est utilisé pour collecter une adresse e-mail valide. Il peut également effectuer une validation de

base pour s'assurer que l'adresse e-mail est correctement formatée. Voici un exemple :

<input type="email" name="email" placeholder="Entrez votre adresse e-mail" />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur email pour créer un champ d'email. L'attribut name est utilisé pour identifier le champ lors de la soumission du formulaire, et l'attribut placeholder affiche un texte indicatif à l'intérieur du champ.

Recherche : <input type="search">

Le champ de recherche est utilisé pour collecter une requête de recherche. Il peut afficher un style de champ spécifique adapté aux fonctionnalités de recherche. Voici un exemple :

<input type="search" name="recherche" placeholder="Rechercher..." />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur search pour créer un champ de recherche. L'attribut name est utilisé pour identifier le champ lors de la soumission du formulaire, et l'attribut placeholder affiche un texte indicatif à l'intérieur du champ.

Téléphone : <input type="tel">

Le champ de téléphone est utilisé pour collecter un numéro de téléphone. Il peut également effectuer une validation de base pour s'assurer que le numéro de téléphone est correctement formaté. Voici un exemple :

<input type="tel" name="telephone" placeholder="Entrez votre numéro de téléphone" />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur tel pour créer un champ de téléphone. L'attribut name est utilisé pour identifier le champ lors de la soumission du formulaire, et l'attribut placeholder affiche un texte indicatif à l'intérieur du champ.

Champ d'URL : <input type="url">

Le champ d'URL est utilisé pour collecter une adresse URL valide. Il peut également effectuer une validation de base pour s'assurer que l'URL est correctement formatée. Voici un exemple :

<input type="url" name="site" placeholder="Entrez l'URL de votre site web" />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur url pour créer un champ d'URL. L'attribut name est utilisé pour identifier le champ lors de la soumission du formulaire, et l'attribut placeholder affiche un texte indicatif à l'intérieur du champ.

Champ numérique : <input type="number">

Le champ numérique est utilisé pour collecter des valeurs numériques. Il permet aux utilisateurs d'entrer des nombres, y compris des décimales. Voici un exemple d'utilisation du champ numérique :

<input type="number" name="prix" min="0" max="100" step="0.01" />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur number pour créer un champ numérique. Les attributs min et max définissent les valeurs minimale et maximale acceptées, tandis que l'attribut step spécifie l'incrémentation de la valeur.

Plage : <input type="range">

Le champ de plage permet aux utilisateurs de sélectionner une valeur à l'aide d'un curseur sur une plage donnée. Voici un exemple :

<input type="range" name="volume" min="0" max="100" step="1" />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur range pour créer un champ de plage. Les attributs min et max définissent les valeurs minimale et maximale de la plage, tandis que l'attribut step spécifie l'incrémentation du curseur.

Date : <input type="date">

Le champ de date permet aux utilisateurs de sélectionner une date à l'aide d'un calendrier ou d'un sélecteur de date. Voici un exemple :

<input type="date" name="naissance" />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur date pour créer un champ de date. L'attribut name est utilisé pour identifier le champ lors de la soumission du formulaire.

Date et heure : <input type="datetime-local">

Le champ de date et heure permet aux utilisateurs de sélectionner une date et une heure à l'aide d'un calendrier ou d'un sélecteur. Voici un exemple :

<input type="datetime-local" name="evenement" />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur datetime-local pour créer un champ de date et heure. L'attribut name est utilisé pour identifier le champ lors de la soumission du formulaire.

Mois : <input type="month">

Le champ de mois permet aux utilisateurs de sélectionner une année et un mois à l'aide d'un sélecteur. Voici un exemple :

<input type="month" name="periode" />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur month pour créer un champ de mois. L'attribut name est utilisé pour identifier le champ lors de la soumission du formulaire.

Champ d'heure : <input type="time">

Le champ d'heure permet aux utilisateurs de sélectionner une heure à l'aide d'un sélecteur. Voici un exemple :

<input type="time" name="heure" />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur time pour créer un champ d'heure. L'attribut name est utilisé pour identifier le champ lors de la soumission du formulaire.

Couleur : <input type="color">

Le champ de couleur permet aux utilisateurs de sélectionner une couleur à l'aide d'un sélecteur de couleur. Voici un exemple :

<input type="color" name="couleur" />

Dans cet exemple, nous avons utilisé l

'attribut type avec la valeur color pour créer un champ de couleur. L'attribut name est utilisé pour identifier le champ lors de la soumission du formulaire.

Bouton de soumission : <input type="submit">

Le bouton de soumission est utilisé pour envoyer le formulaire lorsqu'il est cliqué. Voici un exemple :

<input type="submit" value="Envoyer" />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur submit pour créer un bouton de soumission. L'attribut value spécifie le texte affiché sur le bouton.

Champ caché : <input type="hidden">

Le champ caché est utilisé pour stocker des données supplémentaires dans le formulaire, mais sans les afficher à l'utilisateur. Voici un exemple :

<input type="hidden" name="identifiant" value="12345" />

Dans cet exemple, nous avons utilisé l'attribut type avec la valeur hidden pour créer un champ caché. L'attribut name est utilisé pour identifier le champ, et l'attribut value spécifie la valeur du champ.

Conclusion

Dans cette section, nous avons exploré différents types de champs de formulaire que vous pouvez utiliser pour collecter des données spécifiques auprès des utilisateurs. Chaque type de champ a une utilisation spécifique, que ce soit pour la saisie de texte, les choix multiples, les dates, les nombres, etc. En utilisant ces champs de manière appropriée, vous pouvez créer des formulaires interactifs et conviviaux pour vos utilisateurs.

Il est important de choisir le bon type de champ en fonction des données que vous souhaitez collecter et de fournir des instructions claires et des indicateurs visuels pour guider les utilisateurs lors de la saisie des données. De plus, n'oubliez pas de valider et de sécuriser les données soumises avant de les traiter côté serveur pour garantir l'intégrité et la confidentialité des informations collectées.