Stylage de boutton form

Bonjour a vous,

Voila j'ai envie de styler les bouttons form pour qu'il s'affiche de la meme manière pour la majorité des navigateurs ( IE, firefox ... ).
En théorie créé un class input boutton ou similaire ...
sur la page www.hotmail.fr il y a un bon exemple mais j'arrive pas a atteindre le code source.
j'ai pas envie d'appliquer un arrière plan au boutton ou des images statique, mais plus tot le texte de l'input soit éditable et bien évètuellement un jolie arrondie comme celui du boutton que je vais cliquer dans un cours instant ( Envoyer )

Avez vous une solution pratique ?
j'ai jeter un coup d'oeil aussi sur un autre code source, celui du site expedia et ça donne :

 <div class="validation">
		<div style="padding: 5px 5px 0 200px; margin: 0 0 5px 0;">
			<div style="float:left;"><img src="http://media.expedia.com/media/content/expfr/graphics/wizards/launch_1024/fondBtnVolLeft.gif" border="0" /></div>
			<div style="float:left;"><div class="goBtnVert"  onclick="return vd();">Recherchez</div></div>
			<div style="float:left;"><img src="http://media.expedia.com/media/content/expfr/graphics/wizards/launch_1024/fondBtnVolRight.gif" border="0" /></div>

		</div>
	</div>

Code de la page index expedia.fr, partie boutton recherchez du big formulaire
Je trouve que c'est un peu long et utilisé des liens javascript ne m'interesse pas trop

Merci d'avance
Modifié par delahk (05 May 2009 - 10:33)

Bonjour,

Il est en réalité plus facile que l'on ne le croit de modifier un bouton pour un formulaire.
Déjà met bien que c'est un input de type submit (button et image ne devraient jamais être utilisé)

Ensuite en css avec un border:0 et un background:none tous les navigateurs casserons le style de base qu'ils mettent habituellement sur un bouton de formulaire et ainsi tu pourras mettre le tiens.

Hello,

masseuro a écrit :
button et image ne devraient jamais être utilisé

Pourquoi cela ?

@delahk > d'un point de vue général lire : Comment ne pas styler les éléments de formulaire.
Modifié par Heyoan (05 May 2009 - 14:11)

masseuro a écrit :
button et image ne devraient jamais être utilisé

Tu peux développer s'il te plait? Je vois mal pourquoi les éléments BUTTON ou INPUT de type image devraient être proscrits.

masseuro a écrit :
Ensuite en css avec un border:0 et un background:none tous les navigateurs casserons le style de base qu'ils mettent habituellement sur un bouton de formulaire

Pour couvrir les styles des différents navigateurs il faudra aussi redéfinir padding et margin.

masseuro a écrit :
et ainsi tu pourras mettre le tiens

Avec quelques limites à l'occasion, de mémoire.

Oui d'accord re définir les propriétés des éléments de formulaire d'accord mais ça ne résout pas mon problème, j'ai trouver aucune solution possible a ma requete j'ai jeter un coup d'œil sur le code du site alsa on donne des class au boutton --> enleve les style par défaut --> appliquer un rolover avec des images statique.
Je trouve que c'est trop de contrainte dans le sense ou pour chaque boutton faut passé par la création d'image !
Apparament le code expedia est le meilleur : une image qui fait l'arrondi de gauche et autre pour la droite et un background de 1px de largeur pour le milieu et du coup mettre le texte quand veux pour le boutton -- > un lien javascript sur le div !

Remarque je mon fou sur le choix du lien javascript ou le lien hypertexte vu que c'est un boutton formulaire qui ne sera pas indexer par un moteur de recherche.

nb: il me semble que c'est plus compliquer pour un moteur d'indexer un lien javascript qu'un simple lien hypertexte de type <a href>
Modifié par delahk (05 May 2009 - 14:31)

Ah, oui pour les inputs images de type button et image, cela oblige un traitement javascript derrière et donc oblige un code javascript intrusif. Voilà tout. Rare sont les cas on cela est pertinent.
D'un point de vue accessibilité et ergonomie un input submit remplie la plus pars des fonctions (ou sinon l'ergonomie n'a pas été pensez pour une interface web)

Bien sure moi aussi j'utilise des inputs button de temps à autre, on est obligé dans certains cas...

masseuro a écrit :
pour les inputs images de type button et image, cela oblige un traitement javascript derrière

À ma connaissance, ce n'est le cas que pour <input type="button"> ; tous les autres (y compris <input type="image">), soumettent les formulaires sans broncher, même en l'absence de javascript.

Ah, et j'oubliais, pour delahk, deux "articles de chevet" (en anglais, par contre) :
- le premier qui t'explique comment styler l'élément <button>
- le second qui te propose un solution très light, 100% CSS, mais avec des différences selon le navigateur

Voilà, c'était juste en passant, au cas où ça pourrait t'intéresser.

masseuro a écrit :
Ah, oui pour les inputs images de type button et image, cela oblige un traitement javascript derrière et donc oblige un code javascript intrusif.

Hmm... il y a confusion. Petit RTFM qui va bien:
http://www.w3.org/TR/REC-html40/interact/forms.html

En bref tout de même, les types de boutons qui soumettent un formulaire:
- <input type="submit" value="Envoyer">
- <input type="image" alt="Envoyer">
- <button type="submit">Envoyer</button>
- <button>Envoyer</button> (c'est un bouton de type "submit" par défaut)

Les types de boutons destinés à être utilisés pour le scripting:
- <input type="button" value="Une action...">
- <button type="button">Une action...</button>

Point orthographique du jour: un seul T à «bouton» en français. Comme le signale bien entendu le correcteur orthographique de votre navigateur ou système d'exploitation dès que vous avez le malheur d'écrire «boutton».

delahk a écrit :
une image qui fait l'arrondi de gauche et autre pour la droite et un background de 1px de largeur pour le milieu et du coup mettre le texte quand veux pour le boutton

On peut faire le tout avec une seule image, ça réduit d'autant le téléchargement d'images par le navigateur et c'est plus simple à gérer.

delahk a écrit :
Remarque je mon fou sur le choix du lien javascript ou le lien hypertexte vu que c'est un boutton formulaire qui ne sera pas indexer par un moteur de recherche.

Ça sera juste inutilisable sans JavaScript. Ce qui est dommage pour les utilisateurs qui ne disposent pas de JavaScript (pour diverses raisons). Et si jamais c'est sur un élément DIV ou autre élément qui ne peut pas obtenir le focus (navigation au clavier, avec un lecteur d'écran, etc.), enfin en gros sur quoi que ce soit d'autre qu'un bouton ou un lien, eh bien ça sera inutilisable pour quantité d'autres utilisateurs. Ce qui, rebelote, serait idiot.

delahk a écrit :
nb: il me semble que c'est plus compliquer pour un moteur d'indexer un lien javascript qu'un simple lien hypertexte de type <a href>

Certes, mais c'est un autre sujet.

Pour revenir au sujet, donc, un code HTML qui va bien:

<button type="submit"><span>Intitulé du bouton</span></button>

Un autre qui peut être intéressant:

<span class="button"><input type="submit" value="Intitulé du bouton" /></span>

Je ne sais pas exactement lequel sera le plus souple des deux. Mais ça devrait être jouable côté CSS, avec un peu d'efforts et pas mal de tests.

Bonjour,

En complément, l'utilisation de plusieurs <button type="submit" ...> dans un même formulaire est à éviter. Voir le sujet Button type="submit" et Internet Explorer
Modifié par Tony Monast (05 May 2009 - 21:00)

Merci pour l'info Tony Monast.
@ Florent V. :
Oui oui c'est plus simple une seul image c'est dernier temp je m'y met a faire des sites avec une seul image a la youtube
voici le lien :
http://s.ytimg.com/yt/img/master-vfl93996.png

Merci a marcv pour les lien :
en faite le premier lien je n'est pas encore plonger dessu, mais le deuxiemme utilise la propriété -moz-border-radius: .7em; qui est extra ! et qui peu changer notre vie ( moin d'images et plus de css, vu que c'est des arrondies css ) mais ça ne marche pas sur ie6.

Si non je crois que je vais faire simple sans arrondie, du coup je pourrais avoir une seul class pour rendre mes bouton plus jolie
Sur hotmail.fr je pense que la class a un padding de 1 px et border 1px coloré + un arrière plan effet web 2.0 c'est plus tôt acceptable