Tutoriel vidéo xHTML-CSS : Personnaliser formulaire

Dans ce tutoriel nous verrons l'utilisation du CSS pour la personnalisation d'un formulaire (plus précisément un champ de recherche). Cette méthode peut s'appliquer à tous les types de formulaire.

Démonstration

Tags : HtmlCssFormulairePersonnaliserInputForm

Tutoriel xHTML-CSS posté Mercredi 10 Septembre 2008
 45 Commentaires
Ils l'ont utilisé
Vos commentaires

1984 (Mercredi 10 Septembre 2008 à 21:11):

Merci ! ;-)

Zawi (Jeudi 11 Septembre 2008 à 17:32):

Merci ! =D

Fenix (Samedi 13 Septembre 2008 à 22:23):

c'est Cool ^^

rolly (Dimanche 14 Septembre 2008 à 17:09):

vraiment excellent
merci!

stefff (Jeudi 18 Septembre 2008 à 13:29):

Merci pour cette vidéo, je ne connaissais pas l'ajout de [type=submit] dans une css.

Dr Rodney Mckay (Mardi 23 Septembre 2008 à 15:58):

Merci pour ce tutoriel. Il arrive à point nommé pour moi.

Shin (Dimanche 05 Octobre 2008 à 09:27):

Oh mon dieu c'est enorme comme tuto o_o"
Vraiment bien expliqué, vraiment utile, bien encodé et super bien codé.

Félicitation tu viens de gagner un émule xD

*marque-page activé *o* *

arno (Lundi 24 Novembre 2008 à 12:18):

Vraiment excellent ton tuto, merci !!!
Par contre quand je l'applique au site que je suis en train de concevoir voilà ce qu'il se passe :
lors de la saisie dans le champs l'image de fond utilisé pour la balise type=text se déplace sur la gauche à mesure que le champs se remplit (testé sous IE). Quelle est la soluce pour y remédier ?!

dbg (Mardi 25 Novembre 2008 à 22:52):

un grand merci, c'est cool!

arno (Jeudi 27 Novembre 2008 à 12:09):

Finalement j'ai trouvé l'astuce pour que ce décalage ne soit pas apparant en découpant le champs de recherche en plusieurs images....c'est cool !!! et encore merci pour ton tuto !!!

arnaud (Lundi 29 Décembre 2008 à 20:27):

yes supers tuto mais maintenant j'aimerais savoir comment coder le formulaire de recherche... pour l'appliquer sur mon site en tout cas merci pour tout.

Aisulu (Lundi 05 Janvier 2009 à 15:32):

franchement, ce site il est trop bien

Arnaud (Lundi 12 Janvier 2009 à 00:20):

Salut pourais tu faire un tuto en + ;-) car je ne sais pas comment crée une recherche via cette barre j'est placer une barre design de recherche mais comment faire pour qu'elle recherche des mots clef présent sur mon site et ainssi rassembler touts les élément trouver sur une meme page? merci pour ton aide ... au plaisir!!

Télio (Lundi 12 Janvier 2009 à 20:25):

merci beaucoup je crois que c'est un de tes tutoriels qui m'ont le plus aidé

Nelle.B (Lundi 19 Janvier 2009 à 22:28):

super merci !!! clair et rapide!!!

borow (Mercredi 18 Février 2009 à 11:33):

Bonsoir
Merci pour se très bon tuto seulement il y a encore une petite question que je n'arrive pas a résoudre
Sur le navigateur internet safari lorsque l'on sélectionne un champ texte d'un formulaire une décoration bleu comme un halo se place.
cela est très jolie sur les formulaire par défaut mais en le personnalisant sa rend vraiment un travaille bâclé...
je me suis aperçu que ton site ne prend pas en compte cette décoration sur safari pourrais tu m'expliquer pourquoi ?

Merci
Matthieu

Grafikart (Mercredi 18 Février 2009 à 14:03):

@borow : Oui effectivement Safari par défaut met ce petit halo autour des formulaire. Personnellement j'ai rien fait de particulier pour qu'il me l'enlève. Le mieux serait de comparer ton CSS et mon CSS pour voir les différence au niveau de ce formulaire.

A mon avis il faut neutraliser les bordures en mettant border:none; ou border:0; dans le CSS. A vérifier...

MATT (Lundi 23 Février 2009 à 23:13):

Bonjour.
Tres bon tuto. Malgre tout, je n'arrive pas a comprendre pourquoi cela ne marche pas avec IE7. Ce qui ne marche pas c'est le champs et le bouton qui ne change pas d'apparance....

Je ne comprends pas le probleme. J'ai recupere les fichiers de tout exemple.

Enfin, je peux lire ton site sous IE7 sans prob...

COrdialement,

MATT (Lundi 23 Février 2009 à 23:59):

PS: Quand je dis que cela ne change pas d'apparence je veux dire que cela reste le formulaire par defaut de IE ...

Valbuena72 (Vendredi 13 Mars 2009 à 19:27):

Salut,
Bien joué, j'aime bien cette astuce du js
Sinon super site.

GoldenBoy (Jeudi 26 Mars 2009 à 04:09):

Pour ceux qui recherche le tuto pour creer un champs de recherche il suffit de regarder dans la section php, penser a ouvrir vos yeux sa aide .

kaou (Vendredi 03 Avril 2009 à 03:49):

bonjour. je cherche à faire quelques modfis sur mon textarea

1) supprimer la barre de scroll (déjà fait)
2) mettre un retour à la ligne et non un scroll horizontal
3) définir une longueur maximale de caractères sur mon textarea

merci beaucoup.
kaou

cocolabombe0 (Mardi 28 Avril 2009 à 11:53):

Bonjour, si je me rappelle bien, alors pour le 3), tu donne la limite par rapport a la requete sql.
Tu peux changer la valeur de Taille/Valeurs*1 comme tu veux.
Regarde dans par exemple le tutoriel news qui en parle ou commentaire.
merci
a+

Grafikart (Mardi 28 Avril 2009 à 12:45):

@kaou:
1/ La barre de scroll ça se gère en CSS, overflow:hidden peut-être
2/ o_O Dans un textarea on retourne à la ligne automatiquement SAUF si le mot est trop long. C'est à dire que la personne ne met pas d'espace.
3/ Là il faut du javascript, je ne crois pas qu'un attribut HTML existe. Donc, c'est un peu complexe pour être détaillé (Google)

Vince (Mercredi 13 Mai 2009 à 10:59):

Bonjour, Merci pour ce tuto que je cherchais depuis quelques temps déjà.
J'ai un petit pb néanmoins avec IE 5/6, impossible de personnaliser le champ text et submit alors que cela fonctionne très bien sur les autres navigateurs...
J'ai testé plusieurs choses (modification du format, fonction "repeat", changer la position de l'image, ...) Bref un casse-tête... Aurais tu par hasard rencontré ce genre de problème et si tu aurais une solution (ou d'autres personnes?)
Merci en tout cas pour le blog!

Krabben (Jeudi 21 Mai 2009 à 19:57):

Super tuto, mais serait-il possible d'avoir le psd de ton images stp.

olivier (Dimanche 19 Juillet 2009 à 22:06):

merci beaucoup les tutos vidéos sont vraiment sympas et instructifs

bork (Samedi 19 Septembre 2009 à 17:50):

super tutoriel, sa m'a beaucoup aider et j'ai appris facilement de super chose pour améliorer le design d'un formulaire =)

mais j'ai un problème quand je veut mettre deux bouton (type=submit) dans ma barre (j'essaie de mettre un bouton pour connexion et s'inscrire) et bah quand j'essaie de changer le background du second bouton (s'inscrire) et bah sa marche pas. Même en y métant une class je n'est pas réussis donc si on pouvais m'aider svp !

merci et encore bravo

yop (Mardi 06 Octobre 2009 à 14:41):

savez-vous que sur ie6 votre site n'a pas du tout le même aspect css que sur firefox ?
Ceci est intentionnel ou non ?
ciao

Grafikart (Mardi 06 Octobre 2009 à 18:04):

Pas intentionnel mais j'avais pas envie de passer du temps à adapter mon site pour un navigateur obsolète.

KaKuZa` (Dimanche 01 Novembre 2009 à 21:09):

Génial merci !

evy (Vendredi 29 Janvier 2010 à 06:49):

Encore merci tout tes tuto sont top, bien expliques et clair.
Et tu fais bien de preciser en fin que tes tutos a telecharger ne sont pas fait pour etre utilises sur le web mais pour apprendre. Je ne comprend pas les personnes qui copie au lieu d'apprendre en faisant son propre site.
Et pour Yop au sujet de ie6, de toute faon ie6 est loin derriere et tres..chiant. Rien que pour ie6, quand on fait un site il faut faire une section speciale pour lui afin que ton site s'integre aussi avec lui comme sur les autres navigateurs.. Il faut avoir du temps en faite juste pour lui..oubliez le c'est mieux

Clément (Mercredi 10 Février 2010 à 13:22):

Merci pour ce tuto !

Pourrais-tu m'expliquer quelle manip tu fais pour fermer une balise automatiquement, par exemple au début de la vidéo avec la balise body ???

Baptiste (Samedi 13 Février 2010 à 14:49):

salut!
c'est sympa! mais pourrait tu faire un tuto pour montrer comment rechercher dans une base de données par exemple stp? faire un formulaire de recherche qui marche en fait!!
@+

Grafikart (Samedi 13 Février 2010 à 15:31):

Recherche
http://www.grafikart.fr/tutoriels/recherche-php-40

Baptiste (Samedi 13 Février 2010 à 18:06):

ok nickel merci!!! C'est vraiment un super site!! ^^
@+

ghislain (Mercredi 17 Mars 2010 à 11:04):

Bonjour,
Lors du tutoriel, j'ai remarquer que lorsque tu te positionne dans ton input, les bordures du champs deviennent orange (avec chrome)... Ce qui est un peu gainant à mon goût, sais-tu comment supprimer cet effet ?
Merci et bonne continuation.

Drayark (Mercredi 17 Mars 2010 à 22:23):

Il fait de même avec safari, je ne sais pas si il y a une solution à ton problème !

Gugul (Mercredi 05 Mai 2010 à 22:10):

Beau tuto !
Pour moi, tout va bien, excepté le fait que malgré le fait qu'elle soit en PNG avec fond transparent, ma barre de champs affiche les coins blancs et non des arrondies.

Pour voir : http://independenza.ovh.org/anthony/recherche/
Si quelqu'un à une solution, merci d'avance !

Et encore bravo pour le tuto =)

robin850 (Dimanche 23 Mai 2010 à 18:50):

Génial :D !

J'adore les tutoriels, ils donnent envie de coder, ils sont bien expliqués,...un grand bravo !

Cordialement robin.

raficraft (Mercredi 16 Juin 2010 à 17:37):

Salut j'ai suivi le tutoriel à la lettre. Mais malheureusement je n'arrive pas à conserver la transparence au tour de mon champ texte. Un carré blanc persiste.
Quelle soit la taille ou le format d'image ( gif ou png). Je souhaite que ce soit l'image de mon body qui apparaisse à la place de ce liseré blanc.

Alors que l'image seule fonctionne.



lilj (Vendredi 23 Juillet 2010 à 17:27):

bonjour, super tuto merci à vous.
j'ai une question est-ce compatible avec IE ? car moi j'ai fait appel a un fichier htc et en plus, pour mon champ texte si j'entre beaucoup de caractère alors l'image de fond se décale vers la gauche toujours sous IE (pas de problème sous FF)
est-ce normal ? ou cela viendrait de mon code ?

ZWX (Dimanche 08 Août 2010 à 07:07):

YYYYYYYYYYYYYYYYYYYYYYYYYYYYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

Trop bien ce tutoriel

crack (Lundi 09 Août 2010 à 15:44):

jolie tuto!!

dani (Vendredi 03 Septembre 2010 à 21:39):

salut, sur photoshop, c'est bien un masque de calque que tu ajoute ? Car ton calque a eu comme une flèche et en théorie c'est plutot un carré pour les masque de calque ...

 

Ajouter un commentaire

Si vous rencontrez un problème avec votre code et que vous avez une question spécifique utilisez plutôt les questions pour avoir une réponses rapide.

Vous devez activer javascript.
 

 

Suivre les commentaires de ce tutoriel