Placeholder HTML5

Parfois, il est très utile d'indiquer aux utilisateurs ce qu'ils doivent saisir. Traditionnellement, JavaScript doit être utilisé pour obtenir cet effet. Ci-dessous un exemple utilisons HTML et JQuery:

HTML:

<input type="text" id="email-input" value="Enter votre email" />

JQuery:

var emailInput = $('#email-input'),
emailDefault = emailInput.val();
emailInput.on({
  focus: function() {
    var $this = $(this);
    if($this.val() == 'Enter votre email') $this.val('');
  },

  blur: function() {
    var $this = $(this);
    if($this.val() == '') $this.val(emailDefault);
  }
});

Lorsque l'utilisateur clique sur l'entrée, la valeur disparut immédiatement, et lorsqu'il clique en sortie la valeur de défaut s'affiche à nouveau.

C'est très long n'est ce pas :). Avec HTML5, nous pouvons utiliser l'attribut "placeholder" pour réaliser cet effet exact :

HTML5:

<input type="text" id="email-input" placeholder="Enter votre email">