IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)
logo
Sommaire > Formulaires > Champs > Les champs INPUT > Les champs de type TEXT
        Comment aligner à droite le contenu d'un champ de saisie ?
        Comment définir une couleur de fond dans un champ de type Input ?
        Comment insérer un champ de saisie non modifiable ?
        Comment ne pas garder l'historique d'un champ de saisie ?
        Comment positionner le curseur sur un champ au chargement de la page ?
        Peut-on créer un champ de saisie à angles arrondis ?


Comment aligner à droite le contenu d'un champ de saisie ?
auteur : ilood
Il faut utiliser les propriétés d'alignement en CSS
Alignement à droite du contenu
<input style="text-align:right" type="text" name="champ1" value="blabla" />
Note : Le contenu est aligné à gauche, par défaut. On peut aussi centrer le contenu :
Centrage du contenu
<input style="text-align:center" type="text" name="champ2" value="blabla" />
Attention : Cette propriété peut être utilisé pour tout autres type de balises


Comment définir une couleur de fond dans un champ de type Input ?
auteur : debug
C'est l'attribut background-color qu'il faut définir. 
<input style="background-color:'#33FF00'" type="text" name="ma_zone_de_texte" />
L'attribut background-color peut être défini grâce au modèle de couleur RGB pour la spécification numérique des couleurs.

Exemple : 
EM
{
  color: #ff0000
}
EM
{
  color: rgb(255,0,0) 
}
EM
{
  color: rgb(100%, 0%, 0%) 
}
Ou grâce à l'un de ces mots clés : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.

Exemple : 
H1
{
  color: maroon
}
H2
{
  color: olive
}
On peut utiliser le même principe pour modifier la couleur d'un bouton de type input.

Attention : Cette propriété peut être utilisé pour tout autres type de balises


Comment insérer un champ de saisie non modifiable ?
auteur : Maxoo
Il y a deux manières de le faire :
  • disabled : le champ input sera grisé dans le navigateur, et n'est pas transmis lors de la soumission du formulaire. 
<input type="text" name="toto1" value="toto1" disabled="disabled" />
  • readonly : le champ paraîtra comme champ normal, mais la valeur ne sera pas modifiable, et sera transmis lors de la soumission du formulaire. 
<input type="text" name="toto2" value="toto2" readonly="readonly" />

Comment ne pas garder l'historique d'un champ de saisie ?
auteur : BrYs
L'attribut autocomplete permet ou non de retenir des informations déjà saisies dans des champs INPUT de type text.
  • on
  • off
Si l'auto-complementation est activée, des valeurs sont alors proposées dans une liste déroulante, juste en dessous du champ. Par défaut, l'auto-complementation est activée, mais cela dépend aussi des propriétés du navigateur. 
<input type="text" name="nom" autocomplete="off" />
Note : Ne fonctionne que sous Windows


Comment positionner le curseur sur un champ au chargement de la page ?
auteur : Linaa
Il faut utiliser du JavaScript : on fait appel à la fonction focus() au chargement de la page. 
<body onload="document.getElementById('nom').focus()">
  <label for="nom">Nom : </label>
  <input type="text" name="nom" id="nom" />
</body>

Peut-on créer un champ de saisie à angles arrondis ?
auteur : Eric Berger
Oui c'est possible mais il faut le construire.

Le principe est de créer un tableau de 9 cases (3x3). Dans les cases 1, 3, 7 et 9 on place une image de coin arrondi (chacune tournée dans le bon sens), dans les cases 2, 4, 6 et 8 on place des bordures droites et dans la case 5, le champ texte.
A l'aide d'une feuille de style, on peut faire en sorte que le champ texte se fonde dans l'arrière-plan. Visuellement, on aura donc un champ texte avec des angles arrondis, le texte ne sera pas collé au bord.


Consultez les autres F.A.Q's

Valid XHTML 1.0 TransitionalValid CSS!

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez.com Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.