CSS + JavaScript ; Changer la couleur des champs d'un formulaire
Répondre à la discussion
Affichage des résultats 1 à 15 sur 15

CSS + JavaScript ; Changer la couleur des champs d'un formulaire



  1. 24/03/2005, 15h28 #1
    zoup1

    CSS + JavaScript ; Changer la couleur des champs d'un formulaire


    ------

    Salut,

    Voilà je cherche à faire un formulaire dans lequel la couleur du fond des buttons change lorsque le contenu d'un champ a changé...

    La façon dont je m'y prends pour l'instant, c'est de définir une feuille de style qui contient deux variante pour le style input. Il y a normal et modif. Au départ je définie mon champ input avec le mode "normal" et je souhaiterais que lorsque je clique sur le bouton, cela me change la classe pour passer en mode "modif".

    Pour de vrai c'est pas cela que je veux faire, je souhaiterais changer la couleur du champ lorsque celui-ci est modifié, mais je pense que si j'ai faire la première étape décrite ci-dessus, j'arriverais sans problème à faire la seconde.

    J'ai mis un bout de code qui illustre ce que j'ai voulu faire mais je cela ne fonctionne pas. Lorsque je clique sur le bouton pour changer la classe cela m'indique

    Code:
    Erreur : missing name after . operator
Code Source :
this.form.text1.class='modif'
    Visiblement c'est la propriétée class que j'ai mis qui lui pose problème.

    Je ne suis pas bien sur du vocabulaire que j'utilise car je dois bien avouer que je ne comprends pas encore très bien la philosophie du Javascript et du CSS et les liens qui existent entre l'un et l'autre...

    Si quelqu'un pouvait m'aider, cela me serait d'un grand secours, Merci..

    Code:
    <html>
<head>
<style type="text/css">
    input.normal {
        border:1px solid black;
        background-color:red;
        font-family:"trebuchet ms",sans-serif;
        color:white;
    }

    input.modif {
        border:1px solid black;
        background-color:blue;
        font-family:"trebuchet ms",sans-serif;
        color:white;
    }

</style>
</head>

<body>
<form name="myForm">
The form's name is: <input type="text" name="text1" size="20" class="normal">
<br /><br />
<input type="button" value="Change la classe" onClick="this.form.text1.class='modif'">
<input type="button" value="Change la valeur"  onClick="this.form.text1.value='valeur'">
</form>
</body>
</html>

    -----
    Je te donne une idée, tu me donnes une idée, nous avons chacun deux idées.
  2. 24/03/2005, 17h59 #2
    syco

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    Hello !

    this.form.text1.className='modif'

    http://monkeys.be/
  3. 24/03/2005, 21h32 #3
    zoup1

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    Citation Envoyé par syco
    Hello !

    this.form.text1.className='modif'

    Super, merci ca marche...
    Je te donne une idée, tu me donnes une idée, nous avons chacun deux idées.
  4. 29/03/2005, 23h47 #4
    acx01b

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    pourquoi tu n'utilises pas une image arrière plan? c'est aussi simple et ça te donne plus de liberté...
  5. Aujourd'hui
    A voir en vidéo sur Futura
  6. 30/03/2005, 07h44 #5
    zoup1

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    Citation Envoyé par acx01b
    pourquoi tu n'utilises pas une image arrière plan? c'est aussi simple et ça te donne plus de liberté...
    Parce que ce que je veux, c'est changer la couleur de mon boutton, mais aussi parceque maintenant que je sais faire cela, je saurais aussi changer le fond de mon boutton par l'intermédiaire d'une CSS...
    Je te donne une idée, tu me donnes une idée, nous avons chacun deux idées.
  7. 30/03/2005, 09h20 #6
    Seb299792

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    Juste une précision, la façon dont tu accède à la propriété 'ClassName', n'est pas des plus compatible.

    Afin que le code reste pertinent pour la plupart des navigateurs : IE, Netscape, FireFox, ...
    Il est préférable d'accèder ainsi :

    Soit un formulaire dont on a précisé l'id et le name à 'MonForm', puis le bouton dont a également précisé l'id et le name à 'Monbouton1'.

    Pour accèder à la propriété ClassName du bouton, il faut accèder au bouton ainsi :

    window.document.forms['MonForm'].elements['Monbouton1'].className = 'maclass';

    Ensuite pour faire plus court, on peut utiliser une variable voForm qui pointe systématiquement sur le formulaire :
    var voForm = window.document.forms['MonForm'];

    Ce qui donne :
    voForm.elements['Monbouton1'].className = 'maclass';

    C'est d'avantage Browser Compliant
    Certaines vérités nous paraissent invraisemblables parce que notre connaissance ne les atteint pas.
  8. 30/03/2005, 09h29 #7
    invite765732342432
    Invité

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    Citation Envoyé par Seb299792
    var voForm = window.document.forms['MonForm'];

    Ce qui donne :
    voForm.elements['Monbouton1'].className = 'maclass';

    C'est d'avantage Browser Compliant
    Une question: la fonction document.getElementById(id) n'est elle pas plus "Browser Compliant" ?
    Sachant qu'en plus, pour les versions IE antérieures à la 5.0, il y a une combine:
    http://mozilla.tlk.fr/doc03.php
  9. 30/03/2005, 12h36 #8
    Seb299792

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    Citation Envoyé par Faith
    Une question: la fonction document.getElementById(id) n'est elle pas plus "Browser Compliant" ?
    Sachant qu'en plus, pour les versions IE antérieures à la 5.0, il y a une combine:
    http://mozilla.tlk.fr/doc03.php
    Et bien la réponse est dans ta question : getElementById n'est pas fiable pour les anciens navigateurs, alors qu'avec la solution proposé, tu répond à 99.xx % et tu n'as pas de test de navigateur à faire.
    Moi, j'ai juste prie cette habitude d'accèder aux éléments de mes formulaires ainsi, c'est simple et efficace.
    Certaines vérités nous paraissent invraisemblables parce que notre connaissance ne les atteint pas.
  10. 30/03/2005, 12h50 #9
    zoup1

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    Re-Salut,

    Je vous remercie de l'interêt que vous portez à mes petits soucis...
    Le code que j'ai écris fonctionne sans problème sous firefox et IE sur PC comme sur Mac (j'ai pas tester IE Mac) par contre il ne fonctionne pas du tout sous Safari (Mac) mais bon c'est pas forcément très grave...

    Je crois que le problème que j'ai rencontré est que je n'ai pas vraiment trouvé de document qui m'explique clairement les choses. Je n'ai pas réussi à trouver le ClassName dans les docs que j'ai trouvé sur le WEB, évidemment depuis que je sais que c'est ClassName qu'il faut utiliser j'ai trouvé d'autre choses mais bon...

    J'ai l'impression de ne pas demander des choses très originales pourtant, mélange de HTML avec des CSS et du JavaScript. Evidemment j'ai trouvé plein de trucs sur CSS plein de trucs sur JavaScript, pleins de trucs sur HTML, mais rien qui mélange l'ensemble... au final je me rends bien compte que je bricole et que je fais des trucs sans vraiment savoir ce qui sera Browser Compliant ou pas...
    Voilà, donc je suis à la recherche de documentation dans cet esprit... si vous connaissez quelque chose de bien...
    Merci
    Je te donne une idée, tu me donnes une idée, nous avons chacun deux idées.
  11. 30/03/2005, 14h07 #10
    invitee44fea3b

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    Bonjour,

    Un excellent site (que dis-je : une référence) en français pour savoir comment manipuler les différentes techno web (css, javascript, html, xhtml)
    http://www.openweb.eu.org/

    A+
  12. 30/03/2005, 15h58 #11
    zoup1

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    Merci, ce site m'a l'air effectivement interessant et en tout les cas il me donne envie de passer à du XHTML, (je pratique encore le HTML à moins que je ne fasse du XHML comme Mr Jourdain fait de la prose).
    Je cherche aussi des choses qui soit plus des liens de références. ce qui m'interroge surtout c'est le lien entre les objets HTML (ou xHTML sans doute) et leur représentation en JavaScript. C'est cela le DOM ?
    Je te donne une idée, tu me donnes une idée, nous avons chacun deux idées.
  13. 31/03/2005, 08h38 #12
    Seb299792

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    Citation Envoyé par zoup1
    Merci, ce site m'a l'air effectivement interessant et en tout les cas il me donne envie de passer à du XHTML, (je pratique encore le HTML à moins que je ne fasse du XHML comme Mr Jourdain fait de la prose).
    Je cherche aussi des choses qui soit plus des liens de références. ce qui m'interroge surtout c'est le lien entre les objets HTML (ou xHTML sans doute) et leur représentation en JavaScript. C'est cela le DOM ?
    Et bien là, tu aborde le DHTML. En effet, on pourrait très bien créer une page contenant juste :
    <HTML>
    <HEAD></HEAD>
    <BODY></BODY>
    </HTML>
    et créer tout le reste juste avec du javascript, du DHTML en soit.

    Voici une liste de références :
    Multi techno :En DHTML quelques réf de choix :
    J'en passe bien d'autres mais déjà avec ca, il y a de quoi faire.
    Certaines vérités nous paraissent invraisemblables parce que notre connaissance ne les atteint pas.
  14. 29/04/2011, 07h16 #13
    invite4a336f99

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    Chaque fois qu'une description de la modification, il ya toujours beaucoup à parler dans le monde entier. Ils ne sont pas exemptés. Une déclaration est habituellement: "je dois changer presque immédiatement versions, donc ne comptez pas sur moi à ce jour continuent d'attaquer ...
  15. 05/07/2011, 12h38 #14
    invite35996c08

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    Without seeing the current coding of your page I will have to try to
    give you a generic answer, should you require any further help at
    integrating it into your site please ask for clarification and I will
    do my best to respond promptly.

    The easiest way to tackle this problem is to use style sheets. In the
    example below I have used the onFocus and onChange events to show you
    how to alter the color of a form element:

    <style>.changecolor {background: blue}.currentcolor {background:red}</style>
    <form>
    First Name: <input type="text" size="10" name="myname"
    onFocus="this.className='curre ntcolor'"
    onChange="this.className='chan gecolor'"><br>
    </form>

    Therefore in your script if the field is not filled in you simply need
    to change the color of the form elements using your existing "if the
    box is empty" statement. An example of this can be seen below:

    <style>.errorcolor {background: red}</style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function valid(form) {
    var field = form.myname;
    if (field.value=='') {
    alert("You must indicate your name.");
    field.className='errorcolor';
    return false;
    }
    return true;
    }
    // -->
    </SCRIPT>
    <FORM METHOD="POST" onSubmit="return valid(this)">
    Your name:<BR><INPUT TYPE="text" NAME="myname" />
    <INPUT TYPE="submit" VALUE="Submit" />
    </FORM>

    Once again, if you require any further help on this please ask for
    clarification and I will do my best to help quickly. If you do
    require further help it would be very helpful to see your current page
    code and javascript script.
  16. 05/07/2011, 15h17 #15
    JPL
    Responsable des forums

    Re : CSS + JavaScript ; Changer la couleur des champs d'un formulaire

    Sorry but the only language allowed here is French.
    Rien ne sert de penser, il faut réfléchir avant - Pierre Dac
« pb d'installation fedora 14? | logiciel pour creer des animations 3d pour debutant et novice »

Discussions similaires

  1. Changer la couleur de la barre des tâches
    Par inviteb678b443 dans le forum Logiciel - Software - Open Source
    Réponses: 8
    Dernier message: 17/01/2009, 10h20
  2. Comment changer la couleur du mercure .
    Par invite61942757 dans le forum Chimie
    Réponses: 4
    Dernier message: 14/08/2005, 12h05
  3. Récupérer des variables (HTTP REQUEST, Post, ...) à partir d'un script JAVASCRIPT
    Par invite843f61d9 dans le forum Internet - Réseau - Sécurité générale
    Réponses: 0
    Dernier message: 01/08/2005, 14h31
  4. Changer la couleur de fond d'emacs sur windows
    Par invite588da7a7 dans le forum Logiciel - Software - Open Source
    Réponses: 1
    Dernier message: 27/07/2004, 21h57
Découvrez nos comparatifs produits sur l'informatique et les technologies.