Les formulaires
Les deux principales balises : <form> et <input>
Un formulaire minimaliste : une balise <form> et une balise <input> de type texte. Le formulaire ci-dessous est inutilisable...
On peut valider le formulaire en tapant entrée au clavier, mais généralement on a un bouton pour valider... là encore il s'agit d'un input de type submit. On peut aussi, dans la foulée, rajouter le bouton pour annuler le formulaire ie remettre l'ensemble des champs à leurs valeurs initiales encore un input cette fois de type reset :
...car on ne saura pas comment manipuler la donnée côté serveur. Il faut rajouter un attribut name, du côté du serveur en PHP par exemple on aura accès à un tableau associatif : $_POST[valeur_du_name] sera la valeur saisie par l'utilisateur dans cette zone de texte (le POST sera un GET pour un formulaire en mode get). Mais il manque encore des choses... comment l'utilisateur sait-il ce qu'il doit saisir ?
Rajoutons un label... On fait le lien entre le champs de saisie et le label par un attribut for dans le label et un id dans le input, les deux attributs ayant la même valeur et souvent la même valeur que le name.
<textarea>
Pour une saise un peu plus conséquente, comme par exemple un commentaire ou le texte d'un mail on utilise un champ textearea :
une multitude de types pour <input>
password
email, url, tel
color, date
number, range
search
On peut remplacer le type submit par un type image :
Les cases à cocher
Les zones d'options
Les menus déroulants : les balises <select> et <option>
Il s'agit en fait d'une alternative de présentation aux zones d'options. En effet le principe est le même : faire un choix unique parmi un ensemble de possibilités. On choisit souvent cette présentation lorsque le nombre de possibilités est élevé.