Les descriptions des champs d'un formulaire (plus facile à effacer à l'écran que sur du papier) pourraient-elles figurer, dans certains cas, à l'intérieur de ceux-ci, quitte à disparaître (avec le «focus») lors de leur activation par la touche tabulation ?

Bien que les constructeurs semblent s'ingénier, avec la complicité du W3C, à nous imposer des complications tendant, par exemple, à nous faire cliquer à coté des champs pour les activer, de telles possibilités parraissent accessibles avec des formes plus ramassées...

Malheureusement, si les versions les plus récentes de FireFox, Opéra et Safari autorisent encore cette fonctionnalité (on pourrait souhaiter que le rechargement des pages rétablisse le questionnaire dans son état initial), celle-ci parait plus difficile à obtenir avec Internet Explorer 6 ou 7. Comment faire pour retrouver, non seulement le focus, mais encore le trait clignotant correspondant sur ces navigateurs ?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>Formulaire</title>
<style type="text/css">
body {margin:0px;padding:40px;font:18px Georgia,Garamond,Serif;text-align:center;background:#ffc;color:#600}
#page {display:block;margin:0px auto;padding:20px;border:0px;width:320px;background:#c96}
h1 {margin:15px;padding:0px;font-weight:bold;font-size:130%}
span  {font-size:80%}
input {margin:7px;padding:3px;border:1px solid #000;font:16px Georgia,Garamond,Serif;background:#ffc}
#page a {text-decoration:none;color:#600}
#page a:hover {text-decoration:underline}
.enrg {margin-top:20px}
</style>
<script type="text/javascript">
function fcs(t){
	if (t.value==t.defaultValue) t.value='';
	return true
}
function tst(){return true}
</script>
</head>
<body>
<div id="page">
<form id="frm" method="POST" action="formulaire.html">
<h1>Pour de<br>nouveaux formulaires</h1>
<input id="pre" name="pre" type="text" value="Votre prénom" onfocus="fcs(this)"><br>
<input id="nom" name="nom" type="text" value="Votre nom" onfocus="fcs(this)"><br>
<input id="crl" name="crl" type="text" value="Votre adresse" onfocus="fcs(this)"><br>
<input id="nrg" name="nrg" type="button" title="Soumettre le formulaire" class="enrg" value="Enregistrer">
<input type="button" title="Initialiser le formulaire" value="Annuler" onclick="document.getElementById('frm').reset()">
</form>
</div>
</body>
</html>

Modifié par Julien de Prabere (21 Nov 2008 - 16:40)
Salut,

Julien de Prabere a écrit :

Bien que les constructeurs semblent s'ingénier, avec la complicité du W3C, à nous imposer des complications tendant, par exemple, à nous faire cliquer à coté des champs pour les activer
Euh... est-ce que tu parles du LABEL associé à un INPUT ? Si oui je ne vois pas trop le problème puisqu'il ne fait qu'ajouter de l'ergonomie sans poser aucune contrainte en retour. Smiley rolleyes
Ou alors j'ai pas compris.

Julien de Prabere a écrit :

Malheureusement, si les versions les plus récentes de FireFox, Opéra et Safari autorisent encore cette fonctionnalité (on pourrait souhaiter que le rechargement des pages rétablisse le questionnaire dans son état initial), celle-ci parait plus difficile à obtenir avec Internet Explorer 6 ou 7. Comment faire pour retrouver, non seulement le focus, mais encore le trait clignotant correspondant sur ces navigateurs ?
Cette fois c'est sûr j'ai rien compris.

Pour ce qui est de ta proposition de mettre les libellés de chaque INPUT directement dans le value je n'y vois que des inconvénients et même en cherchant bien aucun avantage. Les 2 principaux :
* si Javascript est désactivé on est forcé de supprimer le contenu "à la main".
* une fois qu'un champ est saisi on ne sait plus à quel libellé il correspond. Smiley confus
Modifié par Heyoan (21 Nov 2008 - 18:43)
Moi non plus, je ne vois pas où tu veux en venir ...
Tous les arguments de Heyoan sont (très) juste bien que la notion d'accessibilité est quelque peu été omise dans ses propos. Smiley cligne
yodaswii a écrit :

bien que la notion d'accessibilité est quelque peu été omise dans ses propos. Smiley cligne
Ah oui tiens ! J'ai parlé de l'ergonomie mais j'ai oublié sa grande soeur. Smiley langue
Toues mes excuses pour cette question mal formulée.

Indépendamment des qualités de ce formulaire (légèreté, encombrement réduit, ergonomie), ma question visait à améliorer encore son accessibilité pour obtenir, avec Internet Explorer, l’apparition du curseur dans les différents champs lors de l’utilisation de la touche de tabulation (ce que l’on observe d’ores et déjà sur les autres navigateurs).

Le «focus» (même après un setTimeout), ne semble pas suffisant pour ce faire. Pourtant assez curieusement le curseur réapparaît (au deuxiéme tour) en insistant avec la touche tabulation ?

D'avance merci.
Julien de Prabere a écrit :
Indépendamment des qualités de ce formulaire (légèreté, encombrement réduit, ergonomie), ma question visait à améliorer encore son accessibilité pour obtenir, avec Internet Explorer, l’apparition du curseur dans les différents champs lors de l’utilisation de la touche de tabulation (ce que l’on observe d’ores et déjà sur les autres navigateurs).

À ma connaissance, Internet Explorer permet aussi de tabuler entre les divers contrôles de formulaires.

Je n'ai pas testé ton formulaire, mais celui-ci marche parfaitement dans IE6, par exemple:
http://web.covertprestige.info/test/45-champ-formulaire-texte-au-focus.html
Effectivemment Internet Explorer permet de tabuler, mais comment se fait-il que le curseur ne suive pas ?

Merci pour ce lien. Le formulaire fonctionne parfaitement, mais l'on doit pouvoir faire plus simple sans Jquery (au demeurant très performant) avec les valeurs par défaut «defaultValue» disponibles sur la plupart des navigateurs...
Modifié par Julien de Prabere (24 Nov 2008 - 13:57)
Ci-après une solution plus directe...
Mais, le curseur fait toujours défaut, lorsqu'on utilise la touche tabulation sur Internet Explorer ???

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor,  www.pspad.com">
 
<title>Formulaire</title>
<style type="text/css">
body {margin:0px;padding:40px;font:18px Georgia,Garamond,Serif;text-align:center;background:#ffc;color:#600;}
#page {display:block;margin:0px auto;padding:20px;border:0px;width:320px;background:#c96;}
h1 {margin:15px;padding:0px;font-weight:bold;font-size:130%}
input {padding:3px;border:1px solid #000;font:16px Georgia,Garamond,Serif;background:#ffc;}
#page a {text-decoration:none;color:#600}
#page a:hover {text-decoration:underline;font-size:bold;}
</style>
<script type="text/javascript">
var t_f=null;
function fcs(t){
	if (t.value==t.defaultValue) {t.value="";}
	return true;
}
function blr(t){
	if (t.value=='') {t.value=t.defaultValue;}
	return true;
}
</script>
</head>
<body>
<div id="page">
<form id="frm" method="POST" action="formulaire.html">
<h1>Pour de<br>nouveaux formulaires</h1>

<p><input id="pre" name="pre" type="text" value="Votre prénom" onfocus="fcs(this)" onblur="blr(this)"></p>
<p><input id="nom" name="nom" type="text" value="Votre nom" onfocus="fcs(this)" onblur="blr(this)"></p>
<p><input id="crl" name="crl" type="text" value="Votre adresse" onfocus="fcs(this)" onblur="blr(this)"></p>

<p><input id="nrg" name="nrg" type="submit" title="Soumettre le formulaire" value="Enregistrer"></p>
<p><input type="reset" title="Soumettre le formulaire" value="Annuler"></p>

</form>
</div>
</body>
</html>
Eureka ! Ces deux lignes de code sont suffisantes pour retrouver le curseur en utilisant la touche tabulation sur les navigateurs les plus récents (Internet Explorer, FireFox, Opéra, Safari).

function fcs(t){
	if (t.value==t.defaultValue) {t.value='';if (document.selection && document.selection.clear) document.selection.clear()}
}
function blr(t){
	if (t.value=='') {t.value=t.defaultValue;}
}


Pour travailler sur des inputs type "password", c'est un peu plus compliqué. En effet, Internet Explorer refusant les changements de types dans ces conditions, il convient de remplacer les balises en jouant avec les noeuds ! Quant je disais que les constructeurs se compliquent inutilement les tâches...
Modifié par Julien de Prabere (25 Nov 2008 - 19:05)