Formulaires (Forms)

​

Toute page HTML peut être enrichie de formulaires interactifs, qui invitent les visiteurs à donner certaines informations pour que vous les utilisiez d'une certaine façon: saisir du texte, sélectionner des options, valider avec un bouton, etc.

​

Cette année, on va se contenter à utiliser les formulaires d'une façon plutôt statique. L'utilisateur va rentrer les informations demandées et ensuite vous les envoyer automatiquement dans votre boîte de courriels.

​

Qu'est-ce qu'on peut avoir dans un formulaire?

​

Éléments du formulaire

​

Tout d'abord, il faut savoir que chaque formulaire commence avec la balise <form>. Voici un exemple:

​

​

​

On va voir les éléments le plus souvent utilisés:

​

• <input>: l'un des éléments les plus utilisés. Cette balise a un attribut très important, type. Selon les différentes valeur de cet attribut, input représente différentes boîtes (date, boîte pour choisir une couleur, champ de mot de passe, bouton, radio bouton, checkbox, etc). Pour voir toutes les options, visitez le site            https://www.w3schools.com/html/html_form_input_types.asp

​

​

​

​

​

• <label> : définit une étiquette pour les éléments d'un formulaire. L'attribut for de la balise <label> doit être égal à l'attribut id de l'élément  <input> pour les lier ensemble.

• <select>: définit une liste déroulante avec des options différentes. Il va avec la balise option qui est utilisée pour représenter les différents choix dans la liste. Voir dans le code-exemple comment l'utiliser.

• <option>:  définit une option dans une liste (<select>) qui peut être sélectionnée;

​

​

​

​

​

​

​

• <textarea>: définit un champ de saisie multiligne (une zone de texte);

​

​

​

​

​

​

​

​

• Champs de type "radio" buttons: on les utilise si on veut faire choisir seulement une option de celles qui sont proposées.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

• <button>:définit un bouton cliquable. Il doit avoir un attribut très important onclick qui spécifie l'action à accomplir quand on clique sur le bouton. Quand on va apprendre Javascript, on pourra l'utiliser d'une façon plus poussée, mais maintenant on va se contenter à faire afficher un message grâce à ce code:

 

<button onclick="alert('Salut tout le monde!')" value="Mon bouton">.

​​

DEVOIR: Produire la page suivante avec la plus grande ressemblance possible!

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

!!!! Pour votre devoir vous devriez, probablement, faire une recherche sur la balise <fieldset>

​

​

Pour voir tous les éléments possibles d'un formulaire, visitez ce site: https://www.w3schools.com/html/html_form_elements.asp

​

​