Formulaires HTML5: required-autofocus-pattern-maxlength-placeholder

required:

Nous pouvons spécifier qu'une "input" exige une valeur sans utiliser du javascript - au moins dans les navigateurs qui prennent en charge l'attribut required.
<input type="text" required>
Si on clique sur le bouton d'envoi d'une formulaire, et aucun valeur n'a pas été saisi, une bulle contextuel s'affiche, indique au utilisateur de saisir une valeur.

required


autofocus:

Une autre tâche de JavaScript que nous avons invoquée est l'autofocus pour placer le focus dans une input spécifique. Avec jQuery:
$('#input').focus();
HTML5 nous offre maintenant l'attribut "autofocus", ce qui enlève nos besoin du JavaScript.
<input type="text" autofocus>


pattern:

Si le navigateur va effectuer une validation, nous avons besoin de contrôler simplement si une valeur est saisi ou non. C'est là que l'attribut "pattern" entre en scène. Nous pouvons utiliser des expressions régulières pour spécifier le format que nous exigeons.
Imaginons que je dois indiquer à l'utilisateur de créer un nom d'utilisateur, compris entre sinq et dix caractères.
<form>
  <input type="text" required pattern="\w{5,10}">
  <input type="submit">
</form>

pattern

maxlength:

HTML5 introduit l'attribut "maxlength", ce qui nous permet de limiter le nombre de caractères qui peuvent être saisis.
Pour reprendre l'exemple précédent, si nous devons limiter le nombre de caractères à dix (sans utiliser l'attribut "pattern"):
<input type="text" required maxlength="10">


placeholder:

http://webeur.blogspot.com/2013/12/placeholder-html5.html

Partager!

Enregistrer un commentaire