Un tuto ma foi plutôt bien foutu, pour vous aider dans la création d’un joli formulaire de contact en html5 et css3.
Coté html5, on trouve l’utilisation de l’attribut placeholder sur les champs du formulaire. Le contenu de cet attribut apparaitra dans le champ du formulaire. Lorsque l’internaute cliquera dessus, le texte disparaitra automatiquement. Attention cependant avec l’utilisation de cet attribut, qui n’est supporté que par Safari, Chrome et dans la version 4 de Firefox
<input type="email" id="email" placeholder="Enter your email address" />Coté css3, les attribut utilisés sont les dégradés sur le background (-moz-linear-gradient et -webkit-gradient).
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25303C), color-stop(100%,#728EAA)); /* webkit */
Les ombrages sur les blocs sont également de la partie : -moz-box-shadow et webkit-box-shadow de la manière suivante :
-webkit-box-shadow: 0px 0px 8px #444;
Voilà de quoi vous donner quelques idées pour vos formulaires (contact, sondage ou autres...) Je vous laisse découvrir ça par vous même :Formulaire html5 et css3
Restez un peu plus longtemps, et prenez le temps de lire aussi :
3 Messages de forum
-
Tres cool ce formulaire :) Perso j’aurai ajouté un message plus recherché pour incité au contact !
Voir en ligne : http://www.21janvier.com/creation-l...
-
petite question, html 5 c’est compatible sur tous les navigateurs ?
Voir en ligne : http://www.wiloooo.net
-
Salut Wiloooo,
pour ce qui est de l’implémentation d’html5 dans les navigateurs, tu peux jeter un coup d’oeil sur ce site : http://html5readiness.com/
Mars
A Propos
Je suis un concepteur et développeur web à Grenoble. Je développe essentiellement avec le CMS Spip. Actuellement en contrat chez Territorial, je continue ma veille technologique, et vous fais partager ce que je trouve utile et pratique.
