Faire apparaitre un formulaire de selection

Résolu/Fermé
mikeb1992 Messages postés 280 Date d'inscription lundi 10 décembre 2007 Statut Membre Dernière intervention 6 janvier 2012 - 12 août 2008 à 02:03
mikeb1992 Messages postés 280 Date d'inscription lundi 10 décembre 2007 Statut Membre Dernière intervention 6 janvier 2012 - 13 août 2008 à 19:49
Bonjour,
j'aimerai savoir comment faire pour faire un formulaire qui apparait tout seul...

Je pense que vous ne m'avez pas compris...

Ce site en est un bonne exemple : http://www.alertegps.com/index1.asp
Cliquez sur un formulaire de selection et vous verrez !

Je suppose qu'il faut du JS !

Merci de m'eclairer !

11 réponses

kryoportail Messages postés 222 Date d'inscription dimanche 10 août 2008 Statut Membre Dernière intervention 22 mai 2014 125
12 août 2008 à 03:49
Salut,

<select id="MyId" name="MyName">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
...
</select>

Amicalement,
S@M...
http://kryoportail.ath.cx
1
kryoportail Messages postés 222 Date d'inscription dimanche 10 août 2008 Statut Membre Dernière intervention 22 mai 2014 125
12 août 2008 à 13:38
Salut,

----------------------------
Si un administrateur passe par là, il peut supprimer mon précédent post, j'ai merdé, désolé...
----------------------------

Oups avait pas compris !..

<select id="MyId1" name="MyName1">
   <option value="" selected="selected">Fabricant...</option>
   <option value="1">1</option>
   <option value="2">2</option>
...
</select>
<select id="MyId2" name="MyName2" style="display: hidden;">
   <option value="1" selected="selected">1</option>
   <option value="2">2</option>
...
</select> 


Après un ti javascript qui va faire apparaitre la deuxième liste si la valeur est définie pour la première...

Dans le cas de ton site, ils utilisent la librairie Javascript JQuery (https://jquery.com/

Donc ça donnerait un truc du genre :

<script type="text/javascript">
$('#MyId1').change(function () {
   if( this.value == '' ) {
       $('#MyId2').hide();
   } else {
       $('#MyId2').show();
   }
}).change();
</script>


Si tu ne connais pas Jquery, ca se lit :

A chaque fois que la valeur de l'élément 'MyId1' change,
Si sa valeur est une chaine nulle,
Tu fais disparaitre l'élement 'MyId2'.
Sinon
Tu fais apparaitre l'élement 'MyId2'.


Amicalement,
S@M...
http://kryoportail.Ath.cx
1
kryoportail Messages postés 222 Date d'inscription dimanche 10 août 2008 Statut Membre Dernière intervention 22 mai 2014 125
12 août 2008 à 14:55
Re,

En fait il n'y a pas de secret ! lol

Si tu es curieux (comme moi), je te conseille de télécharger Firefox et un plugin très utile aux Webmasters, j'ai nommé FireBug. Il répondra à toutes tes questions...

En passant avec la souris sur les champs servant à la recherche on obtient :

Le code HTML :

<form id="form_recherche" onsubmit="document.location='http://www.jeuxvideo.fr/recherche/redirect.php?textrecherche='+escape(qf.recherche.value)+'&cat='; return false;" action="#" method="post" name="qf">
     <fieldset>
         <legend class="nodisplay">Rechercher sur Jeuxvideo.fr</legend>
         <input id="rech_text" type="text" name="recherche" value="Un jeu, une vidéo, une démo, ..."/>
         <input id="rech_submit" type="submit" title="Recherche" value=""/>
     </fieldset>
</form>


Le style CSS associé :

#rech_text {top.new.css?1 (ligne 292)
background:transparent url(/style/img/header/bg_input_recherche.gif) no-repeat scroll 0 0;
border:medium none;
color:#000000;
height:17px;
margin:0;
padding:4px;
vertical-align:middle;
width:238px;
}

Bref, c'est simplement une image de fond qui permet d'obtenir ce rendu...
donc : http://www.jeuxvideo.fr/style/img/header/bg_input_recherche.gif (pour le champ recherche)..
et : http://www.jeuxvideo.fr/style/img/header/bg_input_pseudo.gif (pour le pseudo)


Note: c'est encore plus flagrant avec le site de CCM, si tu regardes en haut de cette page tu trouveras aussi un champs de recherche personnalisé...

L'image utilisé est : http://www.commentcamarche.net/img/sprite_ccm.png

Ils utilisent après les styles CSS pour positionner cette image de fond correctement en face du champ concerné :

#searchwith .mots_cle {ccm.css?...807221035 (ligne 1875)
   background:transparent url(/img/sprite_ccm.png) repeat scroll -609px -123px;
   border:medium none;
   color:#2E333C;
   float:left;
   font-size:12px;
   height:17px;
   margin:2px 0 0;
   padding:4px 0 0 90px;
   width:119px;
}





Amicalement,
S@M...
http://kryoportail.ath.cx
1
paglop !!! Messages postés 633 Date d'inscription jeudi 24 avril 2008 Statut Membre Dernière intervention 3 novembre 2015 234
12 août 2008 à 02:06
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
mikeb1992 Messages postés 280 Date d'inscription lundi 10 décembre 2007 Statut Membre Dernière intervention 6 janvier 2012 31
12 août 2008 à 12:40
Non ^^, je sais deja le faire ca lol !

Regardez mieux sur le site lorsqu'on fait un premier choix, un deuxieme formulaire apparait !

Cdtlt
0
kryoportail Messages postés 222 Date d'inscription dimanche 10 août 2008 Statut Membre Dernière intervention 22 mai 2014 125
12 août 2008 à 13:34
Salut,

Oups avait pas compris !..

<select id="MyId1" name="MyName1">
   <option value="1" selected="selected">1</option>
   <option value="2">2</option>
...
</select>
<select id="MyId2" name="MyName2" style="display: hidden;">
   <option value="1" selected="selected">1</option>
   <option value="2">2</option>
...
</select> 


Après un ti javascript qui va faire apparaitre la deuxième liste si la valeur est définie pour la première...

Dans le cas de ton site, ils utilisent la librairie Javascript JQuery (https://jquery.com/

Donc ça donnerait un truc du genre :
<script type="text/javascript">
$('#MyId1').change(function () {

}).change();




</script>
0
mikeb1992 Messages postés 280 Date d'inscription lundi 10 décembre 2007 Statut Membre Dernière intervention 6 janvier 2012 31
12 août 2008 à 13:52
Ok merci !

Une derniere chose... il faut donc que mon hebergeur prenne en compte cette librairie, je me trompe ?
0
kryoportail Messages postés 222 Date d'inscription dimanche 10 août 2008 Statut Membre Dernière intervention 22 mai 2014 125
12 août 2008 à 14:14
Re,

Oui tu te trompes ! lol !

En fait JQuery est une librairie Javascript, par conséquent ce n'est pas ton hébergeur qui décide si tu t'en sert mais toi. Javascript s'exécute sur le navigateur du client. PHP sur le serveur... Ce qui intéresse surtout ton hébergeur c'est ce qui se passe sur ton serveur pas chez le client.

Bref, il suffit de télécharger cette librairie et de l'ajouter quelque part dans un répertoire de ton site.
Après tu fais un 'lien' dans ta page ou tu as besoin de cette librairie en fesant :

<script type="text/javascript" src="/js/jquery.js"></script>

A partir de cette instant, tu peux utiliser JQuery ou tu veux dans ta page...

Amicalement,
S@M...
http://kryoportail.ath.cx
0
mikeb1992 Messages postés 280 Date d'inscription lundi 10 décembre 2007 Statut Membre Dernière intervention 6 janvier 2012 31
12 août 2008 à 14:25
Oki...

Et puis comme on est dans les formulaire, j'en profite XD

Mais cette fois question, niveau design...

Comment faire pour changer le l'aspect d'un champ de type text comme sur ce site : http://www.jeuxvideo.fr/...

Les champs pour se connecter sont assez sympa ^^ Faut il utiliser un background-image ?

Et pour modifier l'aspect d'un <input type="submit"> ? Un exemple ? ben... sur ccm le bouton de recherche ou de connexion ! Encore une fois, il s'agit d'un background-image ?

Mais pourtant ces deux question porte sur des balise inline donc en fait ca paut pas etre un background, je me trompe ?

Oui une fois de plus, je me doute :D
0
mikeb1992 Messages postés 280 Date d'inscription lundi 10 décembre 2007 Statut Membre Dernière intervention 6 janvier 2012 31
12 août 2008 à 15:10
Wouawww, tout simplement enorme FireBug !!!

Merci pour toute ton aide....

Je retourne à mes occupation ^^

Amicalement, mikeb1992
0
mikeb1992 Messages postés 280 Date d'inscription lundi 10 décembre 2007 Statut Membre Dernière intervention 6 janvier 2012 31
13 août 2008 à 19:49
Bonjour, j'ai un ptit souci, voila,j'ai fait un pti bouton de recherche mais il s'affcihe mal sous IE 6 et 7

Sous FF : http://img46.imageshack.us/img46/4862/boutonrechercheta6.png

Sous IE : http://img390.imageshack.us/img390/39/sanstitre2nf9.png

Comment enlever cette barre !? Grrrr IE !!!

De plus je trouve que l'ecritutre de mon bouton est flou ou baveuse... J'ai entendu dire qu'on pouvait la vectoriser grace a illustrator, mais je n'ai pas illustrator :(

Ya t il un autre moyen ?

Merci
0