Formulaire de contact

Le but est de voir diverses méthodes CSS pour construire le formulaire puis d'appliquer les contrôles de validation en javascript et en PHP, d'ajouter un minimum de sécurité et enfin de montrer diverses formes de captcha.

Nous allons travailler sur un formulaire de contact simple c'est à dire :

3 zones : L'adresse mail, le sujet, le message.
2 boutons : Envoyer et annuler.

La mise en page des formulaires de contact n'est pas différente de celles des autres formulaires. Il existe plusieurs méthodes, j'en montrerai 3 (float, inlin-block et table-cell).

Le code xhtml (pour float ou inline-block):


<form  name='formulaire'id="leform">
    <fieldset>
        <legend<Formulaire de contact</legend>

        <label for="email">Votre email:</label>
        <input type="text" id="email" name="email"  />

        <label for="sujet">Sujet:</label>
        <input type="text" id="sujet" name="sujet"/>

        <label for="msg">Votre message</label>
        <textarea id="msg" name="msg"></textarea>

        <p id="buttons">
              <input type="reset" value="Annuler"/>
              <input type="submit" id="envoye" name="envoye" value="Envoyer"/>
        </p>

    </fieldset>

</form>

Le css peut être fait avec des float ou des inline-bock (pour plus de précisions sur les inline-block voir ICI)

Le code css avec des float:

 
#leform
{
	width: 50%;
        margin : 0 auto;
        background:#CBD888;
}


/* fieldset , legend */
#leform fieldset
{
	margin-bottom: 10px;
	border: #000 1px solid;
        padding-top:1.5em;
}


#leform fieldset legend
{
	padding: 0 10px;
	font-size: 1.2em;
	color: #000;
        background:#CCC;
}

/* Label */
#leform label
{
	display: block;
	width: 20%;
	float: left;            /* içi on met float left */
	padding-right: 1%;
	text-align: right;
	letter-spacing: 1px;
}

#leform input{
  width: 70%;
  margin-bottom:.5em;
}

#leform textarea{
   width: 70%;
   height: 250px;
  margin-bottom:.8em;
}

/* boutons */
#leform input[type="submit"]
{
	border: #DDEEFF 1px solid;
	width: 27%;
}

#leform input[type="submit"]:hover
{
	background-color: #66CC33;
	cursor: pointer;
}

#leform input[type="reset"]
{
	border: #DDEEFF 1px solid;
	width: 27%;
}

#leform input[type="reset"]:hover
{
	background-color: #E6484D;
	cursor: pointer;
}

#leform p#buttons {
  text-align:center;
}

Le code css avec des inline-block:

#leform
{
	width: 50%;
        margin : 0 auto;
        background:#CBD888;
}



/* fieldset , legend */
#leform fieldset
{
	margin-bottom: 10px;
	border: #000 1px solid;
        padding-top:1.5em;
}


#leform fieldset legend
{
	padding: 0 10px;
	font-size: 1.2em;
	color: #000;
        background:#CCC;
}

/* Label */
#leform label
{
        display:-moz-inline-stack;   /* pour ff2 */
        display:inline-block;        /* inline-block */
        vertical-align: top;         /* pour aligner les labels en haut */
	width: 20%;
	padding-right: 1%;
	text-align: right;
	letter-spacing: 1px;
}

#leform input{
  width: 70%;
  margin-bottom:.5em;
}

#leform textarea{
   width: 70%;
   height: 250px;
  margin-bottom:.8em;
}


/* boutons */
#leform input[type="submit"]
{
	border: #DDEEFF 1px solid;
	width: 27%;
}

#leform input[type="submit"]:hover
{
	background-color: #66CC33;
	cursor: pointer;
}

#leform input[type="reset"]
{
	border: #DDEEFF 1px solid;
	width: 27%;
}

#leform input[type="reset"]:hover
{
	background-color: #E6484D;
	cursor: pointer;
}

#leform p#buttons {
  text-align:center;
}

Pour travailler avec les table-cell la methode est un peu différente puisqu'il faut déclarer les lignes du tableau (pour plus de précisions sur les table-cell voir ICI)

Le code xhtml pour le table-cell :

 

<form  name='formulaire'id="leForm">
    <fieldset>
        <legend>Formulaire de contact</legend>

        <p class="ligne">
            <label for="email">Votre email :</label>
            <input type="text" id="email" name="email"  />
        </p>

        <p class="ligne">
            <label for="sujet">Sujet :</label>
            <input type="text" id="sujet" name="sujet"/>
        </p>

        <p class="ligne">
            <label for="msg">Votre message :</label>
            <textarea id="msg" name="msg"></textarea>
        </p>

        <p id="buttons">
            <input type="reset" value="Annuler"/>
            <input type="submit" id="envoye" name="envoye" value="Envoyer"/>
        </p>

    </fieldset>

</form>

Le code css avec des table-cell :

#leform
{
	width: 50%;
        margin : 0 auto;
        background:#CBD888;
}

/* fieldset , legend */
#leform fieldset
{
        display:table;           /* on déclare la table içi */
	margin-bottom: 10px;
	border: #000 1px solid;
}

#leform fieldset legend
{
	padding: 0 10px;
	font-size: 1.2em;
	color: #000;
        background:#CCC;
}

#leform p.ligne {
        display:table-row;         /* les lignes du tableau */
        width:100%;
}

/* Label */
#leform label
{
        display:table-cell;          /* les colonnes du tableau */ 
        /display:inline;             /* pour IE */
        /zoom : 1;                   /* pour IE */
        vertical-align: top;         /* pour aligner les labels en haut */
	width: 20%;
	padding-right: 1%;
	text-align: right;
	letter-spacing: 1px;
}


#leform input{
        display:table-cell;          /* les colonnes du tableau */ 
        /display:inline;             /* pour IE */
        /zoom : 1;                   /* pour IE */
        width: 70%;
        margin-bottom:.5em;
}

#leform textarea{
        display:table-cell;          /* les colonnes du tableau */ 
        /display:inline;             /* pour IE */
        /zoom : 1;                   /* pour IE */
        width: 70%;
        height: 250px;
        margin-bottom:.8em;
}


/* boutons */
#leform input[type="submit"]
{
	border: #DDEEFF 1px solid;
	width: 27%;
}

#leform input[type="submit"]:hover
{
	background-color: #66CC33;
	cursor: pointer;
}

#leform input[type="reset"]
{
	border: #DDEEFF 1px solid;
	width: 27%;
}

#leform input[type="reset"]:hover
{
	background-color: #E6484D;
	cursor: pointer;
}

#leform p#buttons {
  text-align:center;
}

Voilà pour la mise en forme, il reste maintenant à traiter et à valider les données entrées par l'utilisateur et à étudier les différents systémes pour empécher les robots d'envoyer des spams.

Traitement

Captcha

visiteurs

Contact