HTML Formulaires Cheatsheet
Formulaires en HTML5 : Exemple
<form action="cible.php" method="get">
...</form>
- La balise form doit encapsuler tous les champs du formuaire.
- L’attribut action définit la page cible du formulaire. Si laissé vide, ça envoie vers la page elle-même.
- L’attribut method définit la forme d’envoi du formulaire,
get
envoie les informations via l’URL (HTTP Get).post
envoie les informations via HTTP Post.
- L’attribut enctype définit l’encodage. Pour l’envoie de fichiers, utilisez
enctype="multipart/form-data"
, avec la méthodeget
.
Champs de formulaires « classiques »
<input type="text" name="prenom"> |
|
<textarea name="commentaire" rows="7" cols="22"> </textarea> |
dd |
<input type="password" name="pass"> |
|
<input type="checkbox" name="voiture"> |
|
<input type="radio" name="transport" value="vélo"> <input type="radio" name="transport" value="bus"> <input type="radio" name="transport" value="autre"> |
|
<select name="chats"> <option value="1">Un chat</option> <option value="2">Deux chats</option> <option value="plus">Plus que deux chats</option> </select> |
|
<input type="hidden" name="id" value="1"> |
(volontairement invisible) |
Exemple complet simple
<form action="cible.php" method="get"> Nom : <input type="text" name="nom"> <input type="submit" value="Soumettre"> </form> |
Nom : |
- A la soumission du formulaire, envoi vers la page cible.php
- L’attribut
name
sera le nom du paramètre GET, et aura la valeurnom
. - Donc, sur la page
cible.php
, on peut récupérer ce paramètre avec$_GET['nom']
, qui aura la valeurnom
. - Avec la méthode
get
, les paramètres sont visibles dans l’URL.
Regroupement et étiquetage des champs (<fieldset>
, <legend>
, <label>
)
Exemple renvoyant vers la page cible.php
avec la méthode post
, en passant les paramètres des deux champs texte nom
et prenom
:
<form action="cible.php" method="post">
<fieldset>
<legend>Identité</legend>
<label for="nom">Nom:</label>
<input type="text" name="nom" id="nom">
<label for="prenom">Prénom:</label>
<input type="text" name="prenom" id="prenom">
<input type="submit" value="Soumettre">
</fieldset>
</form>
Avec la propriété for
au label, c’est l’identifiant id
qui est visé. Lorsqu’on clique sur le label, le champ correspondant devient actif.
Nouveaux types de champs <input .. >
HTML5
<input type="email">
<input type="url">
<input type="color">
<input type="date">
<input type="datetime">
<input type="datetime-local">
…
<input type="number" min="0" max="10" value="4" step="2">
<input type="range" min="0" max="10" value="4" step="2">
<input type="search">
<input type="tel">
<input type="time">
<input type="month">
…
Nouveaux attributs de champs HTML5 (pour <input ..>
)
Exemple : <input type="url" required="required" placeholder="https://www.u-bordeaux.fr">
required |
required="required" , le champ doit être non-vide pour que le formulaire soit validé |
placeholder |
p.ex. placeholder="email ici" , affiche une valeur indicative dans le champ. |
autocomplete |
autocomplete="on" ou autocomplete="off" , avec l’historique du navigateur |
autofocus |
autofocus="autofocus" , à l’ouverture de la page, cela donne le focus au champ |
pattern |
p.ex. pattern="[A-Za-z0-9]" , expression régulière du format du champs. |
min,max,step |
concerne number, range, date, datetime, datetime-local, month, week, time |
…. | …. |
Exemples pour feuille de style CSS pour champs et pseudo-classes
input {border:3px solid #cccccc;
font-size:20px;
border-radius:5px;
}:invalid {
inputbackground-color: #f0dddd;
}