| layout | title | addons | |||||||
|---|---|---|---|---|---|---|---|---|---|
lesson |
Formulaires HTML |
|
POST /user HTTP/1.1 Host: www.captcha.net ... first=Alan& last=Turing& sex=M& email=alan@gchq.gov.uk www.captcha.net
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>
{: #post-source}
<style> #post-img, #post-form, #post-source { display: inline-block; vertical-align: top; } #post-form, #post-source { font-size: 12pt; margin: 0; } # post-form { width: 300px; } </style>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, ...
Text area: <textarea> Du texte très long </textarea>
<textarea name="texte_long">
Du texte très long
</textarea>
Selection list: MySQL injection XSS CSRF
<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>.
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.
- Le guide MDN des formulaires.
- La référence W3Schools (en anglais).