Bonjour
voila mon probleme,
J'ai une page qui est un formulaire et je ne vois pas comment je peux aligner les libellés et les champs à remplir en face autrement que par un tableau.
J'ai beaucoup lu que les tableaux ne doivent etre utilisé que pour des données 'tabulaires', Est-ce que les formulaire en font parti?
J'ai l'habitude de faire 1 tableau avec 1 ligne par donnée et 1 cellule pour le libellé + seconde cellule pour mon champs à remplir.
Comment faites vous pour aligner les libellés d'un coté et les champs de l'autre sans l'aide de tableau?
Merci
Version complète: sur le forum Webmaster Hub : mise en forme d'un formulaire
Pour ce qui est des tableaux pour les formulaires, c'est assez discutable d'apres ce que j'ai compris, en tout cas je sais que certains les utilisent tout de meme, comme sur http://www.hicksdesign.co.uk par exemple
Sinon as tu essayé de positionner tes champs et tes label ? je me demande si avec un positionement relatif tu n'arriverais pas obtenir quelque chose de correct... Sinon j'avais , mais je ne sais plus ou c'est bien dommage, qu'en utilisant 2 span (un pour les label l'autre pour les input) en utilisant les float, tu devais pouvoir reussir a faire quelque chose
@++
Sinon as tu essayé de positionner tes champs et tes label ? je me demande si avec un positionement relatif tu n'arriverais pas obtenir quelque chose de correct... Sinon j'avais , mais je ne sais plus ou c'est bien dommage, qu'en utilisant 2 span (un pour les label l'autre pour les input) en utilisant les float, tu devais pouvoir reussir a faire quelque chose
@++
CITATION(ElMoustiko @ lundi 12 juillet 2004, 10:31)
Pour ce qui est des tableaux pour les formulaires, c'est assez discutable d'apres ce que j'ai compris, en tout cas je sais que certains les utilisent tout de meme, comme sur http://www.hicksdesign.co.uk par exemple
je ne vois pas ou est le formulaire sur le lien que tu as donné.
Je vais essayer de creuser la question avec ton idée de span.
Si tu veux ajouter une reponse a un des articles tu as un formulaire, et bien c'est un tableau (sauf si a été changé depuis peu ! )
Sinon j'ai fait un petit test rapidement pour les formulaire j'en suis arrivé a un resultat assez correct, a creuser je pense et a ameliorer
C'est bien sur validé !
@++
Sinon j'ai fait un petit test rapidement pour les formulaire j'en suis arrivé a un resultat assez correct, a creuser je pense et a ameliorer
CODE
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="fr">
<head>
<title>Mise en forme d'un formulaire</title>
<style type="text/css">
fieldset {
width: 300px;
}
div.left {
width: 50%;
float: left;
}
div.left p {
text-align: right;
margin-right: 30px;
}
div.right {
width: 50%;
float: left;
}
</style>
</head>
<body>
<form action="login.php" method="post">
<fieldset>
<legend>Formulaire d'identification</legend>
<div class="left">
<p><label for="input1">Nom :</label></p>
<p><label for="input2">Mot de passe :</label></p>
<p><label for="input3">Email :</label></p>
</div>
<div class="right">
<p><input type="text" id="input1" name="nom" /></p>
<p><input type="password" id="input2" name="pass" /></p>
<p><input type="text" id="input3" name="email" /></p>
</div>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="fr">
<head>
<title>Mise en forme d'un formulaire</title>
<style type="text/css">
fieldset {
width: 300px;
}
div.left {
width: 50%;
float: left;
}
div.left p {
text-align: right;
margin-right: 30px;
}
div.right {
width: 50%;
float: left;
}
</style>
</head>
<body>
<form action="login.php" method="post">
<fieldset>
<legend>Formulaire d'identification</legend>
<div class="left">
<p><label for="input1">Nom :</label></p>
<p><label for="input2">Mot de passe :</label></p>
<p><label for="input3">Email :</label></p>
</div>
<div class="right">
<p><input type="text" id="input1" name="nom" /></p>
<p><input type="password" id="input2" name="pass" /></p>
<p><input type="text" id="input3" name="email" /></p>
</div>
</fieldset>
</form>
</body>
</html>
C'est bien sur validé !
@++
Plutôt que les tableaux en eux-mêmes, c'est la manière de s'en servir qui est dangereuse, ici.
On peut être accessible en utilisant des tableaux sans imbrication pour des formulaires simples. Le principal risque est que les <label> des contrôles soient dissociés de ceux-ci lorsque le tableau est linéarisé (rendu dans l'ordre brut des éléments HTML).
Par exemple, le tableau suivant, qui place les <label> au dessus des contrôles:
... donnera un résultat aberrant une fois linéarisé :
label1
label2
contrôle 1
contröle 2
En revanche :
se linéarise correctement...
label 1
contrôle 1
label 2
contrôle 2
Mais il existe de nombreuses solutions CSS. Tu peux par exemple utiliser une liste de définition (très à la mode
) sur le principe :
avec en CSS un float:left sur les <dt>...
On peut être accessible en utilisant des tableaux sans imbrication pour des formulaires simples. Le principal risque est que les <label> des contrôles soient dissociés de ceux-ci lorsque le tableau est linéarisé (rendu dans l'ordre brut des éléments HTML).
Par exemple, le tableau suivant, qui place les <label> au dessus des contrôles:
CODE
<table>
<tr>
<td>label 1</td>
<td>label 2</td>
</tr>
<tr>
<td>contrôle 1</td>
<td>contrôle 2</td>
</tr>
</table>
<tr>
<td>label 1</td>
<td>label 2</td>
</tr>
<tr>
<td>contrôle 1</td>
<td>contrôle 2</td>
</tr>
</table>
... donnera un résultat aberrant une fois linéarisé :
label1
label2
contrôle 1
contröle 2
En revanche :
CODE
<table>
<tr>
<td>label 1</td>
<td>contrôle 1</td>
</tr>
<tr>
<td>label 2</td>
<td>contrôle 2</td>
</tr>
</table>
<tr>
<td>label 1</td>
<td>contrôle 1</td>
</tr>
<tr>
<td>label 2</td>
<td>contrôle 2</td>
</tr>
</table>
se linéarise correctement...
label 1
contrôle 1
label 2
contrôle 2
Mais il existe de nombreuses solutions CSS. Tu peux par exemple utiliser une liste de définition (très à la mode
) sur le principe :CODE
<dl>
<dt>label 1</dt>
<dd>contrôle 1</dd>
<dt>label 2</dt>
<dd>contrôle 2</dd>
etc.
</dl>
<dt>label 1</dt>
<dd>contrôle 1</dd>
<dt>label 2</dt>
<dd>contrôle 2</dd>
etc.
</dl>
avec en CSS un float:left sur les <dt>...
Wé bah ca m'apprendras a aller vite tien ! sans tableaux j'ai le meme probleme, le label sont dissocié des input si j'enleve les css, c'est pas tres bon ca ! donc en effet les listes de definition devraient apporter un plus pour ce genre de choses ! Pas difficile a mettre en place je pense !
@++
@++
Pour l'accessibilité, meme si je sujet est fort interessant, ce n'est pas le probleme dans mon projet...
Notre gros probleme c'est que l'application (c'est une appli, pas un site, nous imposons le navigateur a nos utilisateurs --> pour une filiale, l'angleterre, ils sont encore a 95% sur Nestcape 4.51
) évolue beaucoup en fonctionnalité mais les responsables ne veulent pas que les pages s'alourdissent en taille pour ne pas pénaliser les temps de réponse.
Donc j'ai la fermé intention de maximiser l'utilisation des css... (je peux m'en donner a coeur-joie maintenant que l'abandon de netscape 4.51 a été validé :up: )
merci pour votre aide, je vais regarder cela cette apres midi.
Notre gros probleme c'est que l'application (c'est une appli, pas un site, nous imposons le navigateur a nos utilisateurs --> pour une filiale, l'angleterre, ils sont encore a 95% sur Nestcape 4.51
) évolue beaucoup en fonctionnalité mais les responsables ne veulent pas que les pages s'alourdissent en taille pour ne pas pénaliser les temps de réponse.Donc j'ai la fermé intention de maximiser l'utilisation des css... (je peux m'en donner a coeur-joie maintenant que l'abandon de netscape 4.51 a été validé :up: )
merci pour votre aide, je vais regarder cela cette apres midi.
CITATION(ElMoustiko @ lundi 12 juillet 2004, 10:31)
Sinon j'avais , mais je ne sais plus ou c'est bien dommage, qu'en utilisant 2 span (un pour les label l'autre pour les input) en utilisant les float, tu devais pouvoir reussir a faire quelque chose
Voir à nouveau chez les pompeurs : Techniques et astuces pratiques pour une mise en page CSS
LaurentDenis a donné le bon article.
Voici celui d'ALA.
Cette solution fonctionne très bien, et ne nécessite pas l'utilisation de tableaux, totalement obsolètes dans ce cas.
Les CSS permettent de tout faire !
A+
Loupilo
Voici celui d'ALA.
Cette solution fonctionne très bien, et ne nécessite pas l'utilisation de tableaux, totalement obsolètes dans ce cas.
Les CSS permettent de tout faire !
A+
Loupilo
loupilo : celui de laurent est la traduction en francais de ta source sur ALA
Bonjour,
à tout hasard, va voir ce tutoriel, je l'ai trouvé hier sans en avoir l'utilité pour l'instant, donc je ne sais pas ce que ça vaut, en tout cas il m'a paru intéressant, dans la mesure où il part d'un formulaire de base qu'il transforme en quelque chose d'ergonomique.
tutoriel/formulaire
Tu y trouveras peut-être ce que tu cherches.
à tout hasard, va voir ce tutoriel, je l'ai trouvé hier sans en avoir l'utilité pour l'instant, donc je ne sais pas ce que ça vaut, en tout cas il m'a paru intéressant, dans la mesure où il part d'un formulaire de base qu'il transforme en quelque chose d'ergonomique.
tutoriel/formulaire
Tu y trouveras peut-être ce que tu cherches.
CITATION(Vincent @ lundi 12 juillet 2004, 13:23)
loupilo : celui de laurent est la traduction en francais de ta source sur ALA ;)
Oui bien sur ;)
J'ai donné le lien original du «bon article».
A+
Loupilo
CITATION(MissMonde @ lundi 12 juillet 2004, 13:37)
Très intéressant, ce tutoriel !
Juste quelques fonctionnalités de détails à vérifier car peut-être mal supportées ici ou là, comme optgroup et l'aide contextuelle avec les title ?
L'auteur propose d'ailleurs d'autres ressources tout aussi intéressantes...
Merci pour le lien
Voici le lien qui regroupe tout ce que vous avez déjà donné, et même mieux :
Formidablement beau.
Toutes les solutions pour styler [de façon standard] les formulaires.
A+
Loupilo
Formidablement beau.
Toutes les solutions pour styler [de façon standard] les formulaires.
A+
Loupilo
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.