Design de input dans formulaires

bonjour

je cherche des sources me permettant de designer les champs et les input dans des formulaires un peu comme le fait le site apple (zone arrondie) ou d'autres sites ayant des champs designé comme : grosbill,rueducommerce...etc

merci

Bonjour,

Alors je te propose de procéder ainsi:
1. Installer Firefox 3 si ça n'est pas déjà fait;
2. Installer l'extension Firebug (dernière version beta) si ça n'est pas déjà fait;
3. Te rendre sur les sites concernés et étudier le code HTML et CSS des éléments qui t'intéressent (en utilisant le mode «Inspect» notamment).

Tu devrais trouver quelques réponses ainsi.

Notons que, bien souvent, les boutons d'envoi de formulaire un peu particuliers sont en fait des images (élément INPUT de type "image"). Comme ici sur Rue du Commerce:

<input type="image" value="OK" src=".../pixel.gif" />

Sauf que leur code est faux, et qu'il aurait fallu écrire:

<input type="image" [#blue][b]alt[/b][/#]="OK" src=".../pixel.gif" />

et que, en plus, ils n'utilisent pas vraiment l'image pixel.gif qui est un fichier de 1x1px transparent, mais une image de fond en CSS, ce qui a un petit côté bricolage pas terrible.
Modifié par Florent V. (14 Aug 2008 - 12:30)

oui j'ai commencé a inspecter le code
mais bon je vuolais une base juste, car en effet sur les sites le code n'est pas toujours bon

je me suis lancé mais j'ai un souci pour limiter le texte dans le champ en image...du coup l'iamge est "poussée" et le texte sort du cadre ceci sous ie6

sous FF2 : l'image ne bouge pas mais le texte sort
Modifié par aiphes (14 Aug 2008 - 14:08)

C'est un problème que l'on retrouve effectivement sous Internet Explorer, l'image se déplace :s

Pour éviter ce problème, tu peux aussi insérer ton input dans une div et assigner à cette div une background-image, tu règles après ton input, pour le centrer dans ta div, et le problème est résolu.

Et pour limiter la taille de ton in put, utiliser l'attribut size, qui détermine la taille de ton input !
Modifié par fetnat (14 Aug 2008 - 14:41)

oui mais ie6 n'a pas l'air de se soucier de size...
j'ai mis le input dan sune div...et c'est reglé...avec une largeur pour le input

Pour un code juste, tu peux utiliser:

<input type="image" src="..." value="Valider" />
<input type="submit" value="Valider" />
<button type="submit">Valider</button>

Tu peux éventuellement placer un span autour si c'est nécessaire pour la mise en forme (théoriquement, tu peux aussi placer un SPAN dans l'élément BUTTON). C'est ce que j'ai fait dernièrement dans une intégration pour des boutons carrés au style un peu soigné (le résultat n'était pas parfait dans tous les navigateurs, cependant).
Pour quelque chose d'un peu «spécial», un INPUT de type "image" va très bien.

merci pour le code