28172 sujets

CSS et mise en forme, CSS3

Personnalisé un bouton dans un formulaire

Bonjour,

Je voudrais personnaliser le bouton envoi du formulaire de commentaire situer en bas de chaque article/tutorial. Example: http://www.fireworkszone.com/other-features-fireworks-cs5_598.html

Voici le formulaire tel qu'il est maintenant: 


<input type="submit" name="submit" value="Submit Comment" onclick="return validation();" />


Je voudrais personnaliser le bouton submit, j'ai donc essayé ce code: 



<input type="image" src="http://www.fireworkszone.com/pictures/buttons/comment_button.png"  width="157" height="32" alt="submit"/>



Mais le formulaire ne marche plus! Des idées?
Il faudrait que tu ajoutes un onclick="return validation();" et que tu envoie le formulaire depuis le javascript.

Bon ma solution ne fonctionne plus si javascript est désactivé...
Bonjour e-rwan,

Comme tu l'auras surement remarquer, placer des URL de trois km de long sur le forum déforme totalement son affichage, rendant sa lecture difficile.

Merci d'utiliser les balise lien : [ url="http://"]Intitulé[ /url] (sans espace dans les balise) pour éviter ces désagréments.
onclick="return validation();" ne fonctionne pas

j'ai trouvé document.nomDuForm.submit(); mais je ne sais pas comment l'installer dans mon input:



<input type="image" src="comment_button.png"  width="157" height="32" alt="submit"/>

Modifié par fireworkszone (26 May 2010 - 15:27)
fireworkszone,
le css suffit, vas voir les liens que je t'ai donné
ici pour l'input

le javascript sera la plutot pour avoir des formulaires qui interagissent avec l'utilisateur, moins pour la déco
Modifié par e-rwan (26 May 2010 - 16:21)
bonjour r-wan

1- Je veux utiliser mon image et pas le CSS.

2- Au cas où j'utiliserais le CSS, je comprend pas bien comment l'installer: 

#monForm input[type="submit"]
{
	border: #DDEEFF 1px solid;
	width: 27%;
}

#monForm input[type="submit"]:hover
{
	background-color: #66CC33;
	cursor: pointer;
}


Je ne vois pas pourquoi on a besoin de deux lignes? Dans mon ça donnerait quoi pour mon input? C'est quoi '#monForm'?
Modifié par fireworkszone (26 May 2010 - 16:58)
fireworkszone,
au vue des questions que tu poses, je pense que tu devrais aller lire quelque tuto css pour parfaire tes connaissances le post de raphel alsacréationS SdZ

pour mettre une image en fond en css il faut utiliser background-image:url(http://url/de/ton/image.jpg)
#monform est un ID
il n'y-a pas besoin de deux lignes, c'est écrit ainsi pour une meilleur lecture.

je le répète, ces questions sont basiques de chez basiques, en une heure au plus et en lisant les tutos que je t'ai passé tu auras les connaissances nécessaires pour faire ça tout seul.

bon courage
Modifié par Raphael (26 May 2010 - 19:39)
bon voilà où j'en suis:

J'ai placé une classe dans l'input. J'ai donné à l'id et au name la meme valeur. Je ne sais pas si c'est bon. 



<input class="inputText" id=name name="name" value="" type="text">



Maintenant le code CSS


.inputText  {
	
background: url("/buttons/comment_button.png") no-repeat;
	
}


Résultat: le bouton apparait mais pas entièrement et je n'ai plus de lien pour mon bouton. Embêtant non.

En plus dans Google il y a très peu d'exemples complets
Bonjour,

Voilà le code définitif pour personnaliser son bouton submit:

La structure html


<input type="submit" name="submit" value="Submit Comment"  id="submit" onclick="return validation();" />


La CSS


#submit  {
	
color: #fff;
 font-size: 0;
 width: 157px;
 height: 32px;
 border: none;
 margin: 0;
 padding: 0;
cursor:pointer;
background: #0c0 url("../buttons/comment_button.png") 0 0 no-repeat;
	
}



J'ai eu du mal à trouver cette solution parce que sur Google il y a beaucoup de n'importe quoi
mais j'espère que cela servira pour d'autres.

Smiley biggrin
Sujet clos
Aller à