Explications du formulaire exemple de contact

Visionner le formulaire exemple

Script complet de validation

<script Language="JavaScript">
<!--
//Voici le script de validation des champs du formulaire...
function formverif(theForm)
{
//Validation de la liste à puces
var radioSelected = false;
for (i = 0; i < theForm.TypeMessage.length; i++)
{
if (theForm.TypeMessage[i].checked)
radioSelected = true;
}
if (!radioSelected)
{
alert("Sélectionnez une des options \"TypeMessage\".");
return (false);
}
//Validation de la boîte d'option
if (theForm.Options.selectedIndex < 0)
{
alert("Sélectionnez une des options \"Options\".");
theForm.Options.focus();
return (false);
}

if (theForm.Options.selectedIndex == 0)
{
alert("La première option \"Options\" n'est pas une sélection valide. Choisissez une des autres options.");
theForm.Options.focus();
return (false);
}
//Validation du champ "NomUtilisateur"
if (theForm.NomUtilisateur.value == "")
{
alert("Tapez une valeur pour le champ \"NomUtilisateur\".");
theForm.NomUtilisateur.focus();
return (false);
}

if (theForm.NomUtilisateur.value.length < 2)
{
alert("Tapez au moins 2 caractères dans le champ \"NomUtilisateur\".");
theForm.NomUtilisateur.focus();
return (false);
}

if (theForm.NomUtilisateur.value.length > 256)
{
alert("Tapez au plus 256 caractères dans le champ \"NomUtilisateur\".");
theForm.NomUtilisateur.focus();
return (false);
}
//Validation du champ "EmailUtilisateur"
if (theForm.EmailUtilisateur.value == "")
{
alert("Tapez une valeur pour le champ \"EmailUtilisateur\".");
theForm.EmailUtilisateur.focus();
return (false);
}

if (theForm.EmailUtilisateur.value.length < 2)
{
alert("Tapez au moins 2 caractères dans le champ \"EmailUtilisateur\".");
theForm.EmailUtilisateur.focus();
return (false);
}

if (theForm.EmailUtilisateur.value.length > 256)
{
alert("Tapez au plus 256 caractères dans le champ \"EmailUtilisateur\".");
theForm.EmailUtilisateur.focus();
return (false);
}
return (true);
}
//-->
</script>

Code HTML du formulaire 

Ici, j'ai choisi le mode "mailform" pour l'envoi du formulaire...

Code HTML

<FORM name="Formulaire" ACTION="mailto:email" METHOD="post" enctype="text/plain" onsubmit="return formverif(this)">
<INPUT TYPE=hidden NAME="Origine" value="!!! FORMULAIRE !!!">!!! FORMULAIRE !!!">

Liste à puces

Informations Aide Suggestion Remerciements

Code HTML

<p><i>Quel type de message voulez-vous envoyer ?</i></p>
<dl compact>
<dd><input type="radio" name="TypeMessage"TypeMessage" value="infos">infos">Informations
<input type="radio" name="TypeMessage"TypeMessage" value="online">online">Aide <input type="radio" name="TypeMessage"TypeMessage" value="Suggestion">Suggestion">Suggestion
<input type="radio" name="TypeMessage"TypeMessage" value="merci">merci">Remerciements</dd>
</dl>

Partie de script de validation

Aucune option n'est selectionnée au départ (dans cet exemple), de cette manière, le visiteur devra faire un choix et cette vérification sera faite par le script...

Visionner la partie de script correspondante !

Boîte d'options

Choisissez une option s.v.p. Entreprise Produits Fournitures Employé (Autre) Autre :

Code HTML

<p><font color="#800000"><i>Quel est l'objet de votre envoi&nbsp;?</i></font></p>
<!-- Boîte d'options -->
<dl>
<dd><select name="Options"Options" size="1">
<option>Choisissez une option s.v.p.</option>
<option>Entreprise</option>
<option>Produits</option>
<option>Fournitures</option>
<option>Employé</option>
<option>(Autre)</option>
</select> Autre : <input type="text" size="26" maxlength="256" name="AutreObjet"></dd>
</dl>

Partie de script de validation

Le choix qui apparaît par défaut est "Choisissez une option s.v.p." et le script vérifie si c'est cette option qui est choisie : dans ce cas, il alerte le visiteur que cette option n'est pas valide...

Visionner la partie de script correspondante !

Champ texte pour le contenu du message

Code HTML

<p><font color="#800000"><i>Tapez vos commentaires dans l'espace ci-dessous :</i></font></p>
<!-- Champ texte pour le contenu du message -->
<dl>
<dd><textarea name="Commentaires"Commentaires" rows="5" cols="50"></textarea></dd>
</dl>
<p><font color="#800000"><i>Indiquez vos coordonnées :</i></font></p>
<dl>
<dd>

Ici, rien de particulier car on considère que le visiteur va y inscrire un commentaire...

Tableau avec les champs "NomUtilisateur", "EmailUtilisateur", "TelephoneUtilisateur" et "TelecopieUtilisateur"

Code HTML

<p><i>Indiquez vos coordonnées :</i></p>
<dl>
<dd>
<table>
<tr>
Champ "NomUtilisateur" : visionner la partie de script correspondant...
<td>Nom
<td><input type="text" size="35" maxlength="256" name="NomUtilisateur">
</tr>
<tr>
Champ "EmailUtilisateur" : visionner la partie de script correspondant...
<td>Adresse de messagerie
<td><input type="text" size="35" maxlength="256" name="EmailUtilisateur">
</tr>
<tr>
<!-- Champ "TelephoneUtilisateur" -->
<td>Téléphone
<td><input type="text" size="35" maxlength="256" name="TelephoneUtilisateur">
</tr>
<tr>
<!-- Champ "TelecopieUtilisateur" -->
<td>Télécopie
<td><input type="text" size="35" maxlength="256" name="TelecopieUtilisateur">
</tr>
</table>
</dd>
</dl>
<dl>

Case à cocher

Code HTML

<dd><input type="checkbox" name="DemandeDeContact" value="ContactRequested">
<font color="#800000">Veuillez me contacter dès que possible...</font></dd>
</dl>

Boutons de validation du formulaire

Code HTML

<p><input type="submit" value="Envoyer les informations"> <input type="reset" value="Effacer le contenu du formulaire"></p>
</FORM>

Si vous désirez télécharger ce formulaire exemple...