Faire apparaitre un formulaire de selection

Résolu
mikeb1992 Messages postés 280 Date d'inscription   Statut Membre Dernière intervention   -  
mikeb1992 Messages postés 280 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Membre Dernière intervention   125
 
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   Statut Membre Dernière intervention   125
 
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   Statut Membre Dernière intervention   125
 
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 635 Date d'inscription   Statut Membre Dernière intervention   234
 
0

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

Posez votre question
mikeb1992 Messages postés 280 Date d'inscription   Statut Membre Dernière intervention   31
 
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   Statut Membre Dernière intervention   125
 
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   Statut Membre Dernière intervention   31
 
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   Statut Membre Dernière intervention   125
 
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   Statut Membre Dernière intervention   31
 
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   Statut Membre Dernière intervention   31
 
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   Statut Membre Dernière intervention   31
 
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