Mettre plusieurs case à cocher un après l'autre (formulaire)

**hstlaurent** · 28/06/2005, 16h38

Salut,

Je cherche le moyen de mettre plusieurs case à cocher une après l'autre. Elle doit avoir un width précis pour avior une grandeur standart et doit utiliser le¸<label> car je dois mettre la fonction for pour que lorsque je clique sur le label on va directement dans le champs. ?

Sinon est-ce qu'il y a une autre façon qu'utiliser la balisse <label> pour faire en sorte de cliquer sur le label et aller directement dans le champs?[/code]

**SpaceFrog** · 28/06/2005, 16h45

heu pas clair ta question ...

de plus for est un attribut du label et pas une fonction ...

Code :

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

<input type='checkbox' id='check1'><label for="check1">coucou</label>

**hstlaurent** · 28/06/2005, 16h58

Salut SpaceFrog,

Voici mon problème :
J'ai le code suivant, si tu le visualise avec mozilla tu verra que le champs at, liste déroulante et GMT ne s'affhiche pas sur la même ligne que Bid Closing On. Ça marche en IE mais je dois être compatible avec MOzilla. Mon problème des case à cocher est du même genre mais si je peux trouver une solution pour ça, je vais pouvoir le régler.

Je t'en souplit aide moi je suis a bout de ressource, ça fais deux jours que je suis sur ce problème... tu peux retoucher complètement le code ou autre je m'en fou je dois seulement éviter les table.

Si tu veux on pourrait communiquer par email?

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strick//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strick.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
 
body    {
        background: #fff;
        color: #333;
        margin: 0;
        padding: 0;
        font:0.8em Verdana, Arial, Helvetica, sans-serif;
}
#wrapper{margin:5px;}
#wrapper h1 {
font-size:115%;
margin:0 0 15px 0;}
 
input.txt {
border:1px solid #A5ACB2;
width:155px;
}
 
form p {
clear:left;
margin:0;
padding:5px 0 0 0;
}
 
form p label {
float:left;
width:145px;
}
 
form p label.second {
        float:none;
}
-->
</style>
</head>
<body>
<div id="wrapper">
 
<h1>3618 - For Sale GE Advantage 2 OB / GYN Ultrasound</h1>
 
<form action="" method="post">
	<p>
		<label for="close">Bid Closing On*</label>
		<input name="close" id="close" type="text" class="txt"/>
		<img src="file:///C|/Documents%20and%20Settings/elaflamm/Desktop/img-divers/note-icon.gif" width="8" height="9" />
 
		<label for="gmt" class="second"> at</label>
		<select name="select" id="gmt">
			<option>08:00 AM</option>
		</select> GMT
	</p>
	<p>
		<label for="lastname">Title</label>
		<input name="lastname"  id="lastname" type="text" class="txt" />
	</p>
	<p>
		<label for="email">Internal Ref. No. </label>
		<input name="email"  id="email" type="text" class="txt" />
	</p>
	<p>
		<label for="email">Reason for Request*</label>
	  <select name="select">
	    <option>Customer PO Pending</option>
                    </select>
	</p>
	<p>
		<label for="email">Delivery Term</label>
		<input name="email"  id="email" type="text" class="txt" />
	</p>
	<p>
		<label for="send">&nbsp;</label>
		<input name="send" type="button" value="Send" />
	</p>
</form>
</div>
</body>
</html>

**ilood** · 28/06/2005, 19h46

C'est pas très respectueux de la philosophie séparation fond et forme mais avec un tableau ton problème serait vité réglé.
Juste pour la première ligne de champs, ça devrait suffir.

**hstlaurent** · 28/06/2005, 19h50

qu'est-ce que tu veux dire???

de créer un tableau à chaque fois que j'aurais plusieurs champs sur une même ligne???

Sinon qu'est-ce que tu ferais (montre moi donc un bout de code)?

Pourquoi ça marche en IE mais pas en mozilla.

**ilood** · 28/06/2005, 22h09

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
<style type="text/css">
<!--
label {
        float: left;
        width: 9em;
}
label.second { width: 2em; }
-->
</style>
</head>
 
<body>
<form action="" method="post">
   <table>
   <tr>
      <td>
	  <label for="close">Bid Closing On*</label>
      <input name="close" id="close" type="text" class="txt"/>
      <img src="../../elaflamm/Desktop/img-divers/note-icon.gif" width="8" height="9" />
	  </td>
	  <td>
	  <label for="gmt" class="second"> at</label>
      <select name="select" id="gmt"><option>08:00 AM</option></select> GMT</p>
	  </td>
   </tr>
   </table>
   <p><label for="lastname">Title</label><input name="lastname"  id="lastname" type="text" class="txt" /></p>
   <p><label for="email">Internal Ref. No. </label><input name="email"  id="email" type="text" class="txt" /></p>
   <p><label for="email">Reason for Request*</label><select name="select"><option>Customer PO Pending</option></select></p>
   <p><label for="email">Delivery Term</label><input name="email"  id="email" type="text" /></p>
   <p><label for="send">&nbsp;</label><input name="send" type="button" value="Send" /></p>
</form> 
</body>

IE et Mozilla ont un comportement différent vis à vis des CSS, l'un est plus respectueux des standards que l'autre.

Donc pour éviter d'avoir à s'arracher les cheveux, un petit tableau peut arranger de gros problème de temps en temps.

Mais si quelqu'un à une solution 100% css je suis preneur, étant donné que j'ai souvent été confronté à ce problème de mise en page de formulaires.
Je devais me résoudre à afficher les champs les un en dessous des autres.

J'espère que ça te conviendra hstlaurent.

ps: j'ai pas fait le ménage dans le code html. Tu adapteras selon ta convenance. Et il y a plusieurs fois label for="email", je ne sais pas si c'est volontaire ou non mais fais-y attention.

**giminik** · 28/06/2005, 22h13

voici ce qu'il recherchait (il m'a contacté par mp...)

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
<style type="text/css">
<!--
 
body   {
   background: #fff;
   color: #333;
   margin: 0;
   padding: 0;
   font:0.8em Verdana, Arial, Helvetica, sans-serif;
}
#wrapper{margin:5px;}
#wrapper h1 {
font-size:115%;
margin:0 0 15px 0;}
 
input.txt {
border:1px solid #A5ACB2;
width:155px;
}
 
form p {
clear:both;
margin:0;
padding:5px 0 0 0;
}
 
form p label {
display:block; /* <-------- */
float:left;
width:145px;
}
 
.second {
/*position:relative;*/
display:inline; /* <-------- */
float:none;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<form action="" method="post">
   <p>
      <label for="close">Bid Closing On*</label>
      <input name="close" id="close" type="text" class="txt"/>
      <img src="file:///C|/Documents%20and%20Settings/elaflamm/Desktop/img-divers/note-icon.gif" width="8" height="9" />
 
      <label for="gmt" class="second"> at</label>
      <select name="select" id="gmt">
         <option>08:00 AM</option>
      </select> GMT
   </p>
   <p>
      <label for="lastname">Title</label>
      <input name="lastname"  id="lastname" type="text" class="txt" />
   </p>
</form>
</div>
</body>

**ilood** · 28/06/2005, 22h17

Ok merci de partager la solution giminik

**SpaceFrog** · 29/06/2005, 09h48

sinon j'utilise des li pour l'alignement ...
ou encore des fieldset

Mettre plusieurs case à cocher un après l'autre (formulaire)

HTML

Discussions similaires

Partager

Partager