1. Acceuil
  2. Cours
  3. Cours HTML
  4. Les formulaires

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

  1. 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
  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>
Partager