0

Les nouveaux types de champs dans les formulaires HTML5

Bonjour les amis,

Aujourd’hui on s’attaque aux types de champs dans les formulaires HTML5. Vous allez voir c’est assez sympa à utiliser et vraiment pratique pour l’internaute.

Les nouveaux types de champs

Avec l’introduction d’HTML5 sont apparus de nouveaux types de champs : email, url, tel, search, date, time, datetime…

C’est quoi l’avantage d’utiliser ces nouveaux types me diriez-vous ? et bien clairement c’est pour la mobilité. Je ne vais pas entrer dans les détails mais pour que notre type de champ soit reconnu sur toutes les versions de navigateurs on va bien se prendre la tête alors on oublie !

Par contre, pour les mobiles, là je dis OUI. On surf de plus en plus sur nos smartphones et il arrive de devoir saisir des informations. Dans ce cas précis, si votre site à un formulaire il faut mettre en place ces types de champs !!

Pourquoi ? Et bien, par exemple, quand on doit saisir un numéro de téléphone et que le clavier texte apparait .. avouons le c’est assez énervant !

Par ici la démonstration  (Ouvrir depuis un smartphone ou Google Chrome) :

DEMONSTRATION (http://bit.ly/13lKmhK)

Aperçu depuis un mobile :

input_tel

Input de type tel

input_date

input de type date

Mise en place

<label>Email : </label>
<div>
	<input type="email" name="mail" id="input_mail" />
</div>

<label>Url : </label>
<div>
	<input type="url" name="url" id="input_url" value="http://" />
</div>

<label>Tel : </label>
<div>
	<input type="tel" name="telephone" id="input_telephone" />
</div>

<label>Search : </label>
<div>
	<input type="search" name="search" id="input_search" />
</div>

<label>Range : </label>
<div>
	<input type="range" name="range" id="input_range" />
</div>

<label>Date : </label>
<div>
	<input type="date" name="date" id="input_date" />
</div>

<label>Time : </label>
<div>
	<input type="time" name="time" id="input_time" />
</div>

<label>Month : </label>
<div>
	<input type="month" name="month" id="input_month" />
</div>

<label>Week : </label>
<div>
	<input type="week" name="week" id="input_week" />
</div>

<label>Color : </label>
<div>
	<input type="color" name="color" id="input_color" />
</div>

A propos de Thibault

Thibault a écrit 17 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.