[HTML] Positionnement des élements d'un formulaire

**cronos6** · 29/07/2006, 14h41

bonjour,

lorsque je développais des applications web, j'avais toujours pour habitude de positionné les éléments de mes formulaires à l'aide de tableau, les colonnes me servait pour le positionnement :p

J'ai cru comprendre que ce n'était pas réellement du XHTML ou du moins que ça n'était pas propre, qu'il vallait mieux utiliser les div.

J'ai donc fait l'essai, et voilà ce que ça donne : http://img507.imageshack.us/img507/9...ntfinalqs8.jpg

Mais au final, je me demande si c'est réellement mieux car cela simplifie peut etre la page html, mais ça complique le css, voici mon exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 #milieu_long_centre
{
width : 794px;
padding: 5px;
background-color: #948BDF;
margin-bottom: 20px;
text-align:center;
}
 
#milieu_long
{
width : 794px;
padding: 5px;
background-color: #948BDF;
margin-bottom: 20px;
text-align:left;
}
 
#milieu_court
{
width : 300px;
padding: 5px;
background-color: #948BDF;
margin: 0px 0px 20px 250px;
text-align:center;
}
 
#gauche
{
width : 100px;
margin-bottom: 20px;
padding: 5px;
background-color: #948BDF;
text-align:center;
float:left;
}
 
#gauche_milieu
{
width : 100px;
margin: 0px 80px 20px 0px;
padding: 5px;
background-color: #948BDF;
text-align:center;
float:left;
}
 
#droite
{
width : 100px;
margin-left: 494px;
margin-bottom: 20px;
padding: 5px;
background-color: #948BDF;
text-align:center;
float:right;
}
 
#droite_milieu
{
width : 100px;
margin-left: 600px;
margin-bottom: 20px;
padding: 5px;
background-color: #948BDF;
text-align:center;
float:right;
}

et c'est une version simplifié parce que si je voulais avoir des "droite" d'une autre taille, aligné différement... ça impliquerait plus de balises

Donc ma question est : faut il abandonné la mise en forme tableau pour la version div? Parce que la version DIV me semble un peu fastidieuse, il est bien plus simple d'appliqué un propriété à un élément d'un formulaire directement dans le formulaire

o_O

**lodan** · 29/07/2006, 17h05

C'est un choix en fait et surtout quelles infos mets-tu dedans.

Nous avons traité le sujet ici
et aussi ici

**cronos6** · 29/07/2006, 21h23

Merci pour ces informations.

Je vais donc me lancer dans une présentation de type div mais avec les valeurs de type "tab" de la propriété "display", puis je me ferais un avis ensuite.

**lodan** · 29/07/2006, 22h20

Explique "tab" "display"

C'est quoi ?

CSS ?

**Kerod** · 29/07/2006, 22h25

Display c'est une propriété de style qui permet de positionner l'élément.
Par exemple display: none n'affiche rien, inline affiche tout sur la même ligne et il y a plein d'autre...Pour en savoir plus google

**masu** · 31/07/2006, 09h28

Pour des formulaires disposé en css, je te propose ce tuto. Il est plutot bien fait

.

**lodan** · 31/07/2006, 15h53

Merci MASU, là c'est très clair, je diffuse ce lien qui permet de bien comprendre.

Je voulais un positionnement de curseur, je me retrouve avec le CSS qui fait le café, je n'ai plus qu'à allez chercher les croissants.

**lodan** · 01/08/2006, 08h43

Dans l'exccellent tuto que Masu à poster précédemment, il présente la fontion "title" pour avoir une aide contextuelle lorsque l'on passe sur un input par exemple.

La syntaxe est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<label for="nom" title="Veuillez saisir votre nom en lettres majuscules" class="oblig">* Nom :</label>

Ce qui est important sur cette ligne c'est le "title"

Je trouve que cela améliore l'ergonomie de mon site alors je fais la même chose et je mets :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<label for="type" title="Veuillez choisir un type de favoris" class="oblig">

Mais autant dans le tuto ça fonctionne, autant sur mon site, il ne se passe rien.

Faut-il associé "title" à autre chose ?

**masu** · 01/08/2006, 09h28

Non, tu peu mettre le title sur le label et/ou sur le input.
L'extrait de code que tu donne semble un peu court label n'est pas un element vide:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<label for="type" title="Veuillez choisir un type de favoris" class="oblig">type</label><input type="text" name="type" id="type" title="Veuillez choisir un type de favoris" />

**lodan** · 01/08/2006, 09h46

Oui pardon, je n'avais pas pensé que cela pouvait être important

Donc voir ce qu'il y a dans le tuto

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<label for="nom" title="Veuillez saisir votre nom en lettres majuscules" class="oblig">* Nom :</label>

et voici ce que j'ai mis dans mon programme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<label for="type" title="Veuillez choisir un type de favoris" class="oblig">*Type :</label>

Tu vois, je n'ai pas de différence flagrante.

**masu** · 01/08/2006, 10h00

Le code HTML que tu donne n'a aucun probleme.

Aurait tu par hasar des element en zindex par dessu ou autre qui pourrai gener?
Peu etre un lien qui entoure tout ca (j'en verrai pas l'utilité mais bon)?

Peu tu donner un peu plus de code ou donner un lien vers ta page ?

**lodan** · 01/08/2006, 10h18

Hélas pour l'instant, j'en suis à la constitution des normes de programmation de mon projet, donc tout est fait en local.

Voici mon code dans mon source :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{include file='header.html'}
 
<form name="page" id="table" action="{$current_page}" method="post" onsubmit="return validateForm(this);">
 
<input type="hidden" name="id_trt" value="{$table.id_trt}"
 
	<div id="titreForm">{$demande_trt} un Favori
    </div>
	<div id="corpForm">
 
		<fieldset id="formulaire">
		<legend>Saisie</legend>
 
		{if  $msg_trt!=""}
		<h4 align="center"><font color="red"><blink><i>{$msg_trt}</i></blink></font></h4>
		{elseif $demande_trt=="supprimer"}
			<h4 align="center"><font color="red"><blink><i>Demande de suppression en cours</i></blink></font></h4>
		{else}
		<br />
		{/if}
		<p>
			<label for="type" title="Veuillez choisir un type de favoris" class="oblig">*Type :</label>
			{html_options name="favoris_id" options=$favoris selected=$table.favoris_id}
		</p>
		<p>
			<label for="libelle" title="Veuillez saisir un libellé explicite" class="oblig">*Libellé :</label>
			<input type="text" name="libelle" size="50" value="{$table.libelle}" onfocus="this.className='focus';" onblur="this.className='normal';" alt=" nom : Libellé ; test :  ; obligatoire:true">
			<span class="legende">ex : 'Annuaire des associations de Santé'</span>
		</p>
		<p>
			<label for="lien" title="Veuillez saisir un lien vers un site Internet" class="oblig">*Lien :</label>
			<input type="text" name="lien" size="50" maxlength="75" value="{$table.lien}" onfocus="this.className='focus';" onblur="this.className='normal';" alt=" nom : Lien ; test :  ; obligatoire:true">
			<span class="legende">ex : 'www.site.com'</span>
		</fieldset>
	</div>
 
 
{include file='boutonsBas.html'}
 
</form>

Merci

**masu** · 01/08/2006, 10h38

premeire chose met un DTD a ton document, c'est bien mieu et pas compliqué

par exemple rajoute ca au debut de ton document

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Au survol de labels on a bien l'infobulle qui s'affiche. Maintenant si tu en veu une sur l'input il faur recopier l' title dans l'input aussi.
Tu a une balise non fermée aussi l'input hidden.
le h4 blink i vide tu oublie (surtout le blink et le i)
tu n'a pas l'id sur tes input en rapport avec le for de tes labels
pas de id ou du moins pas de name et id différent pour le form (attention j'ai bien précisé pour le form)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<form name="page" id="page" action="" method="post" onSubmit="return validateForm(this);">
  <input type="hidden" name="id_trt" value="1">
  <div id="titreForm">Modifier un Favori </div>
  <div id="corpForm">
    <fieldset id="formulaire">
    <legend>Saisie</legend>
    <p>
      <label for="type" title="Veuillez choisir un type de favoris" class="oblig">*Type :</label>
      <select name="favoris_id" onFocus="this.className='focus';" onBlur="this.className='normal';" title="Veuillez choisir un type de favoris" id="type">
        <option>---</option>
        <option label="Banques" value="7">Banques</option>
        <option label="Vie pratique (Lyon)" value="8">Vie pratique (Lyon)</option>
      </select>
    </p>
    <p>
      <label for="libelle" title="Veuillez saisir un libellé explicite" class="oblig">*Libellé :</label>
      <input type="text" name="libelle" id="libelle" size="50" value="AMELI" onFocus="this.className='focus';" onBlur="this.className='normal';" alt=" nom : Libellé ; test :  ; obligatoire:true" title="Veuillez saisir un libellé explicite">
      <span class="legende">ex : 'Annuaire des associations de Santé'</span> </p>
    <p>
      <label for="lien" title="Veuillez saisir un lien vers un site Internet" class="oblig">*Lien :</label>
      <input type="text" name="lien" id="lien" size="50" maxlength="75" value="www.ameli.fr" onFocus="this.className='focus';" onBlur="this.className='normal';" alt=" nom : Lien ; test :  ; obligatoire:true" title="Veuillez saisir un lien vers un site Internet">
      <span class="legende">ex : 'www.site.com'</span>
    </fieldset>
  </div>
  <div id="piedForm">
    <input type="submit" name="Valider" value="Valider">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" name="Miseajour" value="Mise à jour">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" name="Retour" value="Retour">
  </div>
</form>

---------------------------------------------
edit: pas d'infobulle sur le select sous iE

**lodan** · 01/08/2006, 12h02

Merci

**masu** · 01/08/2006, 14h12

Envoyé par pierre3

Y a-t-il une longeur maximum pour un title.
Par exemple mon title sur "Pensez bien à tenir compte...' se présente comme ceci :

Puis-je avoir toute ma ligne ou faire un changement de ligne ?

Sinon, mes bulles fonctionnent

Oui, il y a une longueur maximum, elle depend du navigateur. Pas de moyen de donner un style ou saut de ligne ou quoi que ce soit, c'est tout le navigateur qui gere.

127.0.0.1 c'est sur ta machine en local ce genre d'adresse.

-------------------------------------
edit: apparement 67 caracteres sous IE et ff.C'est etranges qu'ils soit tombés d'aacord pour une foi

**lodan** · 01/08/2006, 15h49

Bon ce sera la seule déception sur ce post.

Merci, pour le reste c'est pile poil.

**cronos6** · 02/08/2006, 03h02

Je me rend compte qu'il n'a jamais été dit qu'il fallait utiliser les div à la place des tableaux dans les formulaire.
Pour structurer les éléments d'une page (menu, haut, corps, bas) c'est normal, mais pas pour un formulaire.
Je me suis cassé la tête à trouver une nouvelle façon de faire alors qu'au final il vaut mieux garder la présentation par tableau qui est beaucoup plus facile que de gérer des div.

**lodan** · 02/08/2006, 10h11

Je ne sais pas si on s'est compris toujours est-il que les tableau c'est pour les données tabulaires. Pour le reste, présentation, menu et autres joyeusetés du genre, pas de tableau.

Si tu as bien lu et suivi les liens qui t-on été fourni, tu as du trouver ceci :

En quoi la mise en page par par tableaux doit-elle être évité

Avec CSS c'est possible : un exemple

Ou encore Un tableau d'allure plaisante

Après tout cela les tableaux sont utilisés au stric minimum.

**cronos6** · 02/08/2006, 11h02

J'ai déjà suivi lu tous ce que tu nous as donné, d'ailleur grand merci.

Mais dans les exemples donné, les formulaires sont très simpliste, tout est aligné verticalement. Il est clair que pour ce genre de formulaire il n'y a pas besoin de tableau.
Mais les formulaires que je crée sont bien plus complexes que ça et demande des alignements bien préci, bien plus précis que left, middle ou right. Et dans ce cas les tableaux sont à proscrire à mon avis.

Ou alors je peux utiliser les div, mais dans ce cas j'incorpore les style directement à l'intérieur de la div et non plus en appelant un style (class ="...").
Parce que chaque élément de mon formulaire a besoin de propriété différente, un élement peut avoir besoin d'être d'une couleur, aligné différemment, d'une taille différente.... ce qui multiplie les balises pouvant arrivée jusqu'a une vingtaine de balises juste pour positionné des élements dans un formulaire.

De toute façon, le css n'a t-il pas été conçu pour simplifier les éléments qui n'écessitent les même propriété? Hors les éléments de mes formulaires non pas les même propriétés, je peux donc me permettre d'incorporer le style dans les div (style="background-color:red...;")

**lodan** · 02/08/2006, 11h27

Oui dans ce cas et tu peux avoir une base en css et un complément dans ton code.

Mais ce doit-être rare d'avoir ce genre de besoin

[HTML] Positionnement des élements d'un formulaire

HTML

Discussions similaires

Partager

Partager