Formulaires HTML

Formulaires

First name:
Last name:
Gender: Male Female
e-mail:

<form method="POST"
      action="http://www.captcha.net/user">
  First name:
  <input type="text" name="first">
  <br>
  Last name:
  <input type="text" name="last">
  <br>
  Gender: Male
  <input type="radio" name="sex" value="M">
  Female
  <input type="radio" name="sex" value="F">
  <br>
  e-mail:
  <input type="email" name="email">
  <br>
  <input type="submit" value="Subscribe">
</form>

Contrôles des formulaires

La balise <input> représente presque tous les contrôles. Le choix se fait à travers l’attribut type.

Champs de texte :

<input type="text" name="clef">

Boutons radio: A B

<input type="radio" name="choice" value="choice-1">A
<input type="radio" name="choice" value="choice-2">B

Checkbox: C D

<input type="checkbox" name="check1" value="check-1">C
<input type="checkbox" name="check2" value="check-2">D

Password:

<input type="password" name="mot_de_passe">

Fichier:

<input type="file" name="fichier">

Email: (depuis HTML5, vérifie qu’il y a un @)

<input type="email" name="courriel">

Submit: pour envoyer une requête

<input type="submit" value="Send data">

Button: pour interaction avec les scripts

<input type="button" value="Click me!">

Image: envoie les coordonnées du click

<input type="image" src="like.svg" alt="Like!">

D’autres nouveaux types sont définis dans HTML5 (pour la plus part, pas encore bien supportés): date, time, number, range, color, tel, url, …

Autres contrôles

Text area: Du texte très long

<textarea name="texte_long">
Du texte très long
</textarea>

Selection list:

<select name="liste">
  <option value="M">MySQL injection</option>
  <option value="X">XSS</option>
  <option value="C">CSRF</option>
</select>

Nouveaux (et mal supportés) en HTML5 : <datalist>, <keygen> et <output>.

Validation des formulaires

Attribut required: prévient si pas rempli

<input type="text" required>

Attribut pattern: compare l’entrée à une regexp

<input type="text" pattern="[0-9]{6}">

Attribut placeholder: donne une suggestion

<input type="text" placeholder="tapez quelque chose">

Attribut novalidate: désactive toutes les validations précédentes.

Plus d’autres contrôles standards (par ex., urls, emails, etc.) et des attributs liés aux nombres, aux intervalles, aux fichiers, etc.

Des validations plus compliquées doivent être faites en Javascript.

Références

Le guide MDN des formulaires.
La référence W3Schools (en anglais).