Bonjour,
je dois créer un gros formulaire avec des champs de texte, des groupes de boutons radio,des groupes de cases à cocher et la possibilité d’envoyer une photo.
j’ai déjà utilisé eform pour des formulaires de contacts simple (nom, prénom, mail, message) pas de soucis de ce côté-là.
chaque information à son [tt]eform="information::1:"[/tt] propre.
par contre pour la gestion des cases à cocher, des boutons radios et de l’envoi de photo, je sèche un peu, comment doit-on les gérer ?
j’ai jeté un oeil à la doc de eform, il est noté que les cases à cocher et boutons radios sont gérés automatiquement, mais je suppose qu’il fait quand même faire quelques manips !
ci-joint le code de mon formulaire (la mise en "style" finale sera faire quand le formulaire sera ok)
c’est pour un client qui installe des panneaux photovoltaïques
[tt]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<body>
<p class="error">[+validationmessage+]</p>
<form action="[~[*id*]~]" method="post" enctype="multipart/form-data" id="EmailForm">
<input name="formid" type="hidden" value="ContactFormdevis" />
<p class="contact">
<label for="cfName"><span class="etiquette">Nom prénom :</span>
<input name="name" type="text" class="text" id="cfName" size="40" eform="Your Name::1:" /></label>
</p>
<p class="contact">
<label for="cfEmail"><span class="etiquette">E-mail :</span>
<input name="email" type="text" class="text" id="cfEmail" size="40" eform="Email Address:email:1:" /></label>
</p>
<p class="contact">
<label for="cftelephone"><span class="etiquette">Téléphone :</span>
<input name="telephone" type="text" class="text" id="cftelephone" size="40" eform="telephone::1:" /></label>
</p>
<p class="contact">
<label for="cfadresse"><span class="etiquette">Adresse :</span>
<input name="adresse" type="text" class="text" id="cfadresse" size="40" eform="adresse::1:" /></label>
</p>
<p class="contact">
<label for="cfcodepostal"><span class="etiquette">Code postal :</span>
<input name="codepostal" type="text" class="text" id="cfcodepostal" size="5" eform="codepostal::1:" /></label>
<label for="cfville"><span class="etiquette">Ville :</span>
<input name="ville" type="text" class="text" id="cfville" size="40" eform="ville::1:" /></label>
</p>
<p class="contact">
<label for="cfrendezvous"><span class="etiquette">Heure de rendez-vous souhaitée :</span>
<input name="rendezvous" type="text" class="text" id="cfrendezvous" size="40" eform="rendezvous::1:" /></label>
</p>
<p>Informations concernant votre maison</p>
<p>le bâtiment
<label>
<input name="batiment" type="radio" id="batiment_0" value="bouton radio" checked="checked" />
Maison individuelle</label>
<label>
<input type="radio" name="batiment" value="bouton radio" id="batiment_1" />
Autre</label>
orientation (degré/sud) :
<input type="text" name="orientation" id="orientation" eform="orientation::1:"/>
degrés</p>
<p>penteX/horizontale) :
<input type="text" name="pente" id="pente" eform="pente::1:"/>
degrés</p>
<p>largeur disponible :
<input type="text" name="largeur" id="largeur" eform="largeur::1:"/>
mètres</p>
<p>hauteur disponible :
<input type="text" name="hauteur" id="hauteur" eform="hauteur::1:"/>
mètres</p>
<p>
Informations concernant votre toiture</p>
<p>Hauteur base du toit :
<input type="text" name="base" id="base" eform="base::1:"/>
mètres</p>
<p>Type de toiture</p>
<p>
<label>
<input name="toiture" type="radio" id="toiture_0" value="bouton radio" />
Tuile canal</label>
<label>
<input type="radio" name="toiture" value="bouton radio" id="toiture_1" />
Tuile mécanique</label>
<label>
<input name="toiture" type="radio" id="toiture_2" value="bouton radio" checked="checked" />
Tuile plate</label>
<label>
<input type="radio" name="toiture" value="bouton radio" id="toiture_3" />
Ardoise</label>
<label>
<input type="radio" name="toiture" value="bouton radio" id="toiture_4" />
Bac acier</label>
<label>
<input type="radio" name="toiture" value="bouton radio" id="toiture_5" />
Fibrociment</label>
<label>
<input type="radio" name="toiture" value="bouton radio" id="toiture_6" />
Autres</label>
</p>
<p>Implantation des modules :
<label>
<input type="radio" name="implantation" value="bouton radio" id="implantation_0" />
intégration en toiture</label>
<label>
<input type="radio" name="implantation" value="bouton radio" id="implantation_1" />
autre</label>
</p>
<p>photo de votre bâtiment en jpeg
</p>
<p>
<input type="file" name="fichier" id="fichier" eform="fichier::1:"/>
</p>
<p>Informations sur l’onduleur (optionnel)</p>
<p>Décrire l’emplacement de l’onduleur :
<input type="text" name="placeonduleur" id="placeonduleur" eform="placeonduleur::1:"/>
</p>
<p>distance modules/onduleur :
<input type="text" name="dist-module-onduleur" id="dist-module-onduleur" eform="dist-module-onduleur::1:"/>
</p>
<p>distance onduleur/disjoncteur EDF :
<input type="text" name="dist-onduleur-edf" id="dist-onduleur-edf" eform="dist-onduleur-edf::1:"/>
</p>
<p>Emplacement compteur EDF :
<input type="text" name="compteur-edf" id="compteur-edf" eform="compteur-edf::1:"/>
(limite de propriété, intérieur...)</p>
<p>Divers</p>
<p>Ombrage : il est très pénalisant en photovoltaïque, décrivez brièvement les obstacles pouvant créer de l’ombre :</p>
<p>
<input type="text" name="ombrage" id="ombrage" eform="ombrage::1:"/>
</p>
<p>
<label>
<input type="checkbox" name="travaux_" value="case à cocher" id="travaux_3" />
passage de câbles à travers un mur</label>
<label>
<input type="checkbox" name="travaux_" value="case à cocher" id="travaux_4" />
passage de câbles à travers un plancher</label>
<label>
<input type="checkbox" name="travaux_" value="case à cocher" id="travaux_5" />
travaux de génie civil (tranchées)</label>
</p>
<p>
<img src="[+verimageurl+]" alt="verification code" border="1"/>
<label accesskey="c" for="vericode">code</label>
<input type="text" name="vericode" size="20" />
</p>
<p><input type="submit" name="contact" id="cfContact" class="button" value="Envoyer" /></p>
<input type="hidden" name="subject" id="cfsubject" eform="subject objet::1:"/>
</form>
</body>
</html>[/tt]
Merci d’avance
Amigafreak
et ça permet d’y rajouter des notes !