[résolu] création de bouton image

[julkien]

bonjour tous le monde

 

alors voilà je cherche et je ne comprend pas, d'habitude j'utilise une image pour faire un jolie bouton, mais j'ai décider de mettre une image dans un bouton.

j'ai réussi mais je ne comprend pas pourquoi je n'arrive pas a placer ses trois boutons sur la même ligne.

 

		echo '<div id="map"><br /><center>

<FORM action="index.php?mod=tmmod&ac=edit&int_id='.$row1['id'].'" method="post">
<input type="hidden" name="editer" value="">
<BUTTON name="editer" type="submit" ><IMG src="modules/tmmod/images/editer.png" alt=editer > </BUTTON>
</form>	
<FORM action="index.php?mod=tmmod&ac=maj&int_id='.$row1['id'].'" method="post">
<input type="hidden" name="changer" value="">
<BUTTON name="changer" type="submit" ><IMG src="modules/tmmod/images/changer.png" alt=changer > </BUTTON>
</form>	
<FORM action="index.php?mod=tmmod&ac=suppruser&int_id='.$row1['id'].'" method="post">
<input type="hidden" name="supprimer" value="">
<BUTTON name="supprimer" type="submit" ><IMG src="modules/tmmod/images/supprimer.png" alt=supprimer > </BUTTON>
</form>
			  <br /></center></div><br />';

 

Merci a ceux qui sauront me dire se qui ne va pas...

 

nota: ses boutons s'affichent les uns en dessous des autres alors que je préfèrerais qu'il s'affichent sur la même ligne.

Modifié le 28 mai 2008 par julkien

[Greywolf]

la balise <form> est une balise de type block et non en ligne (inline) => les 3 formulaires composés chacun d'un bouton apparaissent les uns en dessous des autres.

 

Tu peux changer le type de display via ton style css

<form style="display:inline;">

 

Pourquoi faire 3 formulaires d'un seul bouton et non 1 formulaire avec 3 boutons ? (OK, la cible du formulaire est différente en fonction du bouton)

[KewlCat]

Merci a ceux qui sauront me dire se qui ne va pas...

Trois formulaires différents avec la même action ?

Dans chaque formulaire, deux éléments différents avec le même attribut name ?

Un input caché avec une value à vide ?

Des attributs dont la valeur n'est pas entourée de guillemets ?

L'utilisation de balises dépréciées ?

L'utilisation de br pour remplacer un padding ?

Des button de type submit contenant des images à la place d'input de type "image" ?

Des éléments qui devraient être définis en inline au lieu de block ?

 

-- edit --

La cible des formulaires est toujours la même (index.php) c'est juste les paramètres qui changent, donc rien qui ne soit paramétrable de la même manière avec le "name" des éléments utilisés pour soumettre le formulaire...

[julkien]

Heuuu salut Kewlcat, salut Greywolf,

 

Pour faire simple j'ai tout bonnement mis les trois boutons dans un tableau

 

Merci pour toutes ses infos en tout cas

 

(même si j'ai pas tout compris) ^^

[Dylav]

Lis un peu ce que t'apprend Greywolf...

 

L'utilisation d'un tableau est la solution de facilité des années 90 ! Elle déroge complètement à l'usage réservé à la balise <table>. C'est quand même dommage.

[KewlCat]

L'utilisation d'un tableau est la solution de facilité des années 90 !

Cela dit, ça cadre bien avec les balises en majuscules et les valeurs d'attributs sans guillemets... Dommage que le fichier ne s'appelle pas "index.htm" sinon on aurait eu la totale

 

Explications :

Trois formulaires différents avec la même action ?

Les trois formulaires "pointent" sur la page index.php avec des paramètres d'URL différents. Sachant que ces paramètres peuvent faire l'objet d'un <input> et être récupérés dans le _POST au lieu du _GET (vu que de toute façon il y aura un _POST) on peut facilement s'épargner les trois <form> pour n'en garder qu'un.

 

Dans chaque formulaire, deux éléments différents avec le même attribut name ?

Les champs cachés (dont la valeur est "", ce qui les rend inutile, au passage) ont le même attribut "name" que le bouton or le bouton va lui aussi générer une valeur dans le _POST ce qui fait que tu auras deux valeurs de _POST qui correspondent à ce nom. Comment vas-tu reconnaitre laquelle est laquelle ?

 

Un input caché avec une value à vide ?

A quoi sert le champ caché avec un value="" ?

 

Des attributs dont la valeur n'est pas entourée de guillemets ?

Ca, c'est pour l'attribut alt des images.

 

L'utilisation de balises dépréciées ?

Ca c'est pour la balise <center> qu'on peut remplacer par un style="text-align: center;" dans la <div> qui contient les boutons.

 

L'utilisation de br pour remplacer un padding ?

On obtient la même chose avec un attribut de style "padding-top: 1em;" ou "padding-bottom: 1em;" sur la div. Pour le br qui se trouve après la div on utilisera un "margin-bottom". L'unité "em" représente la hauteur de ligne. Sauter une ligne revient à espacer les éléments de 1em.

 

Des button de type submit contenant des images à la place d'input de type "image" ?

Il existe un type d'input "image" qui permet d'éviter l'inclusion d'images dans des <button>...

 

Des éléments qui devraient être définis en inline au lieu de block ?

Ce sujet a déjà été abordé (même si je ne suis pas partisan de donner une apparence physique "visible" à un form, pour moi c'est plutôt le rôle d'un fieldset et le form devrait rester une entité "logique" invisible...)