Formulaire avec checkbox

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Formulaire avec checkbox

Message par mariok13 Mer 28 Oct 2015 - 10:00

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 Formulaire avec checkbox Voitur10
- 6°) je ne recupere pas la variable date

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
mariok13

mariok13
****

Messages : 421
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire avec checkbox

Message par mariok13 Jeu 29 Oct 2015 - 20:46

bonsoir up
mariok13

mariok13
****

Messages : 421
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire avec checkbox

Message par Invité Jeu 29 Oct 2015 - 21:15

bonsoir mariok

hum cette astuce peut elle te convenir .. scratch

Astuce > https://forum.forumactif.com/t359306-mettre-un-bouton-dans-une-image#3053304
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire avec checkbox

Message par mariok13 Ven 30 Oct 2015 - 7:53

bonjour merci de ta réponse mais cela ne correspond pas

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
mariok13

mariok13
****

Messages : 421
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire avec checkbox

Message par Scoubifitz Ven 30 Oct 2015 - 11:15

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 :

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 .
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire avec checkbox

Message par mariok13 Ven 30 Oct 2015 - 11:38

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
mariok13

mariok13
****

Messages : 421
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire avec checkbox

Message par Scoubifitz Ven 30 Oct 2015 - 12:25

Pour centrer les image il faut mettre les balises de centrage à l'extérieur de la boucle ...

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 ? scratch
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire avec checkbox

Message par mariok13 Ven 30 Oct 2015 - 12:40

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


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>
mariok13

mariok13
****

Messages : 421
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire avec checkbox

Message par Scoubifitz Sam 31 Oct 2015 - 9:40

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>
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire avec checkbox

Message par mariok13 Sam 31 Oct 2015 - 12:52

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
mariok13

mariok13
****

Messages : 421
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum