Couleur zone de texte

Fermé

Vlad51 - 7 janv. 2011 à 08:43
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 - 8 janv. 2011 à 00:19

Bonjour,
Je suis en train de faire un formulaire, dans les zones de texte j'ai mis un texte gris clair qui s'efface automatiquement lorsque l'on clique sur la zone de texte, le problème c'est que quand on rentre des données dans cette zone de texte cela écrit aussi en gris clair et j'aimerais qu'il s'affiche en noir. Si quelqu'un peut m'aider ?
merci

Voici la page en elle même :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
    <title>Formulaire de contact</title>
    <link href="Style contactez moi.css" rel="stylesheet" type="text/css" media="screen" />    
</head>

<body>
    <h2>Contactez moi</h2>
    <form name="Formulaire" action="mailto:#" method="post" enctype="text/plain">
        Nom : <input type="text" name="nom" value="Entrez votre nom" class="transp" onfocus="javascript:this.value=''" 
              onblur="if(this.value=='')this.value='Entrez votre nom'" maxlength="20" /> <br />
                      
        Objet : <input type="text" name="objet" value="Entrez un titre" class="transp" onfocus="javascript:this.value=''" 
                onblur="if(this.value=='')this.value='Entrez le titre'" maxlength="20"/> <br />
                        
        <textarea name="projet" rows="8" cols="55" class="transp" onfocus="javascript:this.value=''" onblur="if(this.value=='')this.value='Tapez votre texte ici'">
            Tapez votre texte ici
        </textarea> <br />

        <input type="reset" name="effacer" value="effacer" />
        <input type="submit" name="envoyer" value="valider et envoyer"/>
    </form>
</body>

</html>

Et là le css :

body
{
    background-color: #FFF48D;  /*couleur beurre frais sur wiki*/
}
.transp
{
    color: #c0c0c0;                     
}

A voir également:

Couleur zone de texte
Zone telechargement - Accueil - Outils
Excel cellule couleur si condition texte - Guide
Somme si couleur - Guide
Transcription audio en texte word gratuit - Guide
Appel data zone franche - Forum Consommation & Internet

4 réponses

Réponse 1 / 4

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
7 janv. 2011 à 18:05

Salut.

Le plus simple est de faire ça avec deux classes CSS.
Pour pour le texte par défaut (en gris) et une autre pour le contenu (en noir).
Par exemple : .valeur_par_defaut et .valeur_modifiee

<style type="text/css">
.valeur_par_defaut {
    color: grey;
    font-style: italic;
}
.valeur_modifiee {
    color: black;
    font-style: normal;
}</style>

<input type="text" name="nom" value="Votre nom" class="valeur_par_defaut"
    onfocus="if(this.value == this.defaultValue) { this.value = ''; this.className = 'valeur_modifee'; }"
    onblur="if(this.value == '') { this.value = this.defaultValue; this.className = 'valeur_par_defaut'; }"
/>

Réponse 2 / 4

dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
7 janv. 2011 à 11:48

Salut,
Peut etre ça dans ton css, mais ça modifiera aussi les boutons.

textarea,input{
color:black;
}

Réponse 3 / 4

Kemich Messages postés 207 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 11 mars 2011 22
7 janv. 2011 à 11:54

Enchanté,

Essaye avec ce code :

<form name="Formulaire" action="mailto:#" method="post" enctype="text/plain">
Nom : <input type="text" name="nom" value="Entrez votre nom" class="transp" onfocus="javascript:this.value=''"
onblur="if(this.value=='')this.value='Entrez votre nom'" maxlength="20" /> <br />

Objet : <input type="text" name="objet" value="Entrez un titre" class="transp" onfocus="javascript:this.value=''"
onblur="if(this.value=='')this.value='Entrez le titre'" maxlength="20"/> <br />

<textarea name="projet" rows="8" cols="55" class="transp" onfocus="javascript:this.value=''" onblur="if(this.value=='')this.value='<span class="trans">Tapez votre texte ici</span>'">
Tapez votre texte ici
</textarea> <br />

<input type="reset" name="effacer" value="effacer" />
<input type="submit" name="envoyer" value="valider et envoyer"/>
</form>

Il va peut etre y avoir un probleme avec les cotes, mais je pense que l'idée est la.

Il faut appliquer la classe "trans" seulement a la phrase que tu veut afficher en gris, et non pas a la balise input.

Is it OK ?

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
7 janv. 2011 à 18:01

Des balises (<span>) au sein d'un attribut (value) ...
Sans essayer ton code je sais que ça ne fonctionnera pas.

Réponse 4 / 4

Vlad51
8 janv. 2011 à 00:09

Désolé de répondre aussi tard, merci à vous pour vos réponses, j'ai réussi (avec la méthode d'avion-f16), chaud chaud le java quand même :-)

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
8 janv. 2011 à 00:19

Là, c'est du Javascript (ECMAscript)
Le Java, c'est autre chose.
Et ... quand on connait, ce n'est pas difficile :)

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?

sertissage des cables rj45

Vidéo : comment changer sa zone géographique ?

Résolution d'une image 500 pixels largeur

Changer la couleur de fond d'un en-tête