Bonjour,
J'essaye de faire un formulaire web. J'ai assez bien compris comment faire, et
notamment l'intérêt des labels (mais pas celui des fieldset par rapport à des
<H#>). Deux bémols, je ne trouve pas si mon FAI (Lost-oasis) fournit un script
CGI pour l'envoi et surtout quand j'essaye avec un basique mailto seul mon
premier input est inclus dans le mail, bien que ma balise form me semble
correcte et que tous les input y sont inclus.
Je me permet de joindre mon code (uniquement le formulaire). J'ai encore qq
progrès à faire avec la mise en page css mais ça n'a pas d'incidence sur ce
qui m'embête.
<h1><img src="design/puce_b.png" alt="" width="12" height="12"
/> Demande de devis</h1>
<form method="post"
action="mailto:[email protected]?subject=demande%20de%20devis";
onsubmit="return confirm('Confirmez-vous la validation de votre demande de
devis ?')">
<div class="section">
<h2><img src="design/puce_j.png" alt=""
width="12"
height="12" /> Vos coordonnées</h2>
<div class="row">
<span class="label"><label
for="nom-client">Nom
:</label></span>
<span class="formw"><input
id="nom-client"
type="text" name="nom-client" size="16" maxlength="40" />
<label for="prenom-client"> Prénom :
</label>
<input type="text" id="prenom-client"
name="prenom-client" size="16" maxlength="40" /></span>
</div>
<div class="row">
<span class="label"><label for="adresse-
client">Adresse : </label></span>
<span class="formw"><textarea
id="adresse-client"
name="adresse-client" rows="1" cols="50"></textarea></span>
</div>
<div class="row">
<span class="label"><label
for="codpos_client">Code
postal : </label></span>
<span class="formw"><input
id="codpos_client"
type="text" name="codpos_client" size="16" maxlength="16" />
<label for="ville_client"> Ville :
</label>
<input id="ville_client" type="text"
name="ville_client"
size="16" maxlength="40" /></span>
</div>
<div class="row">
<span class="label"><label
for="tel_client">Téléphone
: </label></span>
<span class="formw"><input
id="tel_client"
type="text" name="tel_client" size="16" maxlength="16" /></span>
</div>
<div class="row">
<span class="label"><label
for="fax_client">Fax :
</label></span>
<span class="formw"><input
id="fax_client"
type="text" name="fax_client" size="16" maxlength="16" /></span>
</div>
<div class="row">
<span class="label"><label
for="portable_client">Portable : </label></span>
<span class="formw"><input
id="portable_client"
type="text" name="portable_client" size="16" maxlength="16" /></span>
</div>
<div class="row">
<span class="label"><label
for="mail_client">Mail :
</label></span>
<span class="formw"><input
id="mail_client"
type="text" name="mail_client" size="16" maxlength="40" /></span>
</div>
<div class="spacer"> </div>
</div>
<div class="section">
<h2><img src="design/puce_j.png" alt=""
width="12"
height="12" /> Coordonnées de la manifestation</h2>
<div class="row">
<span class="label"><label
for="date_manif">Date
:</label></span>
<span class="formw"><input
id="date_manif"
type="text" name="date_manif" size="16" maxlength="30" /></span>
</div>
<div class="row">
<span class="label"><label
for="heure_manif">Heure
:</label></span>
<span class="formw"><input
id="heure_manif"
type="text" name="heure_manif" size="16" maxlength="30" /></span>
</div>
<div class="row">
<span class="label"><label
for="type_manif">Type :
</label></span>
<span class="formw"><select
id="type_manif"
name="type-manif" class="styled">
<option>Mariage</option>
<option>Anniversaire</option>
<option>Banquet</option>
<option>Séminaire</option>
<option>Repas à thème</option>
<option>Plateaux repas</option>
<option>Autres (à
préciser)</option>
</select></span>
</div>
<div class="row">
<span class="label"><label
for="autre_manif">Autre :
</label></span>
<span class="formw"><input id="autre_manif"
type="text"
name="autre_manif" size="43" maxlength="80" /></span>
</div>
<div class="row">
<span class="label"><label for="adresse-
manif">Adresse : </label><br />(si différente)</span>
<span class="formw"><textarea
id="adresse-manif"
name="adresse-manif" rows="1" cols="49"></textarea></span>
</div>
<div class="row">
<span class="label"><label
for="codpos_manif">Code
postal : </label></span>
<span class="formw"><input
id="codpos_manif"
type="text" name="codpos_manif" size="16" maxlength="16" />
<label for="ville_manif"> Ville :
</label>
<input id="ville_manif" type="text"
name="ville_manif"
size="16" maxlength="40" /></span>
</div>
<div class="spacer"> </div>
</div>
<div class="section">
<h2><img src="design/puce_j.png" alt=""
width="12"
height="12" /> Convives et budget</h2>
<div class="row">
<span class="label"><label
for="adultes">Adultes :
</label></span>
<span class="formw"><input id="adultes"
type="text"
name="adultes" size="3" maxlength="3" /></span>
</div>
<div class="row">
<span class="label"><label
for="enfants">Enfants :
</label></span>
<span class="formw"><input id="enfants"
type="text"
name="enfants" size="3" maxlength="3" /> (moins de 10 ans)</span>
</div>
<div class="row">
<span class="label"><label
for="budget">Budget :
</label></span>
<span class="formw"><input id="budget"
type="text"
name="budget" size="3" maxlength="3" /> € (budget moyen souhaité par
convive)</span>
</div>
<div class="spacer"> </div>
</div>
<div class="section">
<h2><img src="design/puce_j.png" alt=""
width="12"
height="12" /> Location de matériel</h2>
<p><input id="poele-gm" type="checkbox"
name="poele-
gm" class="styled" /><label for="poele-gm">Poële géante - Grand
modèle</label></p>
<p><input id="poele-pm" type="checkbox"
name="poele-
pm" class="styled" /><label for="poele-pm">Poële géante - Petit
modèle</label></p>
<p><input id="tournebroche" type="checkbox"
name="tournebroche" class="styled" /><label for="tournebroche">Tourne-
broche pour méchoui et grillades</label></p>
</div>
<div class="section">
<h2><img src="design/puce_j.png" alt=""
width="12"
height="12" /> Mode de retrait de la commande</h2>
<p><input id="livraison1" type="radio"
name="livraison" class="styled" /><label for="livraison1">Retrait au
magasin</label></p>
<p><input id="livraison2" type="radio"
name="livraison" class="styled" /><label for="livraison2">Livraison en camion
frigorifique</label></p>
</div>
<div class="section">
<h2><img src="design/puce_j.png" alt=""
width="12"
height="12" /> Commentaires</h2>
<div class="row">
<span class="label"><label
for="commentaires">Autres informations intéressantes</label></span>
<span class="formw"><textarea
id="commentaires"
name="commentaires" rows="3" cols="49"></textarea></span>
</div>
<div
class="spacer"> <br/> <br/> <br/> <br/></div>
</div>
<p><input type="submit" value="Valider ma demande de
devis"
class="envoi" /> <input type="reset" value="Rénitialiser ma demande de
devis" class="envoi" /></p>
</form>
--
Cordialement, Daniel Cartron
« Il n'y a que deux sortes de gens attrayants ; ceux qui savent absolument
tout et ceux qui ne savent absolument rien. »
Oscar Wilde
_________________________________
Linux mailing list
[email protected]
http://lists.parinux.org/mailman/listinfo/linux
