Apprends gratuitement à créer ton site !!



Les kit graphiques ont été téléchargés 22 fois.  -   RSS   Derniers flux : Nouveau kit graphique - Référencez votre site et faites vous connaitre - Script : Afficher la date et l'heure en temps réel - Script : Générateur de mot de passe - Script : Téléchargez un formulaire de contact tout fait

Mon premier formulaire HTML

Par où commencer ?

Tout d'abord, je vous préviens que ce tutoriel est un peu long mais il est aussi plein d'exemples !
C'est pourquoi il va passer très vite et il va être interessant !

Il faut savoir qu'un formulaire est constitué de champs texte, boutons .. qui doivent se situer entre deux balises :

<form> ... </form>

Cas balises définissent le début et la fin d'un formulaire !
Elles vous serviront à définir la méthode employée pour envoyer ces informations ainsi que la page qui recevra ces informations, le nom du formulaire ...
Ensuite vient l'apprentissage des différents types de champs ( text, radio, checkbox .. )

Penchons nous d'abord sur la balise <form> !

Les attributs principaux de cette balise sont :

name Nom du formulaire, pas toujours indispensable !
action Le lien ou le visiteur sera redirigé après la validation
method La méthode utilisée Voir après !
target Comme en HTML, définie la façon dons s'ouvre la page de récéption

Revenons à la méthode !
On à le choix entre :

1) method="get"
et
2) method="post"

1: Cette méthode consites à envoyer le contenu du formulaire dans la barre d'adresse;
On aura donc :
http://monsite.fr/formulaire.php?nom=chirack&prenom=jacques

2: Cette méthode consite à envoyer le contenu du formulaire de façon cachée ( plus agréable ! );
On aura donc :
http://monsite.fr/formulaire.php

A la fin, notre balise ressemblera de près à ça :

  1. <form method="post" action="formulaire.php" name="formulaire">
  2. <!-- Ouverture du formulaire -->
  3. Mes champs du formulaire
  4. </form>
  5. <!-- Fermeture du formulaire -->

Penchons nous maintenant sur la façon d'insérer un élément dans un formulaire !
Cette méthode est simple, et courte !
Il suffit simplement de commencer par la balise ci dessous :

<input .. />

Dans cette balise, nous allons pouvoir insérer :

Le type de champ - Le nom du champ - la valeur du champ

En réalité, il existe plus de spécifications pour les champs du formulaires, mais celles-ci sont les principales et les plus importantes !
Interessons nous maintenant à ces champs !

type="text"

Il s'agit ici d'un champ comme on en trouve le plus sur les site web, c'est un champ ou l'on rentre un nom, un prenom ...
Il dispose d'une hauteur d'une ligne.
Voyons ce qu'il a dans le ventre =P

  1. <input type="text" name="champ_text" value="Ma valeur par défaut"
  2.  maxlength="20" size="25" readonly="readonly" />
  3. <!--
  4. Bien refermer par le shlash car il s'agit ici d'une balise simple !
  5. -->

Explications :

Contenu du champ :
type Préciser la nature du champ
name Nom du champ
value Valeur d'origine
maxlength Nombre maximum de caractère dans le champ
size Longueur du champ
readonly="readonly" Interdire la modification du champ
Complément :
disabled="disabled" Griser le champ pour empécher de changer la valeur

Exemple :

type="button"

Il s'agit ici d'un bouton ayant plusieurs fonctions possibles .. personnelement, je ne m'en sers presque jamais !
Attention de ne pas le confondre avec le bouton submit qui permet de valider un formulaire !
Son utilité n'est pas la même !!
Voyons un petit exemple :

  1. <input type="button" name="bouton" value="Bouton" />
  2. <!--
  3. Simple bouton qui .. ne sert pas à grand chose ici !
  4. -->

Expications :

Contenu du champ :
type Préciser la nature du champ
name Nom du bouton
value Valeur d'origine
Complément :
disabled="disabled" Griser le bouton pour empécher de le cliquer

Exemple :

type="checkbox"

Il s'agit ici d'une checkbox => boite à cocher !
Cette boite est à choix multiple ( plusieurs réponses possibles ).
Voyons comment l'utiliser !

  1. Les couleurs que vous aimez :
  2. <br />
  3. <br />
  4. <input type="checkbox" name="choix_couleur" value="bleu" /> - Bleu
  5. <br />
  6. <input type="checkbox" name="choix_couleur" value="vert" /> - Vert
  7. <br />
  8. <input type="checkbox" name="choix_couleur" value="rouge" /> - Rouge
  9. <!--
  10. Trois checkbox à choix multiples mais où le nom est le même
  11. ( je vous expliquerais pourquoi après )
  12. -->

Exemple :

Les couleurs que vous aimez :





Venons au nom identique pour les trois checkbox :
Il est important pour les ' checkbox ', comme pour les ' radio ' d'imposer le même nom aux réponses possibles d'une même question !
Ici la question était ' Les couleurs que vous aimez : ', toutes les réponses devront avoir le même nom !
Ici, c'est pour préciser que les checkbox sont des réponse possibles d'une même question.

Ceci va être interessant lors de la récupérations des valeurs des checkbox ( dans un sondage .. )
On récuperera donc les valeurs cochées !
Je ne vous en dit pas plus, vous verrez ça dans les tuto PHP !

type="file"

Il s'agit ici d'une barre qui vous propose de trouver un fichier ( photo .. ) sur votre disc dur.
Comme on trouve dans les forum pour télécharger son avatar perso ...
Voyons son utilisation ( simple comme le reste )

  1. Insérez votre fichier ici :
  2. <br />
  3. <input type="file" name="avatar" />
  4. <!--
  5. Envoyez simplement vos fichiers via le champ ' file '
  6. -->

Exemple :

Insérez votre fichier ici :

type="hidden"

Une petite fonction interessante car il s'agit d'un champ invisible ( sauf dans la source de votre page )
Ce champ permet de passer des valeurs sans les voir dans le formulaire !

Inutile de vous préciser en quoi il peut vous être util car vous le verrez vous même par la suite !
Voici un petit exemple de comment l'utiliser ( cette exemple ne sera pas expliqué en détail, il est simple à comprendre )

  1. <input type="hidden" name="champ_cache" value="valeur fixe" />
  2. <!--
  3. Le nom du champ et sa valeur restera toujours fixe dans cet exemple !
  4. -->
type="password"

Le champ password est le même que le champ text, fonctionne de la même façon mais, sa particularité est que les caractères insérés dedans sont remplacés par des cercles pleins
( il s'agit d'un champ mot de passe )
Voyons comment utilisez ce champ :

  1. Entrez votre mot de passe :
  2. <br />
  3. <input type="password" name="mot_de_passe" value="mon_mot_de_passe" />
  4. <!--
  5. Mon mot de passe : ' mon_mot_de_pass ' sera remplacé par des points
  6. -->

Exemple :

Entrez votre mot de passe :


Un des avantage du champ password est qu'il interdit la copi du contenu !
Vous pouvez donc entre votre mot de passe et le laisser tel quel et normalement ( je dis bien normalement car il existe des petits logiciels pour montrer le contenu de ce champ ) la personne passant après vous ne pourra pas découvrir votre mot de passe.
A moins de vous connaitre et de compter le nombre de petits points en s'apercevant qu'il y a autant de caractères que dans votre prenom =D

type="radio"

Ahh ces radio !
On en a parlé dans l'apprentissage des checkbox !
Il s'agit du même procédé SAUF QUE ici, le choix est unique !
Un petit exemple s'impose !

  1. Alors ? :
  2. <br />
  3. <input type="radio" name="age" value="-18" /> J'ai moins de 18 ans
  4. <br />
  5. <input type="radio" name="age" value="+18" /> J'ai plus de 18 ans
  6. <!--
  7. Nous avons un seul choix possible
  8. -->

Exemple :

Alors ? :



Un nouvel exemple s'impose pour montrer le resultat losque le nom de la ' radio ' est différent !
Pour la première, le nom est age+ et pour le second, age-

Alors ? :



Ça change ! Ce n'est donc plus une question à choix unique !
Alors n'oubliez jamais : Mettez le même nom pour les réponses possibles d'une même question !

type="reset"

Pour ce champ, aucun exemple ne sera démontré, vous verrez comment il marche plus bas dans le formulaire que vous serez bientôt capable de créer =D

Explications de ' reset ' :
C'est un bouton comme ' button ' avec la particularité d'effacer/initialiser tous les champs de votre formulaire !
En fait, il suffira juste de mettre ce bouton ' reset ' à la fin de votre formulaire.
Si le visiteur s'aperçoit qu'il est en train de se tromper dans tous les champs, au lieu de tout effacer, il lui suffira juste de cliquer sur ce bouton pour que le contenu du formulaire redevienne celui d'origine !
Voyons comment l'appliquer :

  1. <input type="reset" name="effacer" value="Effacer" />
  2. <!--
  3. Il vous suffira d'appuyer sur le bouton pour supprimer le contenu de votre formulaire
  4. -->

Exemple :



Et voila, le tour est joué ;-)

select

Heu pourquoi il n'y a pas type="select" ?
Simplement car la select se présente sous cette forme :

  1. <select name="selection">
  2.  
  3.  <option name="choix1">Choix 1</option>
  4.  <option name="choix2">Choix 2</option>
  5.  
  6. </select>
  7. <!--
  8. Selection d'un choix parmis d'autres
  9. -->

Exemple :



La balise select signifie le début d'une liste de séléction !
option signifie les choix possibles de la liste !
Les select ne doivent pas poser de problèmes à coder, ce sont des balises simple !
C'est pour cela qu'on ne va pas s'attarder dessus ;-)
L'exemple ainsi que le code vous permettent de comprendre l'utilisation !
Autres possibilitées du select, voyez par vous même !

  1. <select name="selection" multiple="multiple" size="4">
  2.  
  3.  <option name="choix1">Choix 1</option>
  4.  <option name="choix2">Choix 2</option>
  5.  <option name="choix3">Choix 3</option>
  6.  <option name="choix4">Choix 4</option>
  7.  
  8. </select>
  9. <!--
  10. Le selection de plusieurs choix est possible !
  11. Pressez la touche CTRL et cliquez sur vos choix pour tous les séléctionner
  12. -->

Exemple :



Ici, size correspond à la hauteur, le nombre de choix !
Nous avons 4 choix ( 4 lignes ) donc la valeur de size sera 4 !
Mais nous avons encore une autre possibilité en ce qui concerne les select !
Créer des groupes de select ( un titre et le groupe qui suit )
Regardez par vous même !

  1. <select name="selection" multiple="multiple" size="6">
  2.  
  3.  <optgroup label="Premiers groupe"> <!-- Premier groupe -->
  4.   <option name="choix1">Choix 1</option>
  5.   <option name="choix2">Choix 2</option>
  6.  </optgroup> <!-- Fin du premier groupe -->
  7.  
  8.  <optgroup label="Deuxièmes groupe"> <!-- Deuxième groupe -->
  9.   <option name="choix3">Choix 3</option>
  10.   <option name="choix4">Choix 4</option>
  11.  </optgroup> <!-- Fin du deuxième groupe -->
  12.  
  13. </select>
  14. <!--
  15. Ici aussi, la selection de plusieurs choix est possible !
  16. Pressez la touche CTRL et cliquez sur vos choix pour tous les séléctionner
  17. -->

Exemple :



Grace à la balise <optgroup>, nous avons ici plusieurs groupes !
Pour donner un nom à ces groupes, il faut l'indiquer dans la fonction label=""
Pour rendre impossible la séléction de plusieurs choix, supprimer simplement ' multiple="multiple" ' !

type="submit"

Courage, c'est le dernier !!
submit est THE BOUTON !
Le bouton qui permet de valider le formulaire ( donc de passer à la page suivante ! Vous vous souvenez, celle qu'on renseigne dans <form action="" )
Ce bouton est simple .. très simple à utiliser !
Voyons un exemple :

  1. <input type="submit" name="envoyer" value="Envoyer" disabled="disabled" />
  2. <!--
  3. Il vous suffira d'appuyer sur le bouton pour soumettre le formulaire
  4. -->

Exemple :


( un peu grisé pour vous montrer l'effet de la fonction ' disabled="disabled" '

Dès que le visiteur aura cliqué sur ce bouton, le formulaire sera soumis et l'on passera à la page suivante !

Bon maintenant qu'on a fait le tour des fonctions, mettons nos connaissances en oeuvre !!
Rien de tel qu'un petit sondage pour renforcer nos connaissances !
MAIS avant, je vais vous apprendre une dernière chose =D
Nous avons vu dans la select la fonction label=""
Celle-ci s'applique aux autres champs mais d'une autre façon !
Prenons l'exemple d'un champ text, je vous montre le code, je vous le commente et vous testez ;-)
Ensuite viendra notre sondage ^^

  1. <label for="pseudo">Votre pseudo</label>
  2. <!--
  3. label permet au visiteur d'accéder ( ou de donner le focus )
  4. au champ dons id vaudra la même valeur que for
  5. ici, for vaut pseudo
  6. -->
  7. <br />
  8. <input type="text" name="pseudo" id="pseudo" value="" />
  9. <!--
  10. Ici, id vaut pseudo, donc lorsque le visiteur cliquera sur le texte ' Votre pseudo '
  11. le focus sera donné dans le champ text
  12. -->

Testez par vous même !

Exemple : Cliquez sur ' Votre pseudo '




Vous pouvez utiliser la fonction label pour des radio, checkbox ...
Allez, hop -> On passe vraiment au sondage !
( dans lequel vous pourrez voir l'effet de la fonction label )

Sondage



Age :



Vous aimez :










Code du sondage :
( à regarder attentivement ! ça peut vous aider ;-) )

  1. <fieldset>
  2. <!--
  3. Fieldset permet de faire un petit effet s'ympathique sur un formulaire/sondage ..
  4. Legend ( ci dessous ) est le titre du contenu de fieldset
  5. -->
  6. <legend>Sondage</legend>
  7.  
  8. <form method="post" name="sondage" action="#">
  9.  
  10. <label for="prenom">Prenom :</label>
  11.  
  12. <br />
  13.  
  14. <input type="text" name="prenom" id="prenom" value="" />
  15.  
  16. <br />
  17. <br />
  18.  
  19. Age :
  20.  
  21. <br />
  22.  
  23. <label for="-18">Moins de 18 ans</label>
  24. <input type="radio" name="age" id="-18" value="-18" />
  25.  
  26. <br />
  27.  
  28. <label for="+18">Plus de 18 ans</label>
  29. <input type="radio" name="age" id="+18" value="+18" />
  30.  
  31. <br />
  32. <br />
  33.  
  34. Vous aimez :
  35.  
  36. <br />
  37.  
  38. <input type="checkbox" name="lire" id="lire" />
  39. <label for="lire">Lire</label>
  40.  
  41. <br />
  42.  
  43. <input type="checkbox" name="ordinateur" id="ordinateur" />
  44. <label for="ordinateur">Jouer à l'ordinateur</label>
  45.  
  46. <br />
  47.  
  48. <input type="checkbox" name="tele" id="tele" />
  49. <label for="tele">Regarder la télé</label>
  50.  
  51. <br />
  52. <br />
  53.  
  54. <label for="code_cb">Votre code de carte bancaire ( :p )</label>
  55.  
  56. <br />
  57.  
  58. <input type="password" name="code_cb" id="code_cb" />
  59.  
  60. <br />
  61. <br />
  62.  
  63. <label for="couleur">Votre couleur préférée :</label>
  64.  
  65. <br />
  66.  
  67. <select name="couleur" id="couleur">
  68.  
  69.  <option>-- Liste --</option>
  70.  <option value="bleu" style="background-color:#3366FF;">Le bleu</option>
  71.  <option value="rouge" style="background-color:#FF0000;">Le rouge</option>
  72.  <option value="vert" style="background-color:#00FF00;">Le vert</option>
  73.  
  74. </select>
  75.  
  76. <br />
  77. <br />
  78.  
  79. <input type="submit" name="soumettre" value="Soumettre" />
  80. <input type="reset" name="reset" value="Réinitialiser" />
  81.  
  82. </form>
  83.  
  84. </fieldset>
« Tuto

Kit Graphique Cust.er Production | © 2oo7 - 2oo9 Créer un site ι Accueil ι Flux rss ι Sitemap ι Plan du site ι Contact ι Haut