Agrandissement des cases à cocher dans un formulaire

**mariok** · 05/11/2015, 21h19

Bonsoir

voila j'ai un formulaire qui fonctionne (désolé pour les puristes mais je l'est fait sans aucunes connaissances du html)

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
<title>formulaire d'aide</title>
<style type="text/css">
p {
margin-top: 0px;
align: center;
}
fieldset {
margin-bottom: 15px;
padding: 10px;
width: 50%;
margin-left: auto;
margin-right: auto;  
-moz-box-shadow: 5px 5px 5px 2px #3166ff;
-webkit-box-shadow: 5px 5px 5px 2px #3166ff;
-o-box-shadow: 5px 5px 5px 2px #3166ff;
box-shadow: 5px 5px 5px 2px #3166ff;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=5);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px ;
}
legend {
padding: 0px 3px;
font-weight: bold;
font-variant: small-caps;
}
label {
width: 15%;
display: inline-block;
vertical-align: top;
margin: 6px;
}
input:focus {
background: #eaeaea;
}
input, textarea {
width: 249px;
}
textarea {
height: 100px;
}
select {
width: 254px;
}
input[type=checkbox] {
width: 10px;
}
input[type=submit] {
width: 100px;
padding: 10px;
display: block;
margin : auto;   
-moz-box-shadow: 5px 5px 5px 2px #3166ff;
-webkit-box-shadow: 5px 5px 5px 2px #3166ff;
-o-box-shadow: 5px 5px 5px 2px #3166ff;
box-shadow: 5px 5px 5px 2px #3166ff;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=5);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px ;
}
  
 body
{
  margin:0;
  padding:0;
  background: url(http://zupimages.net/up/15/45/h8t5.png) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}
         
mark {
background-color:white;
color: black; }
          
  
  
</style>
</head>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
<title>formulaire d'aide</title>
<style type="text/css">
p {
margin-top: 0px;
align: center;
}
fieldset {
margin-bottom: 15px;
padding: 10px;
-moz-box-shadow: 5px 5px 5px 2px #3166ff;
-webkit-box-shadow: 5px 5px 5px 2px #3166ff;
-o-box-shadow: 5px 5px 5px 2px #3166ff;
box-shadow: 5px 5px 5px 2px #3166ff;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=5);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px ;
}
legend {
padding: 0px 3px;
font-weight: bold;
font-variant: small-caps;
}
label {
width: 30%;
display: inline-block;
vertical-align: top;
margin: 6px;
}
input:focus {
background: #eaeaea;
}
input, textarea {
width: 249px;
}
textarea {
height: 100px;
}
select {
width: 254px;
}
input[type=checkbox] {
width: 10px;
}
input[type=submit] {
width: 100px;
padding: 10px;
-moz-box-shadow: 5px 5px 5px 2px #3166ff;
-webkit-box-shadow: 5px 5px 5px 2px #3166ff;
-o-box-shadow: 5px 5px 5px 2px #3166ff;
box-shadow: 5px 5px 5px 2px #3166ff;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=5);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px ;
}
</style>
</head>
<body>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onsubmit="envoiMessage(this)">
<input type="hidden" name="lt" value="0"/>
<input type="hidden" name="mode" value="newtopic"/>
<input type="hidden" name="topictype" value="0" checked="checked"/>
<input type="hidden" name="message" value=""/>
<input type="hidden" name="f" value="51"/>
<!--  ID du forum dans lequel le message sera posté -->
 <p><strong><i><center>Formulaire de dépot de vente de matériel de puériculture</center></i></strong></p><b>
 
   <strong><i><center><BIG>AMARID n'est pas responsable des annonces déposées et transactions</center></i></strong><br></BIG>
 
   <fieldset>
     <center><trong><big><MARK>VENTE DE MATÉRIEL LIÉ À LA PETITE ENFANCE</big></center></strong></MARK>
 
  </fieldset>
<fieldset>
<legend align="center">Type de matériel  </legend>
<center><big><label for="neuf"><input id="neuf" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/45/dkj9.png"/> Neuf</label>
  <label for="occasion"><input id="occasion" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/45/q9rk.png"/> Occasion</label></center></big>
</fieldset>
 <fieldset>
      <legend align="center">Titre de votre annonces & vos coordonnées</legend>
             <label for="Titre du sujet">Titre de votre annonce : </label><input type="text" name="subject" id="sujet" value="" required size="110" maxlength="100" /><br />
             <label for="Pseudo">Pseudo : </label><input id="pseudo" ><br>
             <label for="tel">Numéro de téléphone :</label><input id="téléphone"><br> 
             <label for="email">Email : </label><input id="email"  ><br>  
  </fieldset>
 
 
  <fieldset>
      <legend align="center">Matériel & prix</legend>
        <label for="neufoccasion">Type de matériel :</label>
        <select id="matos" name="" required >
                <option value="">Type de matériel</option>
                <option value="Jouets">Jouets</option>
                <option value="Jeux éducatifs">Jeux éducatifs</option>
                <option value="Poussette">Poussette</option>
                <option value="Landeau">Landeau</option>
                <option value="Lit">Lit</option>
                <option value="Table à langer">Table à langer</option>
                <option value="biberon">Biberon</option>
                <option value="Chauffe biberon">Chauffe biberon</option>
                <option value="Stérilisateur">Stérilisateur</option>
                <option value="Petit éléctro-ménager">Petit éléctro-ménager</option>
                <option value="Autres">Autres (Préciser dans la description)</option>
                </select> <br> 
       <label for="tranche">Tranche d'âge concernée : </label>
        <select id="tranche" name="">
          <option value="">Tranches d'âge concernée</option>
          <option value="0-3 mois">de 0 à 3 mois</option>
          <option value="3-6 mois">de 3 à 6 mois</option>
          <option value="6-12 mois">de 6 à 12 mois</option>
          <option value="12-24 mois">de 12 à 24 mois</option>
          <option value="24 mois et plus">24 mois et +</option>
            </select> <br> 
      <label for="Matériel">Déscription du matériel : </label><textarea id="materiel"></textarea><br><br>
      <label for="Photo du matériel">Photo du matériel :</label>   <button onclick="window.open('http://www.zupimages.net/'); return false;">Télécharger</button><br /><br />
      <label for="Mettez le lien BBCODE votre image ici">Mettez le lien BBCODE votre image ici :</label> <input type="text" name="image" size="110" maxlength="200" /><br /><br />  
 
       <label for="prix">Prix du matériel : </label><input id="prix">€<br>
  </fieldset>
 
  <fieldset>
    <legend align="center" >Date de disponnibilité & récupération du matériel</legend>
    <label for="Date">Date de disponibilité :</label><input id="Date"><br>
     <label for="Livré">Type de livraison :</label>
        <select id="livre" name="">
                <option value="">Type de livraison</option>
                <option value="livré">Envoyé par la poste</option>
                <option value="poste">Prendre à mon domicile</option>
                <option value="Autre">Autres à définir dans le message</option>
      </select> <br>  
         <label for="autre1">Si autre veuillez préciser :</label><input id="autre1"  ><br>   
 </fieldset> 
 
     <input value="validez" name="post" type="submit" />   
 
 
</form>
<script type="text/javascript">
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "<div class=formulaireannonce><div style="text-align: center;">" ;
// Dans le cas des checkboxs, on va les parcourir pour prendre la valeur de celles qui sont cochées:
for(var i = 0; i < form.renseignements.length; i++)
   {
   if(form.renseignements[i].checked == true) {
   txt_message += " [img]" + form.renseignements[i].value + "[/img] ";}
   }
txt_message += "</div>\n\n\<b>Titre de votre annonce : " + form.sujet.value + '</b>\n'
+ "Pseudo :" + form.pseudo.value + '\n'
          + "Numéro de téléphone : " + form.téléphone.value + '\n'
          + "Email :" + form.email.value + '\n'
          + "Type de matériel : " + form.matos.value + '\n'
          + "Tranche d'âge concernée : " + form.tranche.value + '\n'
          + "Déscription du matériel : " + form.materiel.value + '\n' + '\n'
          + "Mettez votre image ici : " + form.image.value + '\n'
          + "Prix du matériel : <i><mark> " + form.prix.value +  '  €' + '</i></mark>\n'+ '\n'
          + "Date de disponibilité : " + form.Date.value + '\n' 
          + "Type de livraison : "+ form.livre.value +'\n' 
          + "Si autre veuillez préciser : "+ form.autre1.value +'\n </strong>' + '</div>  \n' ;
 
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
</body>
</html>

mon souci je voudrais agrandir les case à coché de la checkbox sans touché au reste
merci pour vos réponses

**ABCIWEB** · 06/11/2015, 03h47

Envoyé par mariok

mon souci je voudrais agrandir les case à coché de la checkbox sans touché au reste

Pas facile, normalement c'est le navigateur qui les définis avec ses valeurs donc il n'y a pas de solution simple.
Tu auras des exemples de code pour contourner ce problème en rentrant les mots clé "checkbox css3" dans un moteur de recherche.

Au passage tu dis que ce formulaire est fonctionnel mais je vois des select avec name="" ex : <select id="matos" name="" required > ??

**mariok** · 06/11/2015, 09h21

d'abord merci pour prendre le temps de me répondre

le name="" gene en quoi je débute

**gazza** · 06/11/2015, 20h33

Envoyé par mariok

le name="" gene en quoi je débute

Voici la syntaxe attendue pour une "select list" :

Code :

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

1
2
3
4
5
6
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

source :
http://www.w3schools.com/tags/tag_select.asp

**ABCIWEB** · 06/11/2015, 21h45

Je viens juste de faire remarquer qu'il vaudrait mieux renseigner l'attribut "name" du select sinon comment vas-tu faire pour récupérer la valeur sélectionnée ?

Agrandissement des cases à cocher dans un formulaire

HTML

Vue hybride

Discussions similaires

Partager

Partager