1. Introduction
2. Langage HTML

2.1. Un premier document

2.2. Présentation

2.3. Structure générale

2.4. Les métas

2.5. Principaux Eléments

2.6. Liens Hypertextes

2.7. Images

2.8. Tableaux

2.9. Formulaires

2.10. Cadres

2.11. Valeurs des attributs

2.12. Caractères spéciaux

2.13. Recommandations

3. Feuilles de style
4. Scripts et évènements
5. Références
6. Travail Pratique






Langage HTML / Formulaires

<form action method enctype name target accept accept-charset style lang title >
 <input type="text" name value size maxlength class style lang title>
 <input type="password" name value size maxlength class style lang title>
 <input type="radio" name value checked class style lang title>
 <input type="checkbox" name value checked class style lang title>
 <input type="file" name value accept class style lang title>
 <input type="hidden" name value class style lang title>
 <input type="button" name value class style lang title>
 <input type="reset" value class style lang title>
 <input type="submit" value class style lang title>
 <input type="image" src name value class style lang title>
 <select name multiple size class style lang title >
  <option value width selected class style title lang >...</option>
  <option>...
 </select>
 <textarea name cols rows wrap class style lang title >...</textarea>
</form>

Voir l'exemple

Formulaire

Un formulaire est défini par l'élément form. Intégré dans un tableau, les balises d'ouverture et de fermeture peuvent être placées entre les balises table et tr pour une meilleure présentation.

  • action : URL de l'application qui traite le formulaire
  • method : Méthode HTTP : get (les paramètres du formulaire apparaissent dans l'URL) ou post (les paramètres sont cachés)
  • name : nom donné au formulaire afin de l'identifier dans un script ou une application
  • enctype : spécification du type des donées transmises
  • accept : liste des types de données supportés par l'application
  • accept-charset : liste des jeux de caractères supportés par l'application

input type="text"

<input type="text" name="fname" value="toto" size="20" maxlength="255">

input type="password"

<input type="password" name="pass" value="toto" size="20" maxlength="255">

input type="radio"

s'abonner se désabonner

<input type="radio" name="answer" value="1" checked>
<input type="radio" name="answer" value="0">

input type="checkbox"

newsletter conditions

<input type="checkbox" name="news" checked>
<input type="checkbox" name="cond">

input type="file"

Ce type de champs permet de transmettre un fichier au serveur. Pour l'utiliser, la balise form doit comporter l'attribut enctype="multipart/form-data".

  • value : permettrait de personnaliser le titre du bouton
  • accept : liste des types de données supportés par l'application

<input type="file" name="cv">

input type="hidden"

Ce type de champs permet de transmettre au serveur, des paramètres non editable par l'internaute. Généralement, ce sont des paramètres internes à l'application qui traite le formulaire.

input type="button"

Ce type de champs permet d'intégrer un élément graphique bouton dans le formulaire. Il est à utiliser conjointement avec les évènements et les scripts.

<form name="toto"><input type="button" value="Initialiser" onclick="javascript:if (confirm( 'Etes-vous sur de vouloir initialiser ce formulaire ?' )) { document.form['toto'].reset; };"></form>

input type="reset"

Ce type de champs permet d'initialiser le formulaire.

<input type="reset" value="Initialiser">

input type="submit"

Ce type de champs permet d'envoyer le formulaire au serveur.

<input type="submit" value="Valider">

input type="image"

Ce type de champs permet lui aussi d'envoyer le formulaire au serveur. Dans ce cas, au lieu d'avoir un bouton classique, nous aurons une image de notre choix.

<input type="image" src="./images/valider.gif">