[Résolu] Centrer verticalement un formulaire dans une cellule d'un tb

Question

geeko

8 Sep 2010 à 22:21

Bonjour à tous !

J'ai un tableau qui affiche le résultat d'une requête SQL.
Sur chaque ligne, la dernière cellule affiche 2 liens qui permettent d'éditer la ligne en cours ou d'afficher une page pour le détails.
Pour éviter d'avoir des liens avec des paramètres (GET), j'ai opté pour une solution du genre de celle-ci :


<form name="myform_1" id="myform_1" action="mapage.php" method="post">
	<input type="hidden" name="op" id="op" value="card" />
	<input type="hidden" name="type" id="type" value="settings" />
	<input type="hidden" name="action" id="action" value="edit" />
	<input type="hidden" name="num" id="num" value="010" />
	<a href='javascript: document.getElementById("myform_1").submit();'>Lien 1</a>
</form>

Ce qui me donne un lien mais qui valide en fait un formulaire.

De plus j'en ai 2 dans la cellule :


<form name="myform_1" id="myform_1" action="mapage.php" method="post">
	<input type="hidden" name="op" id="op" value="card" />
	<input type="hidden" name="type" id="type" value="settings" />
	<input type="hidden" name="action" id="action" value="edit" />
	<input type="hidden" name="num" id="num" value="010" />
	<a href='javascript: document.getElementById("myform_1").submit();'>Lien 1</a>
</form>

<form name="myform_1" id="myform_2" action="<{$action_url}>" method="post">
	<input type="hidden" name="op" id="op" value="card" />
	<input type="hidden" name="type" id="type" value="block" />
	<input type="hidden" name="action" id="action" value="edit" />
	<input type="hidden" name="num" id="num" value="010" />
	<a href='javascript: document.getElementById("myform_2").submit();'>Lien 2</a>
</form>

Pour pouvoir les mettre l'un à coté de l'autre, j'ai utilisé des div.
Ce qui donne avec le tableau :


<td style="vertical-align: middle; text-align: center;" >
<div class='btn_1'>
<form name="myform_1" id="myform_1" action="mapage.php" method="post">
	<input type="hidden" name="op" id="op" value="card" />
	<input type="hidden" name="type" id="type" value="settings" />
	<input type="hidden" name="action" id="action" value="edit" />
	<input type="hidden" name="num" id="num" value="010" />
	<a href='javascript: document.getElementById("myform_1").submit();'>Lien 1</a>
</form>
</div>
<div class='btn_2'>
<form name="myform_1" id="myform_2" action="mapage.php" method="post">
	<input type="hidden" name="op" id="op" value="card" />
	<input type="hidden" name="type" id="type" value="block" />
	<input type="hidden" name="action" id="action" value="edit" />
	<input type="hidden" name="num" id="num" value="010" />
	<a href='javascript: document.getElementById("myform_2").submit();'>Lien 2</a>
</form>
</div>
</td>

Voici le CSS associé :


.btn_1 {
	display: block;
	float: left;
	vertical-align: middle;
}

.btn_2 {
	display: block;
	float: right;
	vertical-align: middle;
}

Dans FF, tout va bien.
Mais dans IE, non seulement les lignes ont une hauteur différente de FF (plus larges), mais en plus, les liens des formulaires ne sont pas verticalement centrés.

Si vous avez une suggestion, ou encore mieux une solution, je suis ouvert à toutes critiques !

Merci !
Modifié par geeko (09 Sep 2010 - 17:49)

Heyoan

9 Sep 2010 à 10:14

Salut,

ton utilisation d'un formulaire sans champ de saisie (et juste pour ne pas avoir des variables dans l'url) est déjà discutable mais utiliser du JavaScript pour le soumettre c'est obstrusif : si le JS est désactivé ça ne fonctionne plus !

Une proposition :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
table {
	width: 400px;
	border-collapse: collapse;
}
th, td {
	padding: 2px 4px;
	background: lavender;
	border: 1px solid #000;
	text-align: center;
}
th {
	background: midnightblue;
	color: #fff;
}
form {
	display: inline;
}
.lien {
	background: lavender;
	border: 1px solid lavender;
	color: indigo;
	text-decoration: underline;
	width: 50px;
	text-align: center;
	cursor: pointer;
}
.lien:hover,
.lien:focus,
.lien:active {
	color: mediumorchid;
}
</style>
</head>
<body>
<table>
	<tr>
		<th>Libellé</th>
		<th>Action</th>
	</tr>
	<tr>
		<td>Ceci est le libellé 1</td>
		<td>
			<form action="mapage.php" method="post"> 
				 <input type="hidden" name="op" value="card" /> 
				 <input type="hidden" name="type" value="settings" /> 
				 <input type="hidden" name="action" value="edit" /> 
				 <input type="hidden" name="num" value="010" />
				 <input type="submit" class="lien" value="Lien 1" />
			</form> 
			<form action="mapage.php" method="post"> 
				 <input type="hidden" name="op" value="card" /> 
				 <input type="hidden" name="type" value="block" /> 
				 <input type="hidden" name="action" value="edit" /> 
				 <input type="hidden" name="num" value="010" /> 
				 <input type="submit" class="lien" value="Lien 2" />
			</form> 
		</td>
	</tr>
	<tr>
		<td>Ceci est le libellé 2</td>
		<td>
			<form action="mapage.php" method="post"> 
				 <input type="hidden" name="op" value="card" /> 
				 <input type="hidden" name="type" value="settings" /> 
				 <input type="hidden" name="action" value="edit" /> 
				 <input type="hidden" name="num" value="020" />
				 <input type="submit" class="lien" value="Lien 3" />
			</form> 
			<form action="mapage.php" method="post"> 
				 <input type="hidden" name="op" value="card" /> 
				 <input type="hidden" name="type" value="block" /> 
				 <input type="hidden" name="action" value="edit" /> 
				 <input type="hidden" name="num" value="020" /> 
				 <input type="submit" class="lien" value="Lien 4" />
			</form> 
		</td>
	</tr>
</table>
</body>
</html>

Modifié par Heyoan (09 Sep 2010 - 13:43)

fvsch

9 Sep 2010 à 13:36

Hello,

Je trouve l'utilisation de formulaires en POST intéressantes si le simple fait de cliquer sur le lien effectue une action de type CRUD. Il vaut mieux éviter les liens avec des attributs GET, effectivement, car tout mécanisme qui parcours automatiquement les liens (un plugin du navigateur qui fait du prefetch, par exemple) déclencherait des actions non voulues par l'utilisateur. De plus utiliser un formulaire pour les actions qui modifient des données est une convention, autant la respecter, pourquoi pas en utilisant des paramètres dans des <input type="hidden">.

(Bien sûr, ça ne doit pas être la seule sécurité mise en place. Vérifier côté serveur que l'utilisateur a le droit d'effectuer l'action reste nécessaire.)

Deux remarques sur les liens de soumission du formulaire:

1. On n'écrit pas <a href="javascript:">. Si on veut associer une fonction à un élément HTML, éventuellement un lien (utile si on veut que cet élément puisse recevoir le focus...), on utilisera plutôt l'attribut onclick.

<a href="#" onclick="document.getElementById("myform_2").submit();">Hop</a>

2. Cela dit, Heyoan a raison de rappeler que conditionner l'utilisation du formulaire au support de JavaScript est une erreur, du moins si on n'est pas dans le cadre d'une application qui requiert le support de JavaScript pour de bonnes raisons (différentes de ce cas précis). Il existe des éléments HTML permettant d'envoyer un formulaire; les voici:

<input type="submit" value="Hop">
<button type="submit">Hop</button>
<input type="image" alt="Hop" src="/img/button-hop.png">

(L'exemple de Heyoan oublie d'utiliser type="submit", c'est sans doute une erreur d'inattention. Smiley cligne

)
Il est vrai que styler en CSS un élément INPUT de type submit ou button, ou un BUTTON (de type submit ou button) peut être un peu prise de tête. Mais en général ça ne pose pas trop de problèmes.

Pour la question de départ, il faudrait savoir ce que tu vises comme mise en page et ce que tu obtiens (captures d'écran, page en ligne...). Là c'est un peu flou, tu parles de hauteur différente car dans IE ça serait plus large (joli contresens Smiley cligne

)... et je n'ai pas compris si tu voulais mettre tes deux boutons côte-à-côte ou l'un sous l'autre.

S'il s'agit de les mettre côte-à-côte:
1. Si ce sont deux actions de natures différentes, peut-être utiliser deux colonnes différentes dans le tableau?
2. Sinon, les DIV sont inutiles, car tu peux appliquer tes styles aux éléments FORM directement. Et avant de songer à utiliser float, j'aurais tenté un display:inline des formulaires.
Modifié par Florent V. (09 Sep 2010 - 14:23)

Heyoan

9 Sep 2010 à 13:43

Florent V. a écrit :
(L'exemple de Heyoan oublie d'utiliser type="submit", c'est sans doute une erreur inattention. )

Yep ! C'est corrigé.

geeko

9 Sep 2010 à 16:06

L'exemple de Heyoan est visuellement exactement ce que j'ai mis en place.
Maintenant je vais refaire mon code avec vos conseilles.

En effet, je n'ai pas fondamentalement besoin du JS.

Florent, j'ai essayé de mettre dans 2 colonnes, mais même résultat avec ma mauvaise solution, je vais essayer avec celle de Heyoan.
Je ne peux pas mettre en ligne des captures d'écrans (données confidentielles, désolé !)

Merci à vous d'avoir pris le temps de réaliser des explications d'une telle qualité !
J'ai encore beaucoup de progrès à faire en matière de script coté client. (je suis + php, sh, vbs, etc.)

Smiley prie

Heyoan

9 Sep 2010 à 17:05

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne

geeko

9 Sep 2010 à 17:48

J'ai pas encore testé, mais cela devrait être ok.

Merci encore !

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Centrer verticalement un formulaire dans une cellule d'un tb