Les différents champs texte d'un formulaire

Quand on débute, on a tendance à utiliser le même champ partout. Pourtant, HTML propose plusieurs types de champs texte, et chacun aide un peu mieux le navigateur et l'utilisateur. Dans ce cours, nous allons les découvrir pour comprendre à quoi ils servent vraiment.

Pourquoi spécialiser un champ input ?

À première vue, beaucoup de champs se ressemblent. Dans tous les cas, on voit une zone de saisie dans laquelle l'utilisateur peut taper quelque chose.

Mais un prénom, une adresse e-mail, une date ou un mot de passe ne se saisissent pas de la même façon. HTML permet donc de spécialiser un champ avec l'attribut type.

Cela apporte plusieurs avantages :

• le navigateur comprend mieux ce que vous attendez,
• il peut afficher un clavier plus adapté sur mobile,
• il peut parfois aider à la validation,
• l'expérience utilisateur devient plus claire.

Autrement dit, on ne change pas seulement l'apparence d'un champ. On lui donne aussi un rôle plus précis.

Le champ de base : text

Le type text est le champ texte le plus simple. C'est celui qu'on utilise quand l'utilisateur doit saisir un contenu libre et court, comme un prénom, un nom de ville ou un titre.

Si vous ne précisez aucun type, le navigateur considère déjà qu'il s'agit d'un champ texte classique. Écrire type="text" reste malgré tout une bonne habitude, car le code est plus explicite.

						
							<label for="prenom">Prénom</label>
							<input type="text" id="prenom" placeholder="Nicolas">
						
					

Ce champ convient très bien à une information courte et libre.

Le champ email

Quand vous attendez une adresse e-mail, il est préférable d'utiliser type="email" au lieu d'un simple champ texte.

Le navigateur comprend alors qu'il doit recevoir une adresse de type nom@domaine.ext. Il peut aussi afficher un clavier plus pratique sur mobile, avec le symbole @ plus accessible.

						
							<label for="email">Adresse e-mail</label>
							<input type="email" id="email" placeholder="bonjour@monsite.fr">
						
					

Attention ! Ce type aide le navigateur, mais il ne remplace pas une vraie vérification côté serveur. Il s'agit d'une aide, pas d'une sécurité complète.

Le champ pour entrer un numéro de téléphone

Pour un numéro de téléphone, on utilise souvent type="tel".

Ce type n'impose pas un format universel, car les numéros changent selon les pays. En revanche, il indique clairement qu'on attend un numéro de téléphone, et cela suffit souvent à faire apparaître un clavier numérique plus pratique sur smartphone.

						
							<label for="telephone">Téléphone</label>
							<input type="tel" id="telephone" placeholder="06 12 34 56 78">
						
					

C'est un bon exemple de champ spécialisé qui améliore surtout le confort de saisie.

Le champ nombre

Le type number sert à saisir une valeur numérique, par exemple un âge, une quantité ou un nombre de places.

Selon le navigateur, ce champ peut afficher de petites flèches pour augmenter ou diminuer la valeur. Vous pouvez aussi lui ajouter des attributs comme min, max et step.

						
							<label for="age">Âge</label>
							<input type="number" id="age" min="0" max="120" step="1">
						
					

Ici, le navigateur sait qu'il attend une valeur numérique.

Attention ! Un numéro de téléphone n'est pas un vrai nombre à calculer. Il vaut donc mieux garder tel pour un téléphone et réserver number aux données numériques.

Le champ pour entrer une url

Si l'utilisateur doit saisir l'adresse d'un site, d'un portfolio ou d'un profil, vous pouvez utiliser type="url".

Là encore, le navigateur comprend mieux la nature de la donnée attendue. Sur mobile, cela peut aussi adapter le clavier.

						
							<label for="site">Votre site</label>
							<input type="url" id="site" placeholder="https://www.monsite.fr">
						
					

Le sélecteur de date, time et datetime-local

Certains champs n'attendent pas seulement un texte, mais une date ou une heure précise. HTML propose pour cela plusieurs types spécialisés.

• date pour choisir une date,
• time pour choisir une heure,
• datetime-local pour combiner les deux.

Selon le navigateur, ces champs peuvent afficher un mini calendrier ou un sélecteur horaire. L'apparence varie souvent d'un système à l'autre, ce qui est normal.

						
							<label for="rdv_date">Date du rendez-vous</label>
							<input type="date" id="rdv_date">

							<label for="rdv_heure">Heure</label>
							<input type="time" id="rdv_heure">

							<label for="rdv_complet">Rendez-vous complet</label>
							<input type="datetime-local" id="rdv_complet">
						
					

Le rendu exact dépend du navigateur, mais le rôle du champ reste le même.

Le champ qui permet d'uploader un fichier : file

Le type file permet à l'utilisateur de choisir un fichier sur son appareil. C'est ce qu'on utilise pour envoyer une photo de profil, un CV ou un document.

Ici, on ne tape pas un texte à la main. On ouvre plutôt un sélecteur de fichiers grâce au navigateur.

						
							<label for="cv">Votre CV</label>
							<input type="file" id="cv">
						
					

Attention ! Pour qu'un vrai formulaire puisse envoyer un fichier, il faut ensuite configurer correctement la balise form. Nous restons ici concentrés sur le type de champ lui-même.

Le champ pour entrer un mot de passe

Le type password sert à masquer les caractères saisis. L'utilisateur tape bien du texte, mais celui-ci n'est pas affiché en clair à l'écran.

Ce n'est pas un système de sécurité complet à lui seul, mais c'est la bonne base pour une saisie confidentielle.

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

La barre de recherche

Le type search ressemble beaucoup à text, mais il sert à indiquer qu'on est dans un contexte de recherche.

Selon les navigateurs, il peut afficher un style légèrement différent ou une petite croix pour vider rapidement le champ.

						
							<label for="recherche">Rechercher</label>
							<input type="search" id="recherche" placeholder="Chercher un cours...">
						
					

Afficher un sélecteur de couleur avec color

Le type color fait apparaître un sélecteur de couleur. L'utilisateur ne saisit pas forcément le code hexadécimal à la main, car le navigateur propose souvent une interface visuelle.

Ce champ est pratique quand vous laissez choisir une teinte pour un thème, un avatar ou un élément d'interface.

						
							<label for="couleur">Couleur préférée</label>
							<input type="color" id="couleur" value="#007890">
						
					

Comment choisir le bon type ?

Le plus simple est de vous poser cette question : quelle information l'utilisateur est-il en train de saisir ?

• un texte libre court : text
• une adresse e-mail : email
• un téléphone : tel
• une valeur numérique : number
• une adresse web : url
• une date ou une heure : date, time ou datetime-local
• un fichier : file
• un mot de passe : password
• une recherche : search
• une couleur : color

Voilà la logique à retenir : un champ spécialisé n'est pas là pour faire joli. Il sert à rendre votre formulaire plus clair, plus pratique et plus cohérent.