24 Novembre 2017 à 10:03:27

Auteur Sujet: Faire un formulaire HTML, CSS, PHP (1 sur 3)  (Lu 125035 fois)

Damien

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Faire un formulaire HTML, CSS, PHP (1 sur 3)
« le: 30 Octobre 2006 à 09:06:18 »
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)
« Modifié: 29 Janvier 2008 à 11:23:10 par damien »
Cordialement,
Damien

Tutoriels informatique

Thierry

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 1846
  • Points gagnés: 10
    • Voir le profil
Re : Faire un formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #1 le: 30 Octobre 2006 à 09:10:41 »
j'avais déjà lu en exclusivité  :), mais je vais reprendre ça tranquillement

merci à toi

athos

  • Nouveau membre
  • *
  • Messages: 7
  • Points gagnés: 0
    • Voir le profil
Re : Faire un formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #2 le: 10 Novembre 2006 à 23:35:39 »
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

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Re : Faire un formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #3 le: 11 Novembre 2006 à 21:04:05 »
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.
Cordialement,
Damien

Tutoriels informatique

athos

  • Nouveau membre
  • *
  • Messages: 7
  • Points gagnés: 0
    • Voir le profil
Re : Faire un formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #4 le: 12 Novembre 2006 à 13:19:26 »
merci pour la reponse mon navigateur est ie6

athos

  • Nouveau membre
  • *
  • Messages: 7
  • Points gagnés: 0
    • Voir le profil
Re : Faire un formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #5 le: 13 Novembre 2006 à 11:30:41 »
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

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é
<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

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Re : Faire un formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #6 le: 13 Novembre 2006 à 11:42:48 »
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 :

Citer
    <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

Citer
input.suivantes {
  margin-left:1em;
}
Cordialement,
Damien

Tutoriels informatique

athos

  • Nouveau membre
  • *
  • Messages: 7
  • Points gagnés: 0
    • Voir le profil
Re : Faire un formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #7 le: 13 Novembre 2006 à 12:07:31 »
ok merci ça fonctionne à merveille

athos

  • Nouveau membre
  • *
  • Messages: 7
  • Points gagnés: 0
    • Voir le profil
Re : Faire un formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #8 le: 13 Novembre 2006 à 12:50:46 »
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
/* 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

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Re : Faire un formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #9 le: 13 Novembre 2006 à 13:34:12 »
Dans le #buttons, il faut juste rajouter un
Citer
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.
Cordialement,
Damien

Tutoriels informatique

athos

  • Nouveau membre
  • *
  • Messages: 7
  • Points gagnés: 0
    • Voir le profil
Re : Faire un formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #10 le: 13 Novembre 2006 à 13:47:31 »
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

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Re : Faire un formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #11 le: 13 Novembre 2006 à 18:31:12 »
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).

Citer
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 :)
Cordialement,
Damien

Tutoriels informatique

athos

  • Nouveau membre
  • *
  • Messages: 7
  • Points gagnés: 0
    • Voir le profil
Re : Faire un formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #12 le: 13 Novembre 2006 à 19:18:06 »
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

  • Espoir
  • ***
  • Messages: 101
  • Points gagnés: 1
    • Voir le profil
formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #13 le: 24 Novembre 2006 à 13:11:11 »
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
--

Flore

Damien

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Re : Faire un formulaire HTML, CSS, PHP (1 sur 3)
« Réponse #14 le: 24 Novembre 2006 à 14:14:55 »
Bonjour,

Il te manque juste la clé primaire :

Citer
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 ;
Cordialement,
Damien

Tutoriels informatique