Hier encore, lorsque l’on voulait qu’un champ se vide automatiquement lorsque l’on clique dessus, un passage obligé par le Java Script était nécessaire. Aujourd’hui le html5 nous propose une véritable alternative !
Ici nous avons un formulaire basique pour une interface de connexion :
<form >
<p class="username">
<input type="text" name="username" value="utilisateur" />
</p>
<p class="passwd">
<input type="password" name="passwd" value="Mot de passe" />
</p>
<p class="checkbox">
<label><input type="checkbox"/> Se souvenir de moi</label>
</p>
<p class="login">
<input type="submit" value="Connexion" />
</p>
</form>
Comme vous constatez, les « value » nous permettent d’afficher les textes "utilisateur" et "mot de passe". Mais si ils s’affichent bien, on est condamné à devoir les effacer manuellement. Mais voilà notre sauveur, j’ai nommé HTML5 !
<form >
<p>
<input type="text" name="username" placeholder="utilisateur" />
</p>
<p>
<input type="password" name="passwd" placeholder="Mot de passe" />
</p>
<p>
<label><input type="checkbox"/> Se souvenir de moi</label>
</p>
<p>
<input type="submit" value="Connexion" />
</p>
</form>
Il suffit donc de remplacer nos bon vieux « value » par « placeholder » et le tour est joué ! Et là vous vous dites : Non ? C’est trop simple pour être vrais !? Mais non, je vous assure que cela fonctionne. Après comme vous vous en doutez, si votre navigateur ne supporte pas le html5, il ne s’affichera strictement rien à l’intérieur du champ !