Formulaires en (X)HTML



1.1. La balise form

Les formulaires débutent par la balise <form>...</form>, cette balise contient trois attributs :

Si les données sont envoyées au format get, elles seront ajoutées à l'URL fournie dans l'attribut action.

Ce formulaire ressemble sans style CSS à cela.

Voici le même formulaire avec un style (CSS) : formulaire avec style.

1.2. Les éléments de base

Les différents éléments de base qui composent les formulaires sont les suivants :

Nous allons passer en revue ces différents éléments afin de voir comment les utiliser.

1.3. Les labels

Le label permet de définir du texte associé à un élément de saisie d'information.

Il dispose d'un attribut for qui spécifie à quel élément le label est associé au travers d'un id ce qui autorise le focus sur l'élément de saisie en cliquant sur le label : "nom (label avec for)".




    jsfiddle

1.4. Les champs input

Les champs input permettent de saisir de l'information textuelle en précisant éventuellement un format de saisie.

On doit définir les attibuts suivants pour ce genre de champs :

L'attribut type peut prendre plusieurs valeurs :






  



19







  

1.5. Les textarea

Le textarea permet de définir une zone de saisie de texte sur plusieurs lignes en spécifiant le nombre de lignes (attribut rows) et le nombre de colonnes (attribut cols).



  

Par défaut le textarea est redimensionnable, on peut empêcher son redimensionnement en utilisant CSS.

On peut également empêcher la saisie en utilisant l'attribut readonly.



  

1.6. Cases à cocher

On peut créer des cases à cocher de deux types :

jeux vidéos alcool drogue cigarette

  

marié célibataire veuf

  

L'attribut checked permet de sélectionner une option par défaut.

1.7. Les listes déroulantes

Les listes déroulantes ou combobox sont introduites par l'élément select.



  

1.8. Les boutons

Les boutons permettent de créer des actions. Par défaut on utilise les input de type submit ou reset. Mais il est possible d'utiliser la balise <button></button> afin de créer un bouton.

On peut associer une action (code Javascript) à un bouton grâce aux attributs :

  

1.9. la balise fieldset

La balise <fieldset> permet de regrouper plusieurs champs dans le but de mieux structurer et embellir les formulaires :

Etat civil


Adresse



  

1.10. Attribut hidden

L'attribut hidden (sans valeur) permet de cacher un champ





  

1.11. Attributs size maxlength

L'attribut size permet de fixer la taille d'affichage d'un champ alors que l'attribut maxlength définit le nombre maximum de caractères que l'on pourra saisir :

Etat civil


Adresse