Les différents éléments de base qui composent les formulaires sont les suivants :
les champs de saisie de texte comme les input (sur une ligne) ou les textarea sur plusieurs lignes
les boutons (button) ou les champs input de typesubmit
les boites ou listes déroulantes (combo box) appelées select
les cases à cocher (input) uniques (de typeradio button) ou multiples (de typecheckbox)
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)".
<formname="label1"method="post"action=""><labelfor="nom">nom (label avec for)</label><inputtype="text"name="nom"value=""id="nom"/><br/><label>prénom (label sans for)</label><inputtype="text"name="prenom"value=""id="prenom"/><br/><br/><label> </label><inputtype="submit"value="Submit"onclick="return _label1();"/></form>
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 :
name qui correspond au nom du champ qui sera réutilisé par le serveur pour extraire l'information soumise
value la valeur initiale du champ, ce champ est bien entendu optionnel
type qui correspond au type de champ
L'attribut type peut prendre plusieurs valeurs :
text : qui signifie qu'on saisit du texte
password : qui cache le texte saisi et donc lié à la saisie des mots de passe
reset : pour une remise à zéro des champs
submit : qui est équivalent à un bouton sur lequel on clique afin d'envoyer les informations du formulaire à un serveur
file et image pour télécharger (upload) des fichiers
checkbox ou radio : pour créer des case à cocher (voir ci-après)
avec HTML5 ont été rajoutés : date, email, url, tel, number, ...
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.
<formname="textarea2"method="post"action=""><label>information</label><textareaname="info"readonlyrows="5"cols="30"id="info2">texte initial non modifiable</textarea><br/><br/><label> </label><inputtype="submit"value="Submit"onclick="return _textarea2();"/></form>
1.6. Cases à cocher
On peut créer des cases à cocher de deux types :
soit on peut cocher plusieurs cases, dans ce cas on utilise un champ input de type checkbox
soit on ne peut cocher qu'une seule case et on utilise un champ input de typeradio mais il faut également donner le même nom à chaque champ, seules leurs valeurs permettront de les distinguer
Les boutons permettent de créer des actions. Par défaut on utilise les input de typesubmit 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 :
onclick : clique sur un bouton
onsubmit pour les formulaires, avant de soumettre le formulaire on vérifie que les champs sont remplis correctement
<head><script>
function _button1() {
alert("coucou");
return false;
}
</script></head><body><pclass="center"><buttononclick="return _button1();"> dire coucou </button></p></body>
1.9. la balise fieldset
La balise <fieldset> permet de regrouper plusieurs champs dans le but de mieux structurer et embellir les formulaires :
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 :