Partout Les forums Les lexiques Les tutoriaux

Apprendre les langages du web c'est si simple avec nous

Les formulaires - XwZ

Les formulaires sont assez présents sur le net, pour différentes raisons, envoi de mail, de message sur un forum ou livre d'or. Il faut tout d'abord que vous sachiez que le html pur ne permet pas de traiter les informations postées via un formulaire. Pour les traiter il vous faudra apprendre le javascript ou PHP (Hypertext Preprocessor) voire même le PERL. Mais là n'est pas la question, parce que avant d'apprendre ces langages il faut connaître le html.
Donc revenons à nos moutons. Les balises principales d'un formulaire sont <form> et </form>.
La syntaxe est assez simple :

<form>
  contenue du formulaire (lire la suite)
</form>

Dans la balise form les attributs les plus fréquents sont action, name, id, method et class.
Explication :
-> action : cible la page sur la quelle on traitera les informations.

-> method : utilisait pour désigner comment les informations seront transmises :
---> GET : les informations sont visible dans la barre d'adresse.
---> POST : les information sont invisible.

-> name : nomme le formulaire.

ATTENTION, l'attribut name n'est pas valide pour les normes Xhtml (nous verrons plus tard se que cela ve dire)

-> id : sert identifiant

-> class : il sert toujours pour la mise en forme.

Et maintenant voyons les composants du formulaire.

Les composants pour le texte libre :
-> Champ texte à une ligne :
--> <input type="text" name="nom_du_champ" value="texte par defaut" maxlength="nombre_max_de_caractere" size="taille_du_champ(largeur)" class="classe_css" />

---> Remarques :
- Seul les attributs type et name sont obligatoire les autres sont facultatifs.
-> Champ texte multi lignes :
--><textarea name="nom_du_champ" cols="nombre_de_collone(1collone=environ_4_caractere)" rows="nombre_de_rang(1rang=environ_2lignes)" class="classe_css" readonly="readonly">texte par défaut</textarea>

---> Remarques :
- Seul les attributs rows, cols et name sont obligatoires.
- L'attribut readonly="readonly" met le champ en mode inactif, c'est à dire que le visiteur ne peut rien écrire dedans.

Composant de sélection :
-> Séléction par bouton (une seulle solution possible)
--> <input type="radio" name="nom_de_la_liste" class="classe_css" value="valeur_de_la_solution_correspondante" />

--->Remarques :
- Seul l'attirbut class est facultatif.
- Tout les boutons désignait la même liste de proposition doivent porter le même nom.

Exemple :

De quelle couleur est le cheval blanc d'Henri IV ?
<input type="radio" name="couleur" value="noir" /> Noir
<input type="radio" name="couleur" value="blanc" /> Blanc
<input type="radio" name="couleur" value="jaune" /> Jaune

-> Sélection par bouton (plusieur choix possible) :
---> <input type="checkbox" name="nom_de_la_proposition" value="valeur_de_la_proposition" class="classe_css" />

Remarques :
- Seul l'attribut class est facultatif.

-> Sélection par liste :
-->

<select name="nom_de_la_liste" class="classe_css" size="1">
   <option value="valeur_de_la_proposition1">texte de la proposition1</option>
   <option value="valeur_de_la_proposition2">texte de la proposition2</option>
</select>

Remarques :
- Vous pouvez mettre autant de proposition que vous voulez.
- Si vous voulez q"une proposition soit celle par défaut rajouter SELECTED dans la balise option ouvrante.
- Si vous voulez d'une liste de plusieurs lignes, remplacer le 1 de size par le nombre de ligne que vous voulez.

Les boutons d'action :
-> Bouton pour valider le formulaire (texte) :
--> <input type="submit" name="nom_du_bouton" value="texte du bouton" class="classe_css" />

Remarques :
- Seul l'attribut type est obligatoire.

-> Bouton pour valider le formulaire (image) :
--> <input type="image" name="nom_du_bouton" src="chemin_de_limage" class="classe_css" />

Remarques :
- Seul les attributs type et src sont obligatoires.

-> Bouton pour réinitialiser le formulaire :
--> <input type="reset" name="nom_du_bouton" value="texte du bouton" class="classe_css" />

Remarques :
- Seul l'attribut type est obligatoire.

Bouton sans conséquences :
--> <input type="button" name="nom_du_bouton" value="texte du bouton" class="classe_css" />

Remarques :
- Seul l'attribut type est obligatoire.
- Rien ne se passera lorsque vous cliquerez sur ce bouton.

Les champs invisible :
--> <input type="hidden" name="nom_du_champ" value="texte_du_champ" />

Remarques :
- Le champ et sont contenue ne sera visible que dans le code source de la page.

Les commentaires :