Faire un formulaire HTML, CSS, PHP (1 sur 3)

[damien]

Dans ce tutorial, nous allons aborder la création de formulaires (x)html afin que vous soyiez capable de créer un formulaire pour les pages de votre site web non seulement, mais aussi que ce formulaire respecte complètement les standards (x)html et utilise un fichier de style CSS pour la mise en forme. D'ailleurs nous allons compliquer un peu la mise en forme CSS pour que vous puissiez, je l'espère, apprendre des choses intéressantes en CSS.
Nous verrons ensuite comment traiter les données envoyées par ce formulaire, à titre d'exemple pour différents cas de figure, car les données récupérées dans un formulaire d'une page web peuvent être traitées de nombreuses façon suivant ce que l'on souhaite faire.

Voir le tutorial (partie 1/3) : Faire un formulaire HTML, CSS, PHP (1 sur 3)
La partie 2/3 : Faire un formulaire HTML, CSS, PHP (2 sur 3)
La partie 3/3 : Faire un formulaire PHP, HTML, CSS (3 sur 3)

[Thierry]

j'avais déjà lu en exclusivité  , mais je vais reprendre ça tranquillement

merci à toi

[athos]

pour commencer merci à damien pour son tuto qui "déchire bien"

aprés avoir tout lu et presque tout compris je me suis lancé et quelle a été ma déception que :
#civilite input + input {
ne fonctionne pas ce qui à comme conséquence que M. et Mlle sont sur une ligne et que Mme sur une seconde.
J'ai essayé de modifier la largeur du fieldset cela fonctionne mais j'aimerais comprendre pourquoi le input+input ne fonctionne pas.
Un seconde question si je peux me permettre ?
j'aimerais envoyer le formulaire par mail avec la fonction mail de php. je suis pas sur d'y arriver mais je vais essayer. En revanche comment faire pour que quand l'utilisateur appui sur le bouton envoyer, une page verit.html résumant les saisies s'ouvre permettant ainsi à l'utilisateur de vérifier ses saisies. Bien sur un autre bouton présent sur cette page permettrait lui d'envoyer le formulaire.
Il y a pas mal de temps j'avais tenté un truc du genre pour m'amusersans réussir en effet le mail partait bien mais il était vide des saisies.
pour être plus clair
form.html ==>verif.html (si ok)==> envoi du mail avec une page du genre envoi.php

même si cela fait beaucoup cela m'arrangerait bien d'avoir une réponse car ce n'est plus pour m'amuser mais pour travailler
vincent

[damien]

Quel navigateur Internet utilises tu ?
Il est possible que le input + input ne soit pas compris par certains navigateurs trop anciens.

Pour la deuxième question, il suffit que tu récupéres le contenu des champs dans un fichier verif.php. Le contenu des champs remplis se récupére par les variables $_POST[] comme expliqué dans la partie 3/3 du tuto.

[athos]

merci pour la reponse mon navigateur est ie6

[athos]

pour faire suite je vous envoi le code du formulaire et du css car input + input ne fonctionne pas et j'ai testé pas mal de truc en ce qui concerne l'envoi c'est ok

Code:

p.titre {
  background:#DED983;
  color:#345071;
  padding:.2em .3em;
  font-size:1.2em;
  border:2px outset #DED983;
  position:relative;
  margin-bottom:-1em;
  width:10em;
  margin-left:1em;
  margin-top:1em;
}
fieldset {
  border:none;
  margin-bottom:1em;
  width:24em;
  padding-top:1.5em;
}
select {
  margin-left:9em;
  margin-bottom:0;
}
/* fieldset coordonnees */
fieldset#coordonnees {
  background:#A4D8EE;
  border:outset #A4D8EE;
padding-bottom:1em;
}
#coordonnees label {
  position:absolute;
  font-size:90%;
  padding-top:.2em;
  left:20px;
}
#coordonnees input {
  margin-left:9em;
  line-height:1.4em;
  margin-bottom:.2em;
}
#civilite {
  font-size:90%;
}
#civilite input {
  margin-left:9em;
}
#civilite input + input {
  margin-left:1em;
}
/* fieldset message */
fieldset#message {
  background:#9DF2CE;
  border:outset #9DF2CE;
padding-bottom:1em;
}
/* zone de texte du message */
textarea {
  font:.8em "Trebuchet MS", Verdana, sans-serif;
  width:29em;
  padding:.2em;
}
/* les boutons submit et reset */
input[type="submit"], input[type="reset"] {
  background:#DED983;
  font:1.2em "Trebuchet MS", Verdana, sans-serif;
  color:#345071;
}
p#buttons {
  text-align:center;
}

le formulaire non finalisé

Code:

<link href="formulaire.css" rel="stylesheet" type="text/css" />

<form method="post" action="traitement.php">


<p class="titre">Coordonnées</p>

<fieldset id="coordonnees">
  <p id="civilite"><label>Civilité : </label>
    <input type="radio" name="civilite" value="M.">M.
    <input type="radio" name="civilite" value="Mlle" />Mlle
    <input type="radio" name="civilite" value="Mme" />Mme
  </p>
  <label>Nom : </label>
    <input type="text" name="nom" size="30" /><br />
  <label>Adresse : </label>
    <input type="text" name="adresse" size="30" /><br />
  <label>Code postal : </label>
    <input type="text" name="codepostal" size="30" /><br />
  <label>Ville : </label>
    <input type="text" name="ville" size="30" /><br />
  <label>Votre situation : </label>
    <select name="situation">
      <option value="null">____________________</option>
      <option value="de">Demandeur d'emploi</option>
      <option value="sal">Salarié</option>
      <option value="etu">Etufiant</option>
      <option value="pro">Professionnel</option>
    </select>
<br />
<label>Votre niveau : </label>
    <select name="niveau">
      <option value="null">____________________</option>
      <option value="de">Niveau 1 (ingénieur)</option>
      <option value="2">Niveau 2 (maitrise)</option>
      <option value="3">Niveau 3 (bac+2)</option>
      <option value="4">Niveau 4 (bac)</option>
      <option value="5">Niveau 5 (CAP-BEP)</option>
    </select>
<br />
<label>Votre demande  : </label>
    <select name="demande">
      <option value="null">____________________</option>
      <option value="re">Un renseignement</option>
      <option value="ren">Un rendez-vous</option>
      <option value="au">Autres</option>
     </select>
 
</fieldset>

<p class="titre">Message</p>

<fieldset id="message">
  <textarea name="comments" rows="5" cols="40"></textarea>
</fieldset>

<p id="buttons">
  <input type="submit" value="Envoyer" />
  <input type="reset" value="Recommencer" />
</p>
</form>

pour info
naigateur ie6
os win xp pro sp2
merci

[damien]

Bonjour,

D'accord merci pour le code. J'ai regardé et bien que ça fonctionne très sous firefox, le IE6 ne prend pas en charger les "input + input" ainsi que les écritures de type "input[type="submit"]", "input[type="reset"] ".
C'est comme ça et il faut faire avec, il est certainement trop ancien pour prendre en compte la technologie. Par contre la nouvelle version IE7 les prend désormais en compte sans problème.

Donc pour contourner le problème, pour que cela fonctionne sous IE6, il va falloir mettre des "class" sur les input concernés. Exemple :

    <input type="radio" name="civilite" value="M.">M.
    <input type="radio" name="civilite" value="Mlle" class="suivantes" />Mlle
    <input type="radio" name="civilite" value="Mme" class="suivantes" />Mme

input.suivantes {
  margin-left:1em;
}

[athos]

ok merci ça fonctionne à merveille

[athos]

dernière ptite question car il y a bien des incompatibilité entre ie et ffox comment je peux centrer horizontalement et verticalement la totalité sachant que j'ai rajouté pour le bloc bouton

Code:

/* les boutons submit et reset */
#buttons {
 background:#DED983;
 font:1.2em "Arial", Verdana, sans-serif;
 color:#345071;
 width:20em;
 border:none;
 padding-top:.5em;
 padding-bottom:.5em;
 border:outset #ded983;
}

je trouve cela plus beau

[damien]

Dans le #buttons, il faut juste rajouter un

text-align:center;

pour centrer ce qui se trouve à l'intérieur (donc les deux boutons)
Il y aussi une propriété vertical-align qui existe mais inutile à mon avis dans ce cas, car j'ai testé sur les deux navigateurs et le centrage vertical se fait naturellement.

[athos]

dac o dac
mais il s'agissait de centrer le formulaire en fait
thank you

autre question j'ai des tutos sur office ou photoshop je peux faire comment pour lrs poster

[damien]

Ah oops, je n'avais pas compris ça désolé
Pour centrer tout le formulaire, il va falloir le mettre dans un div qui englobe le tout et voir le sujet Dreamweaver 8 : centrer un calque en CSS

Ou alors s'il n'y pas besoin d'autre style particulier, juste mettre un <div align="center"> </div> qui englobe tout le formulaire de la même façon, mais je ne sais plus si ça passe en xml strict ça (mais ça ne doit pas te concerner).

autre question j'ai des tutos sur office ou photoshop je peux faire comment pour lrs poster

Que tu as fait toi même ? Envoi moi un mail sur webmaster@forum-aide.com et on verra ça sans souci

[athos]

ok ca je l'avais testé cela centre tout sauf les labels
dans ton exellent tuto les zones de listes ne sont pas obligatoires moi je veux forcer les utilisateur à faire des choix. Lors du traitement un message d'erreur  précise que ce n'est pas le bon choix
ex :
dans zone de liste situation obliger l'utilisateur a selectionner un champs
de même dans les options l'obliger à cocher ou M; ou Mlle ou Mme
si j'suis un peu lourd 'ingue désolé le php j'débute

[Flore]

Bonjour,

Perso c'est à la création de la table que je bloc !!

j'ai ceci, et pourtant je suis sur d'avoir suivi le tutox !! :

requête SQL:

CREATE TABLE `formulaire` (
`id` INT( 11 ) AUTO_INCREMENT ,
`civilite` VARCHAR( 5 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`nom` VARCHAR( 150 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`adresse` VARCHAR( 255 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`codepostal` VARCHAR( 10 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`ville` VARCHAR( 150 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`pays` VARCHAR( 150 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`interets` VARCHAR( 255 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`message` TEXT CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`date` DATETIME
) TYPE = MYISAM

 MySQL a répondu:Documentation
#1075 - Incorrect table definition; there can be only one auto column and it must be defined as a key

[damien]

Bonjour,

Il te manque juste la clé primaire :

CREATE TABLE `formulaire` (
`id` INT( 11 ) AUTO_INCREMENT ,
`civilite` VARCHAR( 5 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`nom` VARCHAR( 150 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`adresse` VARCHAR( 255 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`codepostal` VARCHAR( 10 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`ville` VARCHAR( 150 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`pays` VARCHAR( 150 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`interets` VARCHAR( 255 ) CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`message` TEXT CHARACTER SET latin1 COLLATE latin1_swedish_ci,
`date` DATETIME,
  PRIMARY KEY  (`id`)
) TYPE = MYISAM ;