Les formulaires

Définitions

Un formulaire HTML est un ensemble de composants qui permettent l'intéraction entre l'utilisateur et le site. Dans ce chapitre nous allons vous présenter les principaux composants des formulaires

La balise Form

La balise <form/> permet de spécifier un jeu données afin d'être traité par le serveur

Pour ce faire, nous allons utiliser un certain nombre d'attributs.

L'attribut Method

Il permet de spécifier la méthode de transmission des données

Il existe 2 méthodes de transmissions

La méthode GET, où les données seront passées via l'URL de la page par exemple : https://www.monsite.fr/page.php?val=1&val2=2
La méthode POST, les données sont transmise d'une page à l'autre à l'aide d'une variable interne du serveur.

<form METHOD="GET">
<-- les variables passeront via l'url-->
<form METHOD="POST">
<-- les variables via une variable du serveur $_POST-->

L'attribut action

Il permet de spécifier la page sur laquelle les données seront envoyés et traité

<form METHOD="GET" action="page.php">

L'attribut enctype

Spécifie comment les données seront encodées au moment de l'envoi de la requêtes

L'attribut accept

Lorsque la valeur de l'attribut method est post, cet attribut définit le type de fichier accepté.

L'attribut novalidate

Indique si le formulaire doit être validé au moment de sa soumission.

La balise INPUT

La balise <input/> offre à l'utilisateur un jeu de composant permetant de saisir des données.

Chacun de ses composants se définit avec l'attribut type

1. Les champs texte

C'est le composant de base, il permet de saisir toute les données.

<span>Exemple de champ texte</span>
<input type="text">

Exemple de champ texte

Propriété
Maxlength	Spécifie le nombre de caractères maximum pouvant être saisis
Readonly	Spécifie si le champ est accéssible ou non
Value	valeur du champ
placeholder	donne un exemple de données pouvant être saisie

2. Les champs masqués

Il s'agit d'un champ qui permet de saisir un mot de passe.

<span>Exemple de champ password</span>
<input type="password">

Exemple de champ password

Propriété
Maxlength	Spécifie le nombre de caractères maximum pouvant être saisis
Value	valeur du champ

3. Les boutons radios

Il s'agit d'un composant booléen. C'est à dire que si 2 boutons radio porte le même nom, seul un des deux sera actif.

<span>oui</span>
<input type="radio" value="yes" name="réponse">
<span>non</span>
<input type="radio" value="no" name="réponse">

oui non

Propriétés
name	Nom du champ(obligatoire)
Value	valeur du champ si l'utilisateur coche le champ
checked	Spécifie si le champ est coché par défaut

4. Les cases à cochés

Il s'agit d'un composant booléen, mais contrairement au boutons raidos, plusieurs checkbox avec le même nom peuvent être cochées

<span>choix 1</span>
<input type="checkbox" value="choix_1" name="réponse[]">
<span>choix 2</span>
<input type="checkbox" value="choix_2" name="réponse[]">

choix 1 choix 2

Propriétés
name	Nom du champ(obligatoire), si l'on ajoute des [], un tableau avec l'ensemble des éléments cochés seront envoyé
Value	valeur du champ si l'utilisateur coche le champ
checked	Spécifie si le champ est coché par défaut

5. les boutons

Avec le type text, il s'agit aussi d'un des composant principal. Il existe 3 types boutons

button, créer un bouton par défaut
submit, créer un bouton d'envoi de données
reset, créer un bouton qui réinitialise

<input type="button" value="bouton 1">
<input type="submit" value="envoyer">
<input type="reset" value="effacer">

Propriétés
name	Nom du champ qui sera envoyé sur le serveur
Value	valeur du bouton qui fera office de label

La balise SELECT

les balises <select/> permettent d'afficher une liste déroulante. Il envoi sur le serveur l'item qui a été séléctionné

Pour créer une liste déroulante, on ouvre des balise <select> et pour chaque item, on créer une balise option

<select name="liste_1">
- <option value="opt_1">option 1</option>
- <option value="opt_2">option 2</option>
- <option value="opt_3">option 3</option>
</select>

Notez que la valeur par défaut sera toujours la première de la liste quoi qu'il arrive. L'attribut selected permet d'obtenir un autre item séléctionné par défaut

<select name="liste_1">
- <option value="opt_1">option 1</option>
- <option value="opt_2" selected>option 2</option>
- <option value="opt_3">option 3</option>
</select>

La balise <textarea>

Elle permettent d'afficher une zone de texte plus impotante que la balise <input>

Propriétés
name	Nom du champ qui sera envoyé sur le serveur
cols	Nombre de caractères affichés sur une ligne
rows	Nombre de lignes
wrap	Determine la façon dont les retours à la ligne seront gérés Hard Soft Off

<textarea cols=10 rows=4 value="ici un trés long texte rédigé">ici un trés long texte rédigé</textarea>