Les éléments <input> dont l'attribut type vaut "text" permettent de créer des champs de saisie avec du texte sur une seule ligne.

<input type="text">

Valeur Une chaîne de caractères (DOMString) qui représente la valeur contenue dans le champ texte.
Évènements change et input
Attributs pris en charge autocomplete, list, maxlength, minlengthpatternplaceholderrequiredsize.
Attributs IDL value
Méthodes select(), setRangeText(), setSelectionRange().

Valeur

L'attribut value d'un tel élément contient une chaîne de caractères (DOMString) qui correspond à la valeur contenue dans le champ texte. En JavaScript, cette valeur peut être récupérée avec la propriété HTMLInputElement.value JavaScript.

monTextInput.value;

Si aucune contrainte de validation n'est ajoutée (cf. Validation pour plus d'informations), la valeur peut être n'importe quelle chaîne de caractères voire la chaîne vide ("").

Utiliser <input type="text">

Les éléments <input> de type text sont utilisés pour créer des champs texte sur une seule ligne. Ils doivent être utilisés lorsqu'on souhaite saisir du texte sur une ligne et qu'il n'existe pas de meilleur contrôle disponible pour la valeur (ainsi, s'il s'agit d'une date, d'une URL, d'une adresse électronique ou d'une recherch, on pourra par exemple utiliser des éléments plus pertinents).

Exemple simple

<form>
  <div>
    <label for="uname">Veuillez choisir un nom d'utilisateur :</label>
    <input type="text" id="uname" name="name">
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>

Voici ce qui sera obtenu :

Lorsque le formulaire est envoyé, la paire nom/valeur est envoyée au serveur sous la forme uname=Chris (si "Chris" était le texte qui avait été saisi avant d'envoyer le formulaire). Il faut veiller à bien avoir un attribut name pour l'élément <input> car sinon, rien ne sera envoyé.

Utiliser des textes indicatifs (placeholders)

Il est possible de fournir un texte indicatif qui sera affiché dans le champ lorsqu'aucune valeur n'a été saisi. Pour cela, on utilise l'attribut placeholder. Par exemple :

<form>
  <div>
    <label for="uname">Veuillez choisir un nom d'utilisateur :</label>
    <input type="text" id="uname" name="name"
           placeholder="Un seul mot, en minuscules">
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>

Voici le résultat qui sera obtenu :

Contrôler la taille physique de l'élément

La taille physique du champ de saisie peut être adaptée grâce à l'attribut size. Sa valeur correspond au nombre de caractères qui seront affichés simultanément. Voici par exemple, un fragment de code HTML où la contrôle de saisie affichera au plus 30 caractères en même temps (on pourra saisir un texte plus long mais toutes les lettres ne seront pas affichées) :

<form>
  <div>
    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
    <input type="text" id="uname" name="name"
           placeholder="Un seul mot, en minuscules"
           size="30">
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>

Validation

Les éléments <input> de type text ne possède pas de mécanisme de validation automatique. En revanche, il est possible d'ajouter certaines contraintes qui seront vérifiées côté client et que nous allons voir ici.

Attention ! Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

Un aparté sur la mise en forme

Les pseudo-classes CSS :valid et :invalid sont utiles pour mettre en forme les éléments qui ne respectent pas les contraintes de validation. Dans la suite de cette section, nous utiliserons cette feuille de style afin d'afficher une coche ou une croix après les valeurs valides ou invalides.

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute; content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

Comme le montrent les sélecteurs utilisés, cette technique s'appuie sur la présence d'un élément <span> placé après le formulaire et qui joue le rôle de réceptacle pour les icônes. Cette méthode de contournement est nécessaire car certains navigateurs n'affichent pas les icônes placées directement sur les éléments de formulaire.

Rendre la valeur obligatoire

On peut utiliser l'attribut required afin d'indiquer que la valeur doit être remplie avant de pouvoir envoyer le formulaire :

<form>
  <div>
    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
    <input type="text" id="uname" name="name" required>
    <span class="validity"></span>
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>

Ce qui produira ce résultat :

Si vous tentez d'envoyer le formulaire sans avoir saisi de valeur dans le champ texte, le navigateur affichera un message d'erreur.

Contraindre la longueur du texte saisi

Il est possible d'indiquer la longueur minimale du texte grâce à l'attribut minlength. De même, on peut utiliser l'attribut maxlength pour indiquer le nombre maximal de caractères attendus.

Dans l'exemple suivant, pour que le texte soit valide, il faut qu'il soit plus long que 4 caractères et moins long que 8 caractères.

<form>
  <div>
    <label for="uname">Choisir un nom d'utilisateur : </label>
    <input type="text" id="uname" name="name" required size="45"
           placeholder="Le nom d'utilisateur doit mesurer entre 4 et 8 caractères"
           minlength="4" maxlength="8">
    <span class="validity"></span>
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>

Voici le résultat qui est alors obtenu :

Si vous essayez d'envoyer le formulaire avec un nom d'utilisateur plus court (que 4 caractères), le navigateur affichera un message d'erreur. De plus le navigateur empêchera de saisir une valeur plus longue que 8 caractères.

Contraindre un format spécifique (expression rationnelle)

L'attribut pattern permet d'indiquer une expression rationnelle que devra respecter la valeur saisie afin d'être valide (cf. Valider un champ par rapport à une expression rationnelle pour une introduction).

Dans l'exemple qui suit, on restreint le format du texte afin que ce soit un texte en minuscules (pour lequel seules les lettres de "a" à "z" sont autorisées) et qui mesure entre 4 et 8 caractères.

<form>
  <div>
    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
    <input type="text" id="uname" name="name" required size="45"
           pattern="[a-z]{4,8}">
    <span class="validity"></span>
    <p>Un nom d'utilisateur doit être en minuscules sur 4 à 8 caractères.</p>
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>
div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

Voici le résultat qui sera obtenu :

Exemples

En plus des exemples précédents, vous pouvez consulter les articles Un premier formulaire en HTML et Comment organiser un formulaire HTML.

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<input type="text">' dans cette spécification.
Standard évolutif Définition initiale.
HTML 5.1
La définition de '<input type="text">' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 (Oui) 1.0 (1.7 ou moins) (Oui) (Oui) 1.0
Fonctionnalité Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile iOS WebKit
(Safari/Chrome/Firefox/etc)
Support simple (Oui) (Oui) (Oui) 4.0 (4.0) (Oui) (Oui) (Oui)

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,