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.
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 !!!
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.
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 ?
@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 .
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+
@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
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
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 ???
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!!
@+
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.
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 ?
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.
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.
Suivre les commentaires de ce tutoriel