Liste de tous les objets de formulaire en HTML

Liste des objets reconnus par tous les navigateurs récents, avec le code source, et comment les utiliser.
On verra aussi comment transmettre les données de formulaire à des pages différentes ou des scripts sur le serveur.

Le formulaire lui-même est créé par la balise form comme cela est détaillé dans l'introduction aux formulaires:

<form name="myform" id="myform" action="page" onSubmit="return fun()">
...objets...
</form>

L'attribut name ou id permettent d'accéder par script à son contenu. Il est préférable d'utiliser les deux attributs avec le même identifieur, par souci de compatibilité.

L'attribut action indique la page à laquelle on envoie les données du formulaire. Si cet attribut est vide, c'est la page qui contient le formulaire qui sera rechargée avec en paramètre ces données.

L'attribut onSubmit permet d'associer une fonction de test sur le formulaire. Si la fonction returne false, les données de formulaire ne sont pas envoyées, on reste sur la même page.

Objet
Apparence
 Code
Bouton simple 
<input type="button" value="Envoyer" onclick="myfunction()">

S'il s'agit d'un bouton simple et non pas d'un bouton d'envoi, il faut lui associer du code JavaScript à exécuter avec l'évènement onclick.
On peut le personnaliser en lui associant un style CSS.

Champ de texte 
<input type="text" name="text1" value="texte par défaut">

Pour entrer un texte. Comme on le voit, le champ peut être pré-rempli grâce à l'attribut value.
Les autres attributs sont:

  • type="password" pour un champ au contenu caché.
  • size="" largeur du champ de texte.
  • maxlength="" nombre maximal de caractères.
Zone de texte 
<textarea name="textarea">contenu</textarea>

Champ de texte sur plusieurs lignes. La différence avec l'objet précédent est que le contenu initial est placé entre les balises de début et de fin, et non pas dans un attribut.
Mot de passe 
<input type="password" name="pass" value="12345">
Champ caché   
<input type="hidden" value="code">

Il permet d'ajouter des données aux valeurs passées par le formulaire, qui soient définies par un script et non entrées par l'utilisateur.

Case à cocher 
<input type="checkbox" name="cb" value="true" checked>
  • L'attribut checked permet de cocher initialement la case.

Un article est dédié à l'étude de l'utilisation des cases à cocher.

Bouton radio 

<input type="radio" name="radiox" value="radio1">
Groupe radio 

<label>Choix 1
<input type="radio" name="radio1" value="radio1">
</label><br>
<label>Choix 2
<input type="radio" name="radio1" value="radio2">
</label>

Un bouton radio fonctionne comme une case à cocher. Mais un groupe de boutons radios permet un choix alternatif: cocher une case décoche les autres.

Oui Non

<input type="radio" name="identifieur" value="true" checked>Oui
<input type="radio" name="identifieur" value="false">Non

Pour que les boutons soient alternatifs, il faut donner le même nom à tous.

Menu 
<select name="select">
  <option>cerise</option>
  <option>orange</option>
  <option>pomme</option>
</select>

La balise select et les balises internes options permettent de construire un menu qui peut avoir la forme d'une liste déroulante ou d'une liste statique.

  • L'attribut size spécifie le nombre de lignes affichées. Si ce nombre est inférieur au nombre d'options, une barre de défilement verticale apparaît.
  • L'attribut multiple permet les sélection simultanées multiples.
  • L'attribut d'option selected indique quel élément est initialement choisi.
Liste 
<select name="select2" size="3">
  <option>cerise</option>
  <option>orange</option>
  <option>pomme</option>
</select>
Fichier 
<input type="file" name="file">
Champ image 
<input type="image"  src="xul.png">
  • L'attribut src indique l'URL de l'image.

La différence avec la balise img est la prise en compte parmi les données de formulaire passées à une autre page.

Explorateur local

HTML dispose d'une fonction de sélection de fichier avec le type "file" qui combine un champ de texte et un bouton.

<input type="file"  value="">

Le fichier choisi est assigné à l'attribut value de l'objet.
Le contenu du fichier local est inclut avec les données du formulaire et envoyé avec elles.

Bouton d'envoi 
<input type="submit" name="Submit" value="Envoyer">

Il envoir les données du formulaire.

  • L'attribut value définit le libellé à afficher sur le bouton.

Lorsqu'on appuie sur ce bouton, le fichier défini par l'attribut action du formulaire est chargé à la place de la page courante et les données du formulaire lui sont passés en paramètres.

Si le champ action est vide, la page courante est rechargée avec en paramètres les données de formulaire.

Il est possible d'avoir plusieurs boutons d'envoi et de modifier dynamiquement le contenu de action en JavaScript pour charger des pages différentes. Dans ce cas on associera un évènement onclick au bouton d'envoi.

Les formulaires en HTML peuvent être étendus avec des widgets en CSS ou JavaScript conçus par le webmaster. Des exemples:

Voir aussi

© 2009-2012 Xul.fr