Formulaire avec checkbox
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Formulaire avec checkbox
bonjour (encore moi)
je suis à fond dans les formulaires
j'essaye avec le premières aides de spécialiste des formulaire Scoubifitz (un grand merci à lui) de construire des formulaires
voila sur celui-ci jai voulu :
- 1°) Que le bouton validez envoi directement sur la création du sujet d'un forum mais la j'ai beau le tourné dans tous les sens il ne crée pas un nouveau sujet
- 2°) Je comprend pas comment dans la partie script on peut envoyé le contenu coché d'une checkbox
- 3°) Le message ne se poste pas
- 4°) avoir l'alignement horizontal de la checkbox dans le message poste
- 5°) mettre une image dans la valeur value qui est posté dans le message
- 6°)je ne recupere pas la variable date
je poste ici le formulaire en cours de fabrication
je suis à fond dans les formulaires
j'essaye avec le premières aides de spécialiste des formulaire Scoubifitz (un grand merci à lui) de construire des formulaires
voila sur celui-ci jai voulu :
- 2°)
- 3°) Le message ne se poste pas
- 4°) avoir l'alignement horizontal de la checkbox dans le message poste
- 5°) mettre une image dans la valeur value qui est posté dans le message
- 6°)
je poste ici le formulaire en cours de fabrication
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>formulaire d'aide</title>
<style type="text/css">
<style>
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: 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;
-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 d'une annonce</center></i></strong></p>
<fieldset>
<legend align="center">Titre de votre sujet</legend>
<label for="Titre du sujet">Titre du sujet :</label><input type="text" name="subject" id="sujet" value="" size="110" maxlength="100" /><br />
</fieldset>
<fieldset>
<legend align="center">Contact</legend>
<label for="prenom">Prénom :</label><input id="prenom" ><br>
<label for="email">Email :</label><input id="email" ><br>
<label for="mots">Quelques mots pour vous présenter :</label><textarea id="presentation"></textarea><br>
</fieldset>
<fieldset>
<legend align="center" >Nombre d'agréements</legend>
<label for="agréement">Nombre d'agréement :</label><input id="agrement" type="nombre" ><br>
</fieldset>
<fieldset>
<legend align="center">Nombre de places disposnibles</legend>
<label for="nombre">Nombre de places disponibles :</label><input id="placesdisponibles" ><br>
<label for="date1">Date de disponibilité :</label><input id="date1" type="date"><br>
</fieldset>
<fieldset>
<legend align="center">Renseignements complémentaires</legend>
<label for="maison"><input id="maison" type="checkbox" name="renseignements" value="maison"> Maison individuelle</label>
<label for="appartement"><input id="appartement" type="checkbox" name="renseignements" value="appartement"> Appartement</label>
<label for="materiel"><input id="materiel" type="checkbox" name="renseignements" value="materiel"> Matériel de puériculture</label>
<label for="permis"><input id="permis" type="checkbox" name="renseignements" value="permis"> Permis de conduire</label>
<label for="nonfumeur"><input id="nonfumeur" type="checkbox" name="renseignements" value="non fumeur"> Non fumeur</label>
<label for="psc"><input id="psc" type="checkbox" name="renseignements" value="PSC-1"> PSC-1</label><br>
<label for="mam"><input id="mam" type="checkbox" name="renseignements" value="mam"> M.A.M</label>
</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 = "Titre du sujet :" + form.sujet.value + '\n'
+ "Prénom :" + form.prenom.value +'\n'
+ "Email :" + form.email.value + '\n'
+ "Quelques mots pour vous présenter :" + form.presentation.value + '\n'
+ "Nombre d'agréement :" + form.agrement.value + '\n'
+ "Nombre de places disponibles :" + form.placesdisponibles.value + '\n';
+ "Date de disponibilité :" + form.date1.value + '\n';
// 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 = txt_message + '[*]' + form.renseignements[i].value + '\n'; }
}
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
</body>
</html>
Dernière édition par mariok13 le Sam 31 Oct 2015 - 13:57, édité 5 fois
Re: Formulaire avec checkbox
bonsoir up
Re: Formulaire avec checkbox
bonsoir mariok
hum cette astuce peut elle te convenir ..
> https://forum.forumactif.com/t359306-mettre-un-bouton-dans-une-image#3053304
hum cette astuce peut elle te convenir ..
> https://forum.forumactif.com/t359306-mettre-un-bouton-dans-une-image#3053304
Invité- Invité
Re: Formulaire avec checkbox
bonjour merci de ta réponse mais cela ne correspond pas
dans cette partie il y mam non fumeur etc.... les noms dans la balise value
ce script permet d'envoyé le tout dans un nouveau message
deux soucis ou améliorations
1°) j'ai crée une image pour mam non fumeur etc.... j'aimerais qu'au lieu d'envoyé un mot le script puisse envoyé l'image
2°) la partie checkox est envoyé en liste verticale je souhaiterais plutôt une liste horizontale
3°) si je met un type date elle quand on poste elle est au format anglais
merci
- Code:
<legend align="center">Renseignements complémentaires</legend>
<label for="maison"><input id="maison" type="checkbox" name="renseignements" value="MAISON"> Maison individuelle</label>
<label for="appartement"><input id="appartement" type="checkbox" name="renseignements" value="APPARTEMENT"> Appartement</label>
<label for="materiel"><input id="materiel" type="checkbox" name="renseignements" value="MATÉRIEL PUERICULTURE"> Matériel de puériculture</label>
<label for="permis"><input id="permis" type="checkbox" name="renseignements" value="PERMIS"> Permis de conduire</label>
<label for="nonfumeur"><input id="nonfumeur" type="checkbox" name="renseignements" value="NON FUMEUR"> Non fumeur</label>
<label for="psc"><input id="psc" type="checkbox" name="renseignements" value="PSC-1"> PSC-1</label><br>
<label for="mam"><input id="mam" type="checkbox" name="renseignements" value="M.A.M"> M.A.M</label>
dans cette partie il y mam non fumeur etc.... les noms dans la balise value
ce script permet d'envoyé le tout dans un nouveau message
- Code:
<script type="text/javascript">
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "Titre du sujet :" + form.sujet.value + '\n'
+ "Prénom :" + form.prenom.value + '\n'
+ "Email :" + form.email.value + '\n'
+ "Quelques mots pour vous présenter :" + form.presentation.value + '\n'
+ "Nombre d'agréement :" + form.agrement.value + '\n'
+ "Nombre de places disponibles :" + form.placesdisponibles.value + '\n'
+ "Date de disponibilité :" + form.date.value + '\n' + '\n'
+ "Renseignements complémentaires :"+ '\n' + '\n' ;
// 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 = txt_message + '* ' + form.renseignements[i].value + '\n'; }
}
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
deux soucis ou améliorations
1°) j'ai crée une image pour mam non fumeur etc.... j'aimerais qu'au lieu d'envoyé un mot le script puisse envoyé l'image
2°) la partie checkox est envoyé en liste verticale je souhaiterais plutôt une liste horizontale
3°) si je met un type date elle quand on poste elle est au format anglais
merci
Re: Formulaire avec checkbox
bonjour,
Comme c'est la valeur de la checkbox qui est retenue dans le script , il faut remplacer le texte par le
lien de l'image ...
exemple :
Pour que les valeurs de vos checkboxs s'alignent après envoi , il faut supprimer le retour à la ligne (\n) dans la boucle de votre script .
et mettre les balises img pour faire apparaitre les images après envoi , ce qui donnerait ceci :
le type "date" est prévu pour du HTML5 et n'est pas encore supporté par tous les navigateurs (notamment IE et Firefox) , seule la version anglaise existe pour ce type de champ ...
mettez de préférence un type text classique , avec un placeholder pour expliquer le format .
Comme c'est la valeur de la checkbox qui est retenue dans le script , il faut remplacer le texte par le
lien de l'image ...
exemple :
- Code:
<label for="permis"><input id="permis" type="checkbox" name="renseignements" value="http://i21.servimg.com/u/f21/13/05/48/28/voitur10.png"> Permis de conduire</label>
Pour que les valeurs de vos checkboxs s'alignent après envoi , il faut supprimer le retour à la ligne (\n) dans la boucle de votre script .
et mettre les balises img pour faire apparaitre les images après envoi , ce qui donnerait ceci :
- Code:
// 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] "; }
}
le type "date" est prévu pour du HTML5 et n'est pas encore supporté par tous les navigateurs (notamment IE et Firefox) , seule la version anglaise existe pour ce type de champ ...
mettez de préférence un type text classique , avec un placeholder pour expliquer le format .
Re: Formulaire avec checkbox
comme d'hab au top
juste pour les différents tutos que tu as mis pour les formulaires j'ai cherche longtemps pour faire un CSS joli lorsqu'on poste le message il m'as été difficile de trouver que c'était dans le Css du forum et non de la page html
- Dernier souci si je poste titre de sujet avec subject et que je respecte le nombre de caractere il poste automatiquement le message
edit oups je peut pas centrer les images sniff
juste pour les différents tutos que tu as mis pour les formulaires j'ai cherche longtemps pour faire un CSS joli lorsqu'on poste le message il m'as été difficile de trouver que c'était dans le Css du forum et non de la page html
- Dernier souci si je poste titre de sujet avec subject et que je respecte le nombre de caractere il poste automatiquement le message
edit oups je peut pas centrer les images sniff
Re: Formulaire avec checkbox
Pour centrer les image il faut mettre les balises de centrage à l'extérieur de la boucle ...
C'est ce qu'est censé faire le formulaire , non ?
- Code:
+ "Renseignements complémentaires :\n\n[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 += "[/center]";
}
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
- Dernier souci si je poste titre de sujet avec subject et que je respecte le nombre de caractere il poste automatiquement le message
C'est ce qu'est censé faire le formulaire , non ?
Re: Formulaire avec checkbox
oui et non mais je vais obligé le post automatique merci pour tout
question pour ma culture personnel quand je met une checkbox comme premier champs du formulaire cela marche plus il faut la variable subject en premier absolument ?
edit j'ai beau tourné dans tous les sens le center des images marche pas
je te met le formulaire complet
question pour ma culture personnel quand je met une checkbox comme premier champs du formulaire cela marche plus il faut la variable subject en premier absolument ?
edit j'ai beau tourné dans tous les sens le center des images marche pas
- Code:
<script type="text/javascript">
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "<div class=formulaireannonce><b><center>Titre de votre annonce :" + form.sujet.value + '</center></b>\n'
+ "Prénom :" + form.prenom.value + '\n'
+ "Email :" + form.email.value + '\n'
+ "Quelques mots pour vous présenter :" + form.presentation.value + '\n'
+ "Nombre d'agréement :" + form.agrement.value + '\n'
+ "Nombre de places disponibles :" + form.placesdisponibles.value + '\n'
+ "Date de disponibilité :" + form.date.value + '\n' + '</div> \n'
+ "<strong>Renseignements complémentaires :</strong>"+ '\n' + '\n' ;
// 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] "; }
}
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
je te met le formulaire complet
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>formulaire d'aide</title>
<style type="text/css">
<style>
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: 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;
-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 d'une annonce</center></i></strong></p>
<fieldset>
<legend align="center">Titre de votre Annonce</legend>
<label for="Titre du sujet">Titre de votre annonce :</label><input type="text" name="subject" id="sujet" value="" size="110" maxlength="100" /><br />
</fieldset>
<fieldset>
<legend align="center">Contact</legend>
<label for="prenom">Prénom :</label><input id="prenom" ><br>
<label for="email">Email :</label><input id="email" ><br>
<label for="mots">Quelques mots pour vous présenter :</label><textarea id="presentation"></textarea><br>
</fieldset>
<fieldset>
<legend align="center" >Nombre d'agréements</legend>
<label for="agréement">Nombre d'agréement :</label><input id="agrement" type="nombre" ><br>
</fieldset>
<fieldset>
<legend align="center">Nombre de places disposnibles</legend>
<label for="nombre">Nombre de places disponibles :</label><input id="placesdisponibles" ><br>
<label for="date">Date de disponibilité :</label><input id="date" > <b><i>tapez votre date au format que vous souhaiter</b></i><br>
</fieldset>
<fieldset>
<legend align="center">Renseignements complémentaires</legend>
<label for="maison"><input id="maison" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/n0g1.png"> Maison individuelle</label>
<label for="appartement"><input id="appartement" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/l3jj.png"> Appartement</label>
<label for="materiel"><input id="materiel" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/d4m7.png"> Matériel de puériculture</label>
<label for="permis"><input id="permis" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/9hdn.png"> Permis de conduire</label>
<label for="nonfumeur"><input id="nonfumeur" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/z3xy.png"> Non fumeur</label>
<label for="psc"><input id="psc" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/ssva.png"> PSC-1</label><br>
<label for="mam"><input id="mam" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/fa1v.png"> M.A.M</label>
</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><b><center>Titre de votre annonce :" + form.sujet.value + '</center></b>\n'
+ "Prénom :" + form.prenom.value + '\n'
+ "Email :" + form.email.value + '\n'
+ "Quelques mots pour vous présenter :" + form.presentation.value + '\n'
+ "Nombre d'agréement :" + form.agrement.value + '\n'
+ "Nombre de places disponibles :" + form.placesdisponibles.value + '\n'
+ "Date de disponibilité :" + form.date.value + '\n' + '</div> \n'
+ "<strong><big>Renseignements complémentaires :</strong></big>"+ '\n' + '\n' ;
// 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] "; }
}
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
</body>
</html>
Re: Formulaire avec checkbox
mariok13 a écrit:question pour ma culture personnel quand je met une checkbox comme premier champs du formulaire cela marche plus il faut la variable subject en premier absolument ?
On peut mettre des checkboxs en premier dans la partie HTML , et récupérer leur valeur en premier dans le script .
votre code ci-dessus corrigé et fonctionnel :
- Code:
<!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: 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;
-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 d'une annonce</center></i></strong>
</p>
<fieldset>
<legend align="center">Titre de votre Annonce</legend>
<label for="sujet">Titre de votre annonce :</label><input type="text" name="subject" id="sujet" value="" size="110" maxlength="100"/><br/>
</fieldset>
<fieldset>
<legend align="center">Contact</legend>
<label for="prenom">Prénom :</label><input id="prenom" /><br/>
<label for="email">Email :</label><input id="email"/><br/>
<label for="presentation">Quelques mots pour vous présenter :</label><textarea id="presentation"></textarea><br/>
</fieldset>
<fieldset>
<legend align="center">Nombre d'agréements</legend>
<label for="agrement">Nombre d'agréement :</label><input id="agrement" type="nombre"/><br/>
</fieldset>
<fieldset>
<legend align="center">Nombre de places disposnibles</legend>
<label for="placesdisponibles">Nombre de places disponibles :</label><input id="placesdisponibles"/><br/>
<label for="date">Date de disponibilité :</label><input id="date" placeholder="tapez votre date au format que vous souhaitez" /><br/>
</fieldset>
<fieldset>
<legend align="center">Renseignements complémentaires</legend>
<label for="maison"><input id="maison" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/n0g1.png"/> Maison individuelle</label>
<label for="appartement"><input id="appartement" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/l3jj.png"/> Appartement</label>
<label for="materiel"><input id="materiel" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/d4m7.png"/> Matériel de puériculture</label>
<label for="permis"><input id="permis" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/9hdn.png"/> Permis de conduire</label>
<label for="nonfumeur"><input id="nonfumeur" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/z3xy.png"/> Non fumeur</label>
<label for="psc"><input id="psc" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/ssva.png"/> PSC-1</label><br/>
<label for="mam"><input id="mam" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/fa1v.png"/> M.A.M</label>
</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><b><center>Titre de votre annonce :" + form.sujet.value + '</center></b>\n'
+ "Prénom :" + form.prenom.value + '\n'
+ "Email :" + form.email.value + '\n'
+ "Quelques mots pour vous présenter :" + form.presentation.value + '\n'
+ "Nombre d'agréement :" + form.agrement.value + '\n'
+ "Nombre de places disponibles :" + form.placesdisponibles.value + '\n'
+ "Date de disponibilité :" + form.date.value + '\n'
+ "<strong><big>Renseignements complémentaires :</big></strong>\n\n[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 += "[/center]" + '</div> \n';
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
</body>
</html>
si vous voulez mettre les checkboxs en premier , ça donnerait :
- Code:
<!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: 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;
-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 d'une annonce</center></i></strong>
</p>
<fieldset>
<legend align="center">Renseignements complémentaires</legend>
<label for="maison"><input id="maison" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/n0g1.png"/> Maison individuelle</label>
<label for="appartement"><input id="appartement" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/l3jj.png"/> Appartement</label>
<label for="materiel"><input id="materiel" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/d4m7.png"/> Matériel de puériculture</label>
<label for="permis"><input id="permis" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/9hdn.png"/> Permis de conduire</label>
<label for="nonfumeur"><input id="nonfumeur" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/z3xy.png"/> Non fumeur</label>
<label for="psc"><input id="psc" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/ssva.png"/> PSC-1</label><br/>
<label for="mam"><input id="mam" type="checkbox" name="renseignements" value="http://zupimages.net/up/15/44/fa1v.png"/> M.A.M</label>
</fieldset>
<fieldset>
<legend align="center">Titre de votre Annonce</legend>
<label for="sujet">Titre de votre annonce :</label><input type="text" name="subject" id="sujet" value="" size="110" maxlength="100"/><br/>
</fieldset>
<fieldset>
<legend align="center">Contact</legend>
<label for="prenom">Prénom :</label><input id="prenom" /><br/>
<label for="email">Email :</label><input id="email"/><br/>
<label for="presentation">Quelques mots pour vous présenter :</label><textarea id="presentation"></textarea><br/>
</fieldset>
<fieldset>
<legend align="center">Nombre d'agréements</legend>
<label for="agrement">Nombre d'agréement :</label><input id="agrement" type="nombre"/><br/>
</fieldset>
<fieldset>
<legend align="center">Nombre de places disposnibles</legend>
<label for="placesdisponibles">Nombre de places disponibles :</label><input id="placesdisponibles"/><br/>
<label for="date">Date de disponibilité :</label><input id="date" placeholder="tapez votre date au format que vous souhaitez" /><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><strong><big>Renseignements complémentaires :</big></strong>\n\n[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 += "[/center]\n<center><b>Titre de votre annonce :" + form.sujet.value + '</b></center>\n'
+ "Prénom :" + form.prenom.value + '\n'
+ "Email :" + form.email.value + '\n'
+ "Quelques mots pour vous présenter :" + form.presentation.value + '\n'
+ "Nombre d'agréement :" + form.agrement.value + '\n'
+ "Nombre de places disponibles :" + form.placesdisponibles.value + '\n'
+ "Date de disponibilité :" + form.date.value + '\n</div> \n';
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
</body>
</html>
Re: Formulaire avec checkbox
ok merci je teste cette apres midi oui mais en mettant la fin du div de la class cela me met les renseignement complémentaire dans mon cadre c'est pas le resultat que je souhaite bon j'ai arrangé comme je voulait merci mettre du formulaire
Sujets similaires
» Bouton "Checkbox" dans un formulaire
» Javascript pour checkbox/radio dans un formulaire
» Formulaire javascript : problème pour récupérer la valeur d'une checkbox
» Problème avec un script (js) qui remplace le formulaire de création de sujet par son propre formulaire.
» Problème avec un formulaire généré par le générateur de formulaire (du support portuguais)
» Javascript pour checkbox/radio dans un formulaire
» Formulaire javascript : problème pour récupérer la valeur d'une checkbox
» Problème avec un script (js) qui remplace le formulaire de création de sujet par son propre formulaire.
» Problème avec un formulaire généré par le générateur de formulaire (du support portuguais)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum