Formulaires HTML5
Posté le Tuesday 6 November 2012 | Catégories : HTML5
HTML5 apporte beaucoup de nouvelles fonctionnalités extrêmement utiles pour le développeur web, notamment en ce qui concerne les formulaires. Elles ne sont pas encore toutes supportées par tous les navigateurs, mais cela ne saurait tarder...
Nouveaux types
En plus des classiques type="text", "checkbox", "radio", "password", "file" et "submit", de nouveaux types sont apparus, parmi lesquels:
- type="email"
- type="url"
- type="number" permet de sélectionner un nombre. On peut également fixer les valeurs max, min et step.
- type="date" permet de sélectionner une date. La valeur prend le format YYY-MM-DD (2012-10-28).
- type="time" retourne une valeur hh:mm au format 24h (15:50).
- type="color" permet d'afficher automatiquement un sélecteur de couleur (color picker). La valeur retournée est le code hexadécimal de la couleur (#3f48cc). Actuellement ce type n'est malheureusement supporté que par Opera.
Ces nouveaux types présentent plusieurs avantages:
- Sur un IPhone ou un autre smartphone, le clavier s'adapte automatiquement au contenu à saisir (email, url, number);
- Ils permettent de valider automatiquement le type des données saisies (voir plus loin);
- date, time et color permettent (permettront, quand ils seront supportés par tous les navigateurs) d'afficher un widget sans devoir utiliser de code Javascript.
Nouveaux attributs
HTML5 introduit également de nouveaux attributs.
autofocus
Permet de sélectionner automatiquement l'élément
<input type="text" autofous >
placeholder
Exemple de valeur, affichée en gris clair
<input type="text" placeholder="Thibault">
required
Utilisé pour la validation (voir ci-dessous)
<input type="text" required >
autocomplete
Permet de désactiver la fonction autocomplete du navigateur
<input type="text" autocomplete="off">
form
Permet d'indiquer à quel(s) formulaire(s) appartient l'élément, si celui-ci ne se trouve pas entre les balises form.
<input type="text" form="id1 id2 id3">
pattern
Permet d'utiliser une expression régulière pour valider l'élément. L'attribut "title" doit être utilisé pour indiquer à l'utilisateur le type de valeur attendue.
<input type="text" name="country" pattern="[A-Za-z]{3}" title="Code pays en 3 lettres">
Validation
Comme expliqué ci-dessus, les nouveaux types HTML5, ainsi que les attributs "required" et "pattern" peuvent être utilisés pour valider automatiquement les données sur le navigateur. Si les données ne sont pas correctes, le navigateur ajoute automatiquement l'attribut "invalid" à l'élément. Il ne reste donc plus qu'à utiliser du code CSS pour mettre en forme le formulaire.
<input type="text" placeholder="Nom" required>
<input type="email" placeholder="Email">
input {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border:1px solid #ccc;
font-size:20px;
width:300px;
padding: 2px;
min-height:30px;
display:block;
margin-bottom:15px;
margin-top:5px;
outline: none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
}
:invalid {
border-color: #E88;
-webkit-box-shadow: 0 0 5px rgba(255, 0, 0, 0.8);
-moz-box-shadow: 0 0 5px rbba(255,0,0,0.8);
-o-box-shadow: 0 0 5px rbba(255,0,0,0.8);
-ms-box-shadow: 0 0 5px rbba(255,0,0,0.8);
box-shadow: 0 0 5px rgba(255, 0, 0, 0.8);
}
:required {
background: url('form.required.png') no-repeat transparent center right;
}
Attention, cette validation ne remplace naturellement pas la validation des données du côté serveur!
