Vous êtes sur la page 1sur 6

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript | bbxdesign

21/01/2013

blog

bbxdesign V E S T
V G E U S R

portfolio
I G E S D ' U N C S S

T U

contact propos

24
M A R

T u o t o f r e : i r l m u a lr i e 1 0 0 % C S S 3 s a n s m ia g e s t a n s J a v a S c r p it
Je vous invite aller lire le tutoriel complet sur le CSS que jai crit. Aprs avoir expliqu comment raliser un bon formulaire HTML, pourquoi ne pas en raliser un uniquement en CSS3 ?
P

Follow @bbx

recherche...

TL

UA

TI

OR F RE U I

NE

Comprendre le line-height Retour Firefox Colonnes, marges et nth-child en CSS 3 Les interfaces tactiles ne le sont pas

Les proprits CSS3 utilises ici sont les suivantes :

border-radius pour les bords arrondis box-shadow pour les ombres des blocs content pour rajouter du contenu au HTML gradient pour les dgrads des blocs rgba pour avoir des fonds transparents text-shadow pour les ombres du texte
Jutilise aussi les pseudo-classes CSS3 suivantes :

:after pour rajouter du texte HTML la suite dun lment :last-child pour slectionner le dernier enfant dun lment :target pour slctionner un lment lorsquune #ancre est utilise dans ladresse
Dernire fonctionnalit utilise : le slecteur avanc [type=text] pour slectionner un lment selon la valeur dun de ses attributs HTML. Bien sr, toutes ces nouveauts CSS3 ne marchent pas partout, mais elles fonctionnent trs bien sous Firefox et Safari/Chrome (Webkit).

De nouvelles intractions intressantes


Sans parler du graphisme (qui contient des dgrads, des ombres, des bords arrondis.. en CSS3) et que vous pouvez voir si vous avez un (bon) navigateur compatible, il y a quelques intractions possibles grce CSS3.

Pseudo-classe :last-child
Lorsquon peut viter de rajouter des classes dans le HTML, il est prfrable de le faire. Par
http://blog.bbxdesign.com/2010/03/24/tutoriel-formulaire-css3-sans-image-sans-javascript/ 1/6

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript | bbxdesign exemple, la pseudo-classe :last-child permet de slectionner le dernier enfant dun lment. En

21/01/2013

loccurrence, je slectionne avec form p:last-child le dernier paragraphe et je lui enlve son margin-bottom. Ca permet dviter dutiliser une classe last.

Pseudo-classe :after et la proprit content


Si vous survolez un paragraphe, le label passe en bleu et une flche est rajoute la suite du label.

Pseudo-classe :target
Lutilisation de la pseudo-classe :target se fait en utilisation les ancres HTML. Par exemple, en cliquant sur le lien #options, a fait apparatre le bloc id=options. Et si je soumets le formulaire, je navigue vers #finish et un bloc vert apparat tout en bas. (NB : jai remplac linput submit par un simple lien, histoire de pouvoir afficher le bloc #finish. Le code normal est comment dans le HTML si vous le voulez). Enfin, si je clique sur annuler, je navigue vers #start et a repart au dbut.

Nhsitez pas utiliser mes codes HTML et CSS.


Follow

allRGB : des images avec 16 millions de couleurs

La vrit sur les sondages

42 commentaires
Alban
L 2E 4 M A 1 R0 : 4 4

1
2/6

Je ne connaissais pas du tout la proprit content. Merci


http://blog.bbxdesign.com/2010/03/24/tutoriel-formulaire-css3-sans-image-sans-javascript/

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript | bbxdesign

21/01/2013

lems
L 2E 4 M A 1 R3 : 5 0

Et a marche sous iE 6 ? pardon (ctait la blague du mercredi) Sinon cest sympa ce que lon peut faire mais attention ne pas finir, comme une certaine poque (pas si lointaine), avec des reflets web12.46 et des ombres portes dans tous les sens.

Jeremy
L 2E 4 M A 1 R4 : 1 2

Sous IE6, cest pas crade. Y a juste pas dombres, darrondis et de dgrads. Mais ces proprits CSS3 cest surtout pour embellir ton design facilement, tout en le gardant fonctionnel pour les vieux navigateurs.

Vincent Valentin
L 2E 4 M A 1 R4 : 2 1

Hello, Cest volontaire de ne pas avoir reli les labels aux champs ? Ou juste un petit oubli ?

mzwygart
L 2E 4 M A 1 R4 : 4 2

5 6
M A 1 R5 : 0 0

Tu devrais attacher tes labels aux champs, car si on clique dessus, il ne se passe rien.

lems
L 2E 4

Surtout au niveau poids de page a doit tre facile du simple au double. En terme de chargement de page les navigateurs ne peineront plus charger des images en guise de contour ou dombres portes, cest vrai que a cest un norme plus.

Jeremy
L 2E 4 M A 1 R5 : 2 2

@Vincent Valentin et @mzwygart : en fait, javais li les labels aux champs au dbut (avec for=xxx, id=xxx et name=xxx) mais en validant le formulaire, a renvoyait vers une 404. Mais tant donn que jai supprim linput submit et mis un simple lien la place, il est possible que lerreur ne se reproduise plus. Je checke a.

css3start.com, une homepage moderne | Hi, I'm Victor and this is my blog
L 1E 2 A P 1 R6 : 4 8

[...] dcid de relever un petit dfi aprs avoir lu larticle Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript de lexcellent blog de Jeremy Thomas. Jai trouv sympathique lide de crer le [...]

Liens et actus
L 1E 3 A P 2 R2 : 4 6

9 10

[...] formulaire 100% CSS 3 et sans images ni [...]

Tr3nT
L 1E 2 J U0 L5 : 1 2

petite question jarrive pas le placer correctement les lment ce divise et du coups je nest plus mon formulaire en entier passe voir mon site tu verras moins que dici quelques heures je trouve la solution.

Tr3nT
L 1E 2 J U0 L5 : 3 6

11 12

pas la peine jai compris =)))

http://blog.bbxdesign.com/2010/03/24/tutoriel-formulaire-css3-sans-image-sans-javascript/

3/6

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript | bbxdesign

TOTO
L 1E 1 A U 1 G0 : 1 8

12 13

21/01/2013

Trs joli mais dommage quil ne fonctionne pas du tout sous IE8 (standard dans ma boite :()

Tr3nT
L 1E 4 A U 2 G2 : 4 9

maintenant ce qui va pas cest le fait quil ne sassocie pas avec le code php pour rcup les info en bdd

nico
L 2E 5 A U 0 G2 : 3 7

14 15
S E 1 P1 : 5 4

magnifique ! merci beaucoup et jadore les deux formulaires de cette page !

Jireck
L 1E 0

Bravo,

Pascal
L 2E 3 O C2 T0 : 1 9

16 17
N O V 0 1 : 2 1

Magnifique ! Merci

Medyo
L 2E

Si seulement le CSS3 tait compatible avec tous les navigateurs .

hornetbzz
L 1E 1 N O 1 V1 : 2 2

18 19
N O2 V0 : 4 6

Excellent

adelmonis
L 1E 4

Quoi dire, SYMPA ! et BRAVO !

BLOG SofiGraFiK - Toute l'actu SofiGraFiK


L 1E 4 D E 1 C4 : 5 8

20

[...] amis web designer voici un petit tuto pour apprendre faire un formulaire design sans utiliser dimages et sans utiliser de [...]

romeo
L 1E 8 M A 2 R3 : 2 6

21

Salut a tous, je suiis un lyces de 1ere et moi et deux potes on a dcid de faire un site je me demandais si je pouvais reprendre le scrip dincription pour notre site ? merci

Jeremy
L 2E 0 M A 1 R9 : 3 9

22 23

Bien sr. Cest fait pour a.

Top 10 CSS 3 forms tutorials / Weblog Hans van Goor


L 1E 8 A P 1 R7 : 5 0

[...] This tutorial is in French, but the result looks so good that I simply shouldnt include it on that list. For those who cant understand French, just get the source code and have fun with it. View tutorial [...]

24
http://blog.bbxdesign.com/2010/03/24/tutoriel-formulaire-css3-sans-image-sans-javascript/ 4/6

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript | bbxdesign

Top 10 CSS 3 forms tutorials | redbey


L 2E 4 A P 0 R6 : 0 4

24

21/01/2013

[...] This tutorial is in French, but the result looks so good that I simply shouldnt include it on that list. For those who cant understand French, just get the source code and have fun with it. View tutorial [...]

[CSS3]10 CSS 3 forms tutorials | WPsharing


L 2E 6 A P 1 R1 : 4 7

25

[...] This tutorial is in French, but the result looks so good that I simply shouldnt include it on that list. For those who cant understand French, just get the source code and have fun with it. View tutorial [...]

Top 10 tutoriales formularios CSS3 | colorate


L 2E 7 A P 2 R0 : 0 7

26 27

[...] Formulario CSS3 sin imagenes ni javascript [...]

Otto
L 1E 5 M A2 Y2 : 1 9

Very nice tutorial, but where are the sources ?

Top 10 CSS 3 forms tutorials | BoonJack Media || We make Multimedia easy.


L 1E 8 M A1 Y3 : 4 9

28

[...] This tutorial is in French, but the result looks so good that I simply shouldnt include it on that list. For those who cant understand French, just get the source code and have fun with it. View tutorial [...]

streesh
L 3E 0 M A1 Y4 : 4 5

29

Trs cool mais peux tu nous donner les sources ? thanks

Jeremy
L 1E J U N 0 9 : 5 8

30 31

@streesh : Ctrl + U

Top 10 CSS 3 forms tutorials | CatsWhoCode.com


L 3E J U N 1 1 : 2 3

[...] For those who cant understand French, just get the source code and have fun with it. View tutorialStylish Contact Form with HTML5 & CSS3 I really love what British web developer Chris Spooner [...]

entre graphisme et dveloppement Un petit formulaire en CSS3


L 2E 1 J U0 N9 : 3 0

32

[...] franais peuvent interprter la CSS3, autant ne pas se gner. Ainsi, vous pourrez trouver cette adresse un petit explicatif sur les attributs CSS3 applicables aux formulaires. De cette manire, vous [...]

Nanang Gunawan
L 1E J U L 0 2 : 1 6

33 34

well done, anyway! is there any download link?

gab140
L 1E 5 J U1 L0 : 1 2

@streesh, le css se trouve dans le code source de lexemple fourni Trs beau formulaire, merci pour le code

http://blog.bbxdesign.com/2010/03/24/tutoriel-formulaire-css3-sans-image-sans-javascript/

35

5/6

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript | bbxdesign

Great New Hot jQuery HTML5 With CSS3 Form Tutorials


L 2E 4 J U1 L2 : 1 5

35 36

21/01/2013

[...] 5. CSS3 form without images and JavaScript [...]

Topdam
L 1E A U G 1 4 : 4 8

Je ne comprends pas le morceau de css suivant :

form p:last-child { margin-bottom:0; }


et je narrive pas ladapter mon css il ne slectionne pas le dernier input.

110 Best CSS3 Tutorials and Examples | PriteshGupta.com


L 1E S E P 0 7 : 5 7

37 38

[...] CSS3 Form [...]

Jeune gay
L 9E S E P 1 8 : 1 9

excellent cest vraiment trs joli, je suis vraiment impressionn je vous le pique merci

10 jQuery CSS3 Form Tutorials | jQuery4u


L 2E 0 O C1 T0 : 0 6

39

[...] This tutorial is in French, but the result looks so good that I simply shouldnt include it on that list. For those who cant understand French, just get the source code and have fun with it. Source [...]

Lisa Zinninger
L 7E N O V 0 2 : 1 9

40

using to move between fields does not change the focus. the previously selected label stays blue, and the label for the field I tabbed to does not turn blue. I am sorry that I do not know how to tell you this in French.

Lisa Zinninger
L 7E N O V 0 2 : 1 9

41 42

I mean to say using the tab key

simo
L 1E 1 N O1 V0 : 2 2

slt tt le monde ! o pourrai-je rcuprer le code ? Merci

bbxdesign 2012

Proudly powered by WordPress, jQuery, Notepad++ and Starbucks.

http://blog.bbxdesign.com/2010/03/24/tutoriel-formulaire-css3-sans-image-sans-javascript/

6/6