OVH Cloud OVH Cloud

Conseils de mise en page de formulaires

13 réponses
Avatar
Damien
Bonjour à tous,
En plus d'être débutant PHP et "chteumeul propre", je suis nul en
graphisme... Donc j'ai un peu de mal, pour une appli web que je
développe, à décider comment organiser au mieux les champs d'un gros
formulaire sur une page.

Où vaut-il mieux mettre la légende d'un champ ? Au dessus avec un <br> ?
A gauche, mais là il faut un <table> pour aligner les champs ?

Doit-on utiliser la balise <label> que j'ai vu sur www.opquast.org ?
Est-ce que cela apporte réellement quelque chose ?

Jusque là, j'avais essayé de mettre un petit div autour du couple
label-input, avec un BR entre, pour pouvoir mettre par exemple 2 champs
sur la même ligne. Autant sous FF ça marche impec, autant sous IE les
deux boites se chevauchent :( (malgré le doctype).

Merci d'avance pour toutes vos idées, pistes, liens !
@+
Damien
---
"Tant qu'il y a de la vie, il y a de quoi boire"

10 réponses

1 2
Avatar
Thibaut Allender
On 21/01/2005 18:01, Damien wrote :
Où vaut-il mieux mettre la légende d'un champ ? Au dessus avec un <br> ?



un label en display: block, c'est mieux, dans ce cas

A gauche, mais là il faut un <table> pour aligner les champs ?



un label en float: left, c'est mieux aussi :)

Doit-on utiliser la balise <label> que j'ai vu sur www.opquast.org ?



c'est conseillé

Est-ce que cela apporte réellement quelque chose ?



étant donné qu'une page web n'est pas un imprimé, oui

Jusque là, j'avais essayé de mettre un petit div autour du couple
label-input, avec un BR entre, pour pouvoir mettre par exemple 2 champs
sur la même ligne. Autant sous FF ça marche impec, autant sous IE les
deux boites se chevauchent :( (malgré le doctype).



<label for="test">blah</label>
<input type="text" name="test" id="test">

css :

label {
float: left;
width: 10em;
}

ça doit le faire, que ça soit avec IE ou FF

pas besoin de div conteneur, sauf besoin specifique

--
thibaut allender | freelance | http://capsule.org
Avatar
newdb
Damien wrote:
Donc j'ai un peu de mal, pour une appli web que je
développe, à décider comment organiser au mieux les champs d'un gros
formulaire sur une page.
Merci d'avance pour toutes vos idées, pistes, liens !



et hop !
<http://www.fastclemmy.com/index.php?viewlog„_formidablement-beau>

--
@@@@@
E -00 comme on est very beaux dis !
' `) /
|_ =="
Avatar
Damien
denisb a écrit :
Damien wrote:

Donc j'ai un peu de mal, pour une appli web que je
développe, à décider comment organiser au mieux les champs d'un gros
formulaire sur une page.
Merci d'avance pour toutes vos idées, pistes, liens !




et hop !
<http://www.fastclemmy.com/index.php?viewlog„_formidablement-beau>



Woooooooooooo... Le Graal ! :) C'est beau la technologie moderne :)

L'un des sites mentionne des problèmes sous NS6 et d'anciens Opéra,
c'est... grave docteur ? J'ai eu récemment une personne qui était sous
NS4... Et qui ne voulait pas comprendre qu'il fallait envisager d'en
bouger... :(

Merci encore !
@ bientôt,
Damien
---
"So you're just taking your caffeine level past the medical definition
of 'stimulant' into the 'poisons' category?"
Bastard Operator From Hell
Avatar
newdb
Damien wrote:
denisb a écrit :
> <http://www.fastclemmy.com/index.php?viewlog„_formidablement-beau>
Woooooooooooo... Le Graal ! :) C'est beau la technologie moderne :)
L'un des sites mentionne des problèmes sous NS6 et d'anciens Opéra,
c'est... grave docteur ?



bah. ça se soigne (parait-il...)

J'ai eu récemment une personne qui était sous
NS4... Et qui ne voulait pas comprendre qu'il fallait envisager d'en
bouger... :(



si c'est
[] ton plus gros client
[] ton inspecteur des impôts
[] l'amour de ta vie
[] the ghost of the lizzard king (himself)
[] le buraliste que c'est le seul ouvert le 1er mai à 23h45
[] moi

tu fais une feuille css alternative

--
@@@@@
E -00 comme on est very beaux dis !
' `) /
|_ =="
Avatar
Damien
denisb a écrit :
(snip)
bah. ça se soigne (parait-il...)



LOL :D


J'ai eu récemment une personne qui était sous
NS4... Et qui ne voulait pas comprendre qu'il fallait envisager d'en
bouger... :(




si c'est
[] ton plus gros client
[] ton inspecteur des impôts
[] l'amour de ta vie
[] the ghost of the lizzard king (himself)
[] le buraliste que c'est le seul ouvert le 1er mai à 23h45
[] moi


[x] ma bonne résolution d'aimer mon prochain et surtout ma pochaine


tu fais une feuille css alternative



Avec un pitit lien style "si le formulaire ne s'affiche pas correctement
cliquez ici" ? Bonne idée.

Merci encore ;)
Damien
---
"D'après les statisticiens, si on laisse des millions de singes tapper
n'importe quoi à la machine, l'un d'eux finira par reproduire une oeuvre
de Shakespeare.

Depuis le développement d'internet, on sait que c'est faux."

Anonyme
Avatar
Thibaut Allender
On 22/01/2005 9:09, Damien wrote :
J'ai eu récemment une personne qui était sous NS4... Et qui ne
voulait pas comprendre qu'il fallait envisager d'en bouger... :(



c'est ASM ? :)

--
thibaut allender | freelance | http://capsule.org
Avatar
lolo
Bonjour à tous,
En plus d'être débutant PHP et "chteumeul propre", je suis nul en
graphisme... Donc j'ai un peu de mal, pour une appli web que je développe,
à décider comment organiser au mieux les champs d'un gros formulaire sur
une page.



si tu codes en php tes formulaires, alors tu as des scripts qui t'allègent
la gestion des formulaires, de leur validation,...
Tu as
- PEAR::HTML_QuickForm
http://www.php-tools.de/site.php, tu as patForms.


Où vaut-il mieux mettre la légende d'un champ ? Au dessus avec un <br> ? A
gauche, mais là il faut un <table> pour aligner les champs ?

Doit-on utiliser la balise <label> que j'ai vu sur www.opquast.org ?
Est-ce que cela apporte réellement quelque chose ?



A mon avis oublie le (sale) <br>. utilise plutot les <label>, <fieldset>.
Outre que pour l'accessibilité c'est mieux (eh oui tout le monde n'a pas
10/10 de vision ;)), cela te permet si tu dois changer le design, de le
faire le plus simplement juste en modifiant un peu ta CSS.
Un exemple pas mal (essaie les différents styles):
http://www.themaninblue.com/experiment/InForm/

Jusque là, j'avais essayé de mettre un petit div autour du couple
label-input, avec un BR entre, pour pouvoir mettre par exemple 2 champs
sur la même ligne. Autant sous FF ça marche impec, autant sous IE les deux
boites se chevauchent :( (malgré le doctype).



Bahhh en utilsant un code propre de tes formulaires tu peux oublier ce genre
de trucs qui à part alourdir le code sont inutiles ;)

Allez pour finir un dernier lien :
http://www.quirksmode.org/dom/domform.html.
Là c'est pas mal, ca utilise pas mal le DOM pour le formulaire et ca peut
peut-être un jour t'aider à simplifier tes formulaires si tu as des données
redondantes par ex.(profites en pour regarder le reste du site, il y a plein
de bonnes choses)
Avatar
newdb
Damien wrote:

denisb a écrit :
> tu fais une feuille css alternative
Avec un pitit lien style "si le formulaire ne s'affiche pas correctement
cliquez ici" ? Bonne idée.



mieux (pire) :
tes styles pour le formulaire tu les met dans une feuille css
tréjolipourbrauzeurmodern que tu appelle avec :

<link rel="STYLESHEET" type="text/css" media="all" href="menu.css">

media="all" fait que nn4 ne lira pas ce fichier et affichera les
portions concernées en html 'brut' (non stylé).

tu peux (même) inclure dans ta page un <div></div> avec un texte
explicatif pour les surfeurs en nn4, accompagné (ouais !!!) d'une image
écran des formulaires vus sous firefox. tu passe ce <div> en
display:none dans ta feuille css appellée avec le lien media="all" (donc
un style lisible par les navigateurs modernes qui ne l'afficheront pas).

hein ! hein ! c'est pas génial ça ?

--
@@@@@
E -00 comme on est very beaux dis !
' `) /
|_ =="
Avatar
ASM
denisb a ecrit :

tu peux (même) inclure dans ta page un <div></div> avec un texte
explicatif pour les surfeurs en nn4, accompagné (ouais !!!) d'une image
écran des formulaires vus sous firefox. tu passe ce <div> en
display:none dans ta feuille css appellée avec le lien media="all" (donc
un style lisible par les navigateurs modernes qui ne l'afficheront pas).

hein ! hein ! c'est pas génial ça ?



si, si, c'est plein de génialités
mais bof bof avec mon rtc :-(

et puis, merci du peu !
si je m'balade avec NC4 et pas les autres, y a p't'être une raison ?
ce n'est pas la peine de me faire la nique en plus :-/


--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************
Avatar
ASM
Thibaut Allender a ecrit :

On 22/01/2005 9:09, Damien wrote :
> J'ai eu récemment une personne qui était sous NS4... Et qui ne
> voulait pas comprendre qu'il fallait envisager d'en bouger... :(

c'est ASM ? :)



si c'est moi dont au sujet duquel il est question ...

Thibault, tu peux dire à Damien que les dons de machines récentes
je les accepte et s'il peut faire qque chose dans ce sens ?

Si ce n'était pas de moi qu'on causait
pas ni pwoblem'
mon offre tient quand même :-)

--
*******************************************************
Stéphane MORIAUX et son vieux Mac
*******************************************************
1 2