Tutoriel Formulaire 100% CSS3 Sans Image Et Sans JavaScript Bbxdesign

bbxdesignbbxdesignV E S T I G E S D ' U N C S SV E S T I G E S D ' U N C S SG U R UG U R U

blog

portfolioportfolio

contactcontact

propos propos

Tutoriel : formulaire 100% CSS3 sansTutoriel : formulaire 100% CSS3 sansimage et sans JavaScriptimage et sans JavaScript

Je vous invite aller lire le Je vous invite aller lire le que jai crit. que jai crit.

Aprs avoir expliqu Aprs avoir expliqu , pourquoi ne pas en raliser un, pourquoi ne pas en raliser ununiquement en CSS3uniquement en CSS3 ? ?

Les Les proprits CSS3proprits CSS3 utilises ici sont les suivantes : utilises ici sont les suivantes :

border-radiusborder-radius pour les bords arrondis pour les bords arrondisbox-shadowbox-shadow pour les ombres des blocs pour les ombres des blocscontent content pour rajouter du contenu au HTMLpour rajouter du contenu au HTMLgradient gradient pour les dgrads des blocspour les dgrads des blocsrgba rgba pour avoir des fonds transparentspour avoir des fonds transparentstext-shadowtext-shadow pour les ombres du texte pour les ombres du texte

Jutilise aussi les pseudo-classes CSS3 suivantes :Jutilise aussi les pseudo-classes CSS3 suivantes :

:after:after pour rajouter du texte HTML la suite dun lment pour rajouter du texte HTML la suite dun lment:last-child:last-child pour slectionner le dernier enfant dun lment pour slectionner le dernier enfant dun lment:target:target pour slctionner un lment lorsquune #ancre est utilise dans ladresse pour slctionner un lment lorsquune #ancre est utilise dans ladresse

Dernire fonctionnalit utilise : le Dernire fonctionnalit utilise : le slecteur avanc [type=text]slecteur avanc [type=text] pour slectionner un lment pour slectionner un lmentselon la valeur dun de ses attributs HTML.selon la valeur dun de ses attributs HTML.

Bien sr, toutes ces Bien sr, toutes ces nouveauts CSS3nouveauts CSS3 ne marchent pas partout, mais elles fonctionnent trs ne marchent pas partout, mais elles fonctionnent trsbien sous bien sous Firefox Firefox et et Safari/ChromeSafari/Chrome (Webkit). (Webkit).

De nouvelles intractions intressantesDe nouvelles intractions intressantes

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

Pseudo-classe :last-childPseudo-classe :last-child

Lorsquon peut viter de rajouter des classes dans le HTML, il est prfrable de le faire. ParLorsquon peut viter de rajouter des classes dans le HTML, il est prfrable de le faire. Par

24M A R

tutoriel complet sur le CSStutoriel complet sur le CSS

comment raliser un bon formulaire HTMLcomment raliser un bon formulaire HTML

Follow Follow @bbx@bbx

recherche...

P O P U L A I R EP O P U L A I R ET U T O R I E L ST U T O R I E L SF U NF U N

Comprendre le line-heightComprendre le line-height

Retour FirefoxRetour Firefox

Colonnes, marges et nth-child en CSS 3Colonnes, marges et nth-child en CSS 3

Les interfaces tactiles ne le sont pasLes interfaces tactiles ne le sont pas

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript | bbxdesign 21/01/2013

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

42 commentaires42 commentaires

exemple, la pseudo-classe exemple, la pseudo-classe :last-child:last-child permet de slectionner le dernier enfant dun lment. En permet de slectionner le dernier enfant dun lment. Enloccurrence, je slectionne avec loccurrence, je slectionne avec form p:last-childform p:last-child le dernier paragraphe et je lui enlve son le dernier paragraphe et je lui enlve sonmargin-bottom. Ca permet dviter dutiliser une classe last.margin-bottom. Ca permet dviter dutiliser une classe last.

Pseudo-classe :after et la proprit contentPseudo-classe :after et la proprit content

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

Pseudo-classe :targetPseudo-classe :target

Lutilisation de la pseudo-classe Lutilisation de la pseudo-classe :target:target se fait en utilisation les se fait en utilisation les ancres HTMLancres HTML..Par exemple, en cliquant sur le lien #options, a fait apparatre le bloc id=options.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.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(NB : jai remplac linput submit par un simple lien, histoire de pouvoir afficher le bloc #finish. Lecode normal est comment dans le HTML si vous le voulez).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.Enfin, si je clique sur annuler, je navigue vers #start et a repart au dbut.

Nhsitez pas utiliser mes codes HTML et CSS.Nhsitez pas utiliser mes codes HTML et CSS.

allRGB : des images avec 16 millions deallRGB : des images avec 16 millions decouleurscouleurs

La vrit sur les sondagesLa vrit sur les sondages

L E L E 1 0 : 4 4 1 0 : 4 4

Je ne connaissais pas du tout la proprit content.Je ne connaissais pas du tout la proprit content.Merci Merci

11AlbanAlban2 4 M A R2 4 M A R

Follow Follow



lemslemsL E L E 1 3 : 5 0 1 3 : 5 0

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

222 4 M A R2 4 M A R

L E L E 1 4 : 1 2 1 4 : 1 2

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

33JeremyJeremy2 4 M A R2 4 M A R

L E L E 1 4 : 2 1 1 4 : 2 1

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

44Vincent ValentinVincent Valentin2 4 M A R2 4 M A R

mzwygartmzwygartL E L E 1 4 : 4 2 1 4 : 4 2

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

552 4 M A R2 4 M A R

lemslemsL E L E 1 5 : 0 0 1 5 : 0 0

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

662 4 M A R2 4 M A R

L E L E 1 5 : 2 2 1 5 : 2 2

@Vincent Valentin et @mzwygart : en fait, javais li les labels aux champs au dbut (avec for=xxx,@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.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 queMais tant donn que jai supprim linput submit et mis un simple lien la place, il est possible quelerreur ne se reproduise plus. Je checke a.lerreur ne se reproduise plus. Je checke a.


L E L E 1 6 : 4 8 1 6 : 4 8

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

88css3start.com, une homepage moderne | Hi, I'm Victor and this is my blogcss3start.com, une homepage moderne | Hi, I'm Victor and this is my blog1 2 A P R1 2 A P R

L E L E 2 2 : 4 6 2 2 : 4 6

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

99Liens et actusLiens et actus1 3 A P R1 3 A P R

L E L E 0 5 : 1 2 0 5 : 1 2

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

1010Tr3nTTr3nT1 2 J U L1 2 J U L

L E L E 0 5 : 3 6 0 5 : 3 6

pas la peine jai compris pas la peine jai compris =)))=)))

1111Tr3nTTr3nT1 2 J U L1 2 J U L

1212



L E L E 1 0 : 1 8 1 0 : 1 8

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

1212TOTOTOTO1 1 A U G1 1 A U G

L E L E 2 2 : 4 9 2 2 : 4 9

maintenant ce qui va pas cest le fait quil ne sassocie pas avec le code php pour rcup les infomaintenant ce qui va pas cest le fait quil ne sassocie pas avec le code php pour rcup les infoen bdden bdd

1313Tr3nTTr3nT1 4 A U G1 4 A U G

niconicoL E L E 0 2 : 3 7 0 2 : 3 7

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

14142 5 A U G2 5 A U G

L E L E 1 1 : 5 4 1 1 : 5 4

Bravo, Bravo,

1515JireckJireck1 0 S E P1 0 S E P

PascalPascalL E L E 2 0 : 1 9 2 0 : 1 9

Magnifique ! MerciMagnifique ! Merci

16162 3 O C T2 3 O C T

L E L E 0 1 : 2 1 0 1 : 2 1

Si seulement le Si seulement le CSS3CSS3 tait compatible avec tous les navigateurs . tait compatible avec tous les navigateurs .

1717MedyoMedyo2 N O V2 N O V

hornetbzzhornetbzzL E L E 1 1 : 2 2 1 1 : 2 2

ExcellentExcellent

18181 1 N O V1 1 N O V

adelmonisadelmonisL E L E 2 0 : 4 6 2 0 : 4 6

Quoi dire, SYMPA ! et BRAVO ! Quoi dire, SYMPA ! et BRAVO !

19191 4 N O V1 4 N O V

L E L E 1 4 : 5 8 1 4 : 5 8

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

2020BLOG SofiGraFiK - Toute l'actu SofiGraFiKBLOG SofiGraFiK - Toute l'actu SofiGraFiK1 4 D E C1 4 D E C

romeoromeoL E L E 2 3 : 2 6 2 3 : 2 6

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

21211 8 M A R1 8 M A R

L E L E 1 9 : 3 9 1 9 : 3 9

Bien sr. Cest fait pour a.Bien sr. Cest fait pour a.


L E L E 1 7 : 5 0 1 7 : 5 0

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

2323Top 10 CSS 3 forms tutorials / Weblog Hans van GoorTop 10 CSS 3 forms tutorials / Weblog Hans van Goor1 8 A P R1 8 A P R

2424



L E L E 0 6 : 0 4 0 6 : 0 4


2424Top 10 CSS 3 forms tutorials | redbeyTop 10 CSS 3 forms tutorials | redbey2 4 A P R2 4 A P R

L E L E 1 1 : 4 7 1 1 : 4 7


2525[CSS3]10 CSS 3 forms tutorials | WPsharing[CSS3]10 CSS 3 forms tutorials | WPsharing2 6 A P R2 6 A P R

L E L E 2 0 : 0 7 2 0 : 0 7

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

2626Top 10 tutoriales formularios CSS3 | colorateTop 10 tutoriales formularios CSS3 | colorate2 7 A P R2 7 A P R

L E L E 2 2 : 1 9 2 2 : 1 9

Very nice tutorial, but where are the sources ?Very nice tutorial, but where are the sources ?

2727OttoOtto1 5 M A Y1 5 M A Y

L E L E 1 3 : 4 9 1 3 : 4 9


2828Top 10 CSS 3 forms tutorials | BoonJack Media || We make Multimedia easy.Top 10 CSS 3 forms tutorials | BoonJack Media || We make Multimedia easy.1 8 M A Y1 8 M A Y

streeshstreeshL E L E 1 4 : 4 5 1 4 : 4 5

Trs cool mais peux tu nous donner les sources ?Trs cool mais peux tu nous donner les sources ?thanksthanks

29293 0 M A Y3 0 M A Y

L E L E 0 9 : 5 8 0 9 : 5 8

@streesh : Ctrl + U@streesh : Ctrl + U

3030JeremyJeremy1 J U N1 J U N

L E L E 1 1 : 2 3 1 1 : 2 3

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

3131Top 10 CSS 3 forms tutorials | CatsWhoCode.comTop 10 CSS 3 forms tutorials | CatsWhoCode.com3 J U N3 J U N

L E L E 0 9 : 3 0 0 9 : 3 0

[...] franais peuvent interprter la CSS3, autant ne pas se gner. Ainsi, vous pourrez trouver [...] 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 cettecette adresse un petit explicatif sur les attributs CSS3 applicables aux formulaires. De cettemanire, vous [...]manire, vous [...]

3232entre graphisme et dveloppement Un petit formulaire en CSS3entre graphisme et dveloppement Un petit formulaire en CSS32 1 J U N2 1 J U N

L E L E 0 2 : 1 6 0 2 : 1 6

well done, anyway! is there any download link?well done, anyway! is there any download link?

3333Nanang GunawanNanang Gunawan1 J U L1 J U L

L E L E 1 0 : 1 2 1 0 : 1 2

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

3434gab140gab1401 5 J U L1 5 J U L

3535



bbxdesign 2012 bbxdesign 2012 Proudly powered by Proudly powered by , , , , and Starbucks. and Starbucks.

L E L E 1 2 : 1 5 1 2 : 1 5

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

3535Great New Hot jQuery HTML5 With CSS3 Form TutorialsGreat New Hot jQuery HTML5 With CSS3 Form Tutorials2 4 J U L2 4 J U L

L E L E 1 4 : 4 8 1 4 : 4 8

Je ne comprends pas le morceau de css suivant :Je ne comprends pas le morceau de css suivant :

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

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

3636TopdamTopdam1 A U G1 A U G

L E L E 0 7 : 5 7 0 7 : 5 7

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

3737110 Best CSS3 Tutorials and Examples | PriteshGupta.com110 Best CSS3 Tutorials and Examples | PriteshGupta.com1 S E P1 S E P

L E L E 1 8 : 1 9 1 8 : 1 9

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

3838Jeune gayJeune gay9 S E P9 S E P

L E L E 1 0 : 0 6 1 0 : 0 6

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

393910 jQuery CSS3 Form Tutorials | jQuery4u10 jQuery CSS3 Form Tutorials | jQuery4u2 0 O C T2 0 O C T

Lisa ZinningerLisa ZinningerL E L E 0 2 : 1 9 0 2 : 1 9

using using to move between fields does not change the focus. the previously selected label stays blue,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 youand the label for the field I tabbed to does not turn blue. I am sorry that I do not know how to tell youthis in French.this in French.

40407 N O V7 N O V

Lisa ZinningerLisa ZinningerL E L E 0 2 : 1 9 0 2 : 1 9

I mean to say using the tab keyI mean to say using the tab key

41417 N O V7 N O V

L E L E 1 0 : 2 2 1 0 : 2 2

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

4242simosimo1 1 N O V1 1 N O V

WordPressWordPress jQueryjQuery Notepad++Notepad++



Tutoriel : formulaire 100% CSS3 sans image et sans JavaScriptDe nouvelles intractions intressantesPseudo-classe :last-childPseudo-classe :after et la proprit contentPseudo-classe :target

42 commentaires

Tutoriel Formulaire 100% CSS3 Sans Image Et Sans JavaScript Bbxdesign

Documents

Transcript of Tutoriel Formulaire 100% CSS3 Sans Image Et Sans JavaScript Bbxdesign