probleme Bouton radio

**cuddy** · 16/09/2012, 19h45

Bonjour,
Toujours dans mon formulaire je souhaite avoir trois boutons radio pour avoir le choix entre trois choix. Je souhaite que tous soit sur la même ligne avec un espace égale entre chaque. comment je peux faire pour les avoirs alignés?

Image :

Mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<p>
   <label><span class="text19">La séance est pour :</span></label>
   </p>
  <center><p>
   <label for="Adulte" class="text9">Adulte</label>
   <input name="Gender" type="radio" value="Adulte" />
   <label for="Adolescent" class="text9"> Adolescent</label> 
   <input name="Gender " type="radio" value="Adolescent" />
   <label for="Enfant" class="text9"> Enfant</label>
   <input name="Gender " type="radio" value="Enfant" />
  </p></center>
  <p>

**cuddy** · 16/09/2012, 21h05

Bon ben j'ai virer le label et j'ai mis span a la place et opur agrandir l'espace entre j'ai mis           

**NoSmoking** · 16/09/2012, 21h46

Bonsoir,

Envoyé par cuddy

Bon ben j'ai virer le label et j'ai mis span a la place et opur agrandir l'espace entre j'ai mis           

la méthode n'est pas très élégante

.

pour la partie HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<p>
  <label for="Adulte" class="text9">Adulte</label>
  <input name="Gender" type="radio" value="Adulte" />
  <label for="Adolescent" class="text9"> Adolescent</label>
  <input name="Gender " type="radio" value="Adolescent" />
  <label for="Enfant" class="text9"> Enfant</label>
  <input name="Gender " type="radio" value="Enfant" />
<p>

pour la partie CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
label{
  display:inline-block;
  width:5em;
  text-align:right;
  background-color:#e0e0e0;
}

la couleur de fond n'est la que pour la visualisation.

**cuddy** · 17/09/2012, 07h54

Merci, mon souci c'est que j'ai d'autre balise label auquel je ne veux pas toucher
est ce que je peux par exemple mette

label1 / label2 ect ?

**NoSmoking** · 17/09/2012, 18h27

dans ce cas il te suffit de mettre une ID sur la balise P

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<p id="info">
  <label for="Adulte" class="text9">Adulte</label>
  <input name="Gender" type="radio" value="Adulte" />
  <label for="Adolescent" class="text9"> Adolescent</label>
  <input name="Gender " type="radio" value="Adolescent" />
  <label for="Enfant" class="text9"> Enfant</label>
  <input name="Gender " type="radio" value="Enfant" />
<p>

en rajoutant la référence dans le CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#info label{
  display:inline-block;
  width:5em;
  text-align:right;
  background-color:#e0e0e0;
}

pour cibler ces LABELs.

**cuddy** · 17/09/2012, 18h59

super merci j'avais un id partout, mais pas au bon endroit lol

**cuddy** · 17/09/2012, 20h09

Alors là je rage
j'ai finit par reussi mon code et voila ce Que cela donne sur dreamweaver (c'est exactement ce que je veux)

sauf que quand je vias sur IE ou Mozila j'ai c'est horreur !!!

AU SECOURRRRRRR !!!!!!

**NoSmoking** · 17/09/2012, 22h10

La première chose est d'avoir un doctype valide en première ligne du fichier, <!doctype html> par exemple, simple et efficace.

A ce stade il faut que tu nous fournisses le code HTML et CSS de ton formulaire sinon difficile de dire si ce n'est qu'il y à un problème sur le conteneur et de positionnement à priori!

**cuddy** · 18/09/2012, 09h39

Mon truc public :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Mon code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#label{
	background:#D8F8A1;
}
 
#info label{
  display:inline-block;
  width:5em;
  text-align:right;
    }
 
#info input{
	margin-right:60px;
	}
 
#town label{
  display:inline-block;
  }
#town input{
   background:#D8F8A1;
   margin-right:18px;
 }
 
 input[type=radio]{
color:#D8F8A1;
 
} 
#nvx input{
	background:#D8F8A1;
}

Mon formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<form action="/HDWForm2Mail/Form2Mail.php" method="post" id="form1" onsubmit="return validate(this)" accept-charset="iso-8859-1">
 <p id="nvx">
    <label for="Nom"><span class="text9">Nom / prénom :</span></label>
    <input name="Nom" type="text" value="" width="260px"/>
  </p> 
 
 <p id="town">
  <label for="Adresse"><span class="text9">Adresse :</span></label>
  <input name="Adresse" type="text" value="" /> 
 
  <label for="Code"><span class="text9">Code postal :</span></label>
  <input name="Code" type="text" value="" width="80" />
 
  <label for="Ville"><span class="text9">Ville :</span></label>
  <input name="Ville" type="text" value="" />
 </p>
 
  <p id="nvx">
    <label for="Email"><span class="text9">Email :</span></label>
    <input name="Email" type="email" value="" width="260px" />
  </p>
  <p>
   <label><span class="text9">La séance est pour un:</span></label>
   </p>
<p id="info"><center>
  <label for="Adulte" class="text9">Adulte</label>
  <input name="Genre" type="radio" value="Adulte" />
  <label for="Adolescent" class="text9"> Adolescent</label>
  <input name="Genre" type="radio" value="Adolescent" />
  <label for="Enfant" class="text9"> Enfant</label>
  <input name="Genre" type="radio" value="Enfant" /></center>
  </p>
  <label for="Sujet"><span class="text9">Veuillez décrire en quelques lignes votre problème</span></label>
  <p>
    <textarea name="Problème" class="textarea"></textarea>
</p>
 
 
  <p>
    <label for="calendrier"><span class="text9">Choisissez une date de rendez-vous </span></label>
  </p>
  <div style="z-index:1000;">
    <div id="cal2Container" align="right"></div>
 
 
<br />
 <div style="text-align:right;">
 <div style="margin-left:auto;margin-right:auto;width:210px">
    <input name="selDaycal2" type="hidden" id="selDaycal2" />
    <input name="selMonthcal2" type="hidden" id="selMonthcal2" />
    <input name="selYearcal2" type="hidden" id="selYearcal2" />
    <input name="selHourcal2" type="hidden" id="selHourcal2" />
    <input name="selMinutecal2" type="hidden" id="selMinutecal2" />
 </div></div>
 
    <p>
     <center> <input type="submit" value="Envoyer" name="submit" class="text19"/></center>
    </p>
 
 
 
  <input type="hidden" name="hdwemail" id="hdwemail" value="hypnosepithiviers+yahoo.fr" />
  <input type="hidden" name="hdwok" id="hdwok" value="merci.html" />
  <input type="hidden" name="hdwnook" id="hdwnook" value="erreur.html" />
</div>
</form>

**Torgar** · 18/09/2012, 12h25

Aucun problème avec ton code, sous Firefox 15 les boutons radios sont bien côte à côte, comme te l'affiche Dreamweaver. Il en est de même pour IE des versions 7 à 9.

Tu n'aurais pas un problème de cache par hasard ?

À part ça quelques remarques d'ordre général :

<center> c'est terminé, préfère un centrage par CSS (text-align: center; ou width: X; margin: 0 auto ;
<input name="Nom" type="text" value="" width="260px"/> : passe par du CSS pour le dimensionnement de ta zone de saisie ;
<p id="nvx"> est répété !!! Un identifiant doit être unique et utilisé qu'une seule fois par page. Préfère l'usage des classes si tuas besoin de répéter un style sur plusieurs éléments dans ta page ;
indente ton code de façon à ce qu'il soit plus clair à la lecture.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!doctype html>
<head>
    <title>Ma page de test DVP</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="./main/js/jquery-ui/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="./main/js/jquery-ui/jquery-ui-1.8.16.custom.min.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #label{
        background:#D8F8A1;
    }
 
    #info label{
        display:inline-block;
        width:5em;
        text-align:right;
    }
 
    #info input{
        margin-right:60px;
    }
 
    #town label{
        display:inline-block;
    }
 
    #town input{
        background:#D8F8A1;
        margin-right:18px;
    }
 
    input[type=radio]{
        color:#D8F8A1;
    } 
 
    #nvx input{
        background:#D8F8A1;
    }
    </style>
 
    <script type='text/javascript'>
        
    </script>
</head>
<body>
    <header>
    </header>
 
    <article>
        <form action="/HDWForm2Mail/Form2Mail.php" method="post" id="form1" onsubmit="return validate(this)" accept-charset="iso-8859-1">
            <p id="nvx">
                <label for="Nom"><span class="text9">Nom / prénom :</span></label>
                <input name="Nom" type="text" value="" width="260px"/>
            </p> 
 
            <p id="town">
                <label for="Adresse"><span class="text9">Adresse :</span></label>
                <input name="Adresse" type="text" value="" /> 
 
                <label for="Code"><span class="text9">Code postal :</span></label>
                <input name="Code" type="text" value="" width="80" />
 
                <label for="Ville"><span class="text9">Ville :</span></label>
                <input name="Ville" type="text" value="" />
            </p>
 
            <p id="nvx">
                <label for="Email"><span class="text9">Email :</span></label>
                <input name="Email" type="email" value="" width="260px" />
            </p>
 
            <p>
                <label><span class="text9">La séance est pour un:</span></label>
            </p>
 
            <p id="info"><center>
                <label for="Adulte" class="text9">Adulte</label>
                <input name="Genre" type="radio" value="Adulte" />
                <label for="Adolescent" class="text9"> Adolescent</label>
                <input name="Genre" type="radio" value="Adolescent" />
                <label for="Enfant" class="text9"> Enfant</label>
                <input name="Genre" type="radio" value="Enfant" /></center>
            </p>
            <p>
                <label for="Sujet"><span class="text9">Veuillez décrire en quelques lignes votre problème</span></label>
            </p>
            <p>
                <textarea name="Problème" class="textarea"></textarea>
            </p>
 
            <p>
                <label for="calendrier"><span class="text9">Choisissez une date de rendez-vous </span></label>
            </p>
            <div style="z-index:1000;">
                <div id="cal2Container" align="right"></div>
                <br />
                <div style="text-align:right;">
                    <div style="margin-left:auto;margin-right:auto;width:210px">
                        <input name="selDaycal2" type="hidden" id="selDaycal2" />
                        <input name="selMonthcal2" type="hidden" id="selMonthcal2" />
                        <input name="selYearcal2" type="hidden" id="selYearcal2" />
                        <input name="selHourcal2" type="hidden" id="selHourcal2" />
                        <input name="selMinutecal2" type="hidden" id="selMinutecal2" />
                    </div>
                </div>
 
                <p>
                    <center> <input type="submit" value="Envoyer" name="submit" class="text19"/></center>
                </p>
 
                <input type="hidden" name="hdwemail" id="hdwemail" value="hypnosepithiviers+yahoo.fr" />
                <input type="hidden" name="hdwok" id="hdwok" value="merci.html" />
                <input type="hidden" name="hdwnook" id="hdwnook" value="erreur.html" />
            </div>
        </form>
    </article>
 
    <footer>
    </footer>
</body>
</html>

**cuddy** · 18/09/2012, 13h36

OK merci mais a l'affichage j'ai toujours la même merde donc sa doit être de mon coté
Merci pour ta patience

probleme Bouton radio

HTML

Vue hybride

Discussions similaires

Partager

Partager