Personnaliser la balise HTML input text

Un objet HTML pour entrer une simple ligne de texte dont la contenu fera partie des données d'un formulaire.

<form name="nomformulaire" action="" method="POST">
    <input type="text" name="nomtext" id="idtext" value="" /> 
</form>

On peut accéder aux attributs de l'objet par l'id ou par la chaîne de noms comme ceci:

document.nomformulaire.nomtext

Les objets input password et textarea sont similaires à input text.

Attributs de input text

La plupart sont des attributs de input. Maxlength et readonly sont spécifiques.

name et id
Nom de l'objet et l'identificateur.
Le nom a deux utilisations. Il sert à accéder à l'élément, mais devient aussi un nom de variable dans les données de formulaire quand elle sont passées par POST ou GET.
Ainsi si le nom est "montext" et le contenu de value "contenu", les données de formulaire contiendront &montext=contenu.
value
Contiendra le texte entré par l'utilisateur. On peut l'assigner avec un texte par défaut.
<input type="text" value="
Texte affiché par défaut" />
Ce contenu peut être assigné dynamiquement, pour ajouter un contenu aux données de formulaire, ou lu dynamiquement par un script.
Exemple de lecture: 
var contenu = document.nomformulaire.nomtext.value;
size
Largeur initiale du champ d'entrée de texte. Dans le cas présent, la taille correspond à un nombre de caractères (pour les autres objets c'est un nombre de pixels).
La largeur en pixels correspond à une largeur moyenne pour les polices de caractères.
maxlength
Nombre maximal de caractères que l'utilisateur peut entrer, ou que l'on peut assigner à value.
Il peut être supérieur à size, dans ce cas le contenu défile dans le champ de texte.
disabled
L'objet est désactivé au chargement de la page, et affiché en gris. 
<input type="text" disabled />
Pour l'activer, un script assigne l'attribut avec la valeur false. 
document.nomformulaire.nomtext.disabled=false;
readonly
Cet attribut interdit de modifier le contenu de l'attribut value. A la différence de disabled, l'objet est affiché normalement bien que l'utilisateur ne puisse rien entrer.On modifie cet état comme pour l'attribut disabled: 
document.nomformulaire.nomtext.readonly=false;

Parmi les attributs hérités: title, style, tabindex, class.

Evènements
onfocus
Réagit quand l'objet obtient le focus, donc quand l'utilisateur clique sur le champ de texte.
onblur
Le focus est perdu (l'utilisateur clique ailleurs).
onchange
Quand un caractère est entré ou modifié mais est déclenché quand le champ de texte perd le focus.
onselect
Une partie du texte est sélectionnée.
On commande aussi la sélection du texte par la méthode select(). 
 document.monformulaire.montext.select();
onclick
L'utilisateur clique dans le champs de texte.
accesskey
Permet d'assigner une touche ou une combinaison. Quand l'utilisateur tape cette touche, le champs de texte obtient le focus, il peut entrer du texte.
Exemple:
<input type="text" accesskey="t" >

A ces évènements s'ajoutent ceux de l'objet hérité: ondblclick, onmousedown, onmouseup, onemousemove, onmouseover, onmouseout, onkeypress, onkeydown.

Des balises spécialisées selon les types de données

Password

Il est équivalent à l'objet text avec la différence que le texte assigné à l'attribut value est masqué, et remplacé par des astérisques. 

<input type="password" value="">

Son utilisation et son fonctionnement sont les mêmes.

Textarea

Il fonctionne comme text, mais affiche plusieurs lignes et la valeur est contenue entre la balise ouvrante et fermante.
Attributs:

Exemple:

<textarea rows="5" cols="40">
  Contenu initial.
</textarea>

On peut utiliser textarea tout comme text pour ajouter des données statiques à un formulaire, avec l'attribut readonly.

Comment personnaliser un champ d'entrée de texte

On utilise des gestionnaires d'évènements pour prendre compte les actions de l'utilisateur et CSS pour améliorer l'apparence de l'objet graphique.
Exemple:

Actions de l'utilisateur

Le code HTML:

<form name="nomformulaire" method="post" action="">
<input name="nomtexte" class="textfield" type="text" size="40" maxlength="60" 
  value="Taper un texte" 
  onChange="change(this)" 
  onFocus="getfocus(this)" 
  onBlur="losefocus(this)" >
<input type="button" value="Effacer" onClick="cleartext()">
</form>

Le code CSS:

.textfield
{
  font-family:"Segoe Print", Verdan, Arial;
  -moz-border-radius:4px;
  border:1px solid gray;
  border-radius:4px;
  background-image:url(images/papier.jpg);
  padding-left:8px;
}

Le code JavaScript: 

function cleartext()
{
  document.nomformulaire.nomtexte.value="";
}
function change(element)
{
  var storage = document.getElementById("storage");
  storage.innerHTML += element.name + " change<br>";
}
function getfocus(element)
{
  var storage = document.getElementById("storage");
  storage.innerHTML += element.name + " en focus<br>";
}
function losefocus(element)
{
  var storage = document.getElementById("storage");
  storage.innerHTML += element.name + " perd le focus<br>";
}

Voir aussi

© 2010-2012 Xul.fr