Focus de formulaire HTML par défaut sans JavaScript

159

Est-il possible de définir le focus d'entrée par défaut sur un formulaire HTML sans utiliser JavaScript, par exemple:

<html>
  <form>
    Input 1: <input type="text" name="textbox1"/>
    <br/>
    Input 2: <input type="text" name="textbox2"/>
  </form>
</html>

Je souhaite définir le focus par défaut sur l'une des zones de texte lorsque le formulaire se charge sans utiliser JavaScript (car je souhaite que le comportement se produise lorsqu'un utilisateur a désactivé js).

html accessibility Adam Jenkin
la source

Réponses:

293

Vous pouvez le faire en HTML5, mais sinon, vous devez utiliser JavaScript.

HTML5 vous permet d'ajouter autofocusà votre élément de formulaire, par exemple:

<input type="text" name="myInput" autofocus />

Cela fonctionne dans les navigateurs prenant en charge HTML5 (ou plutôt, les navigateurs qui prennent en charge cette partie particulière de HTML5) mais comme vous le savez, tout le monde ne peut pas encore l'utiliser.

Jake Lucas
la source
22

Quelque chose à savoir ... si vous définissez un élément de formulaire ciblé, toute personne utilisant la technologie assistée (AT) comme un lecteur d'écran devra faire une sauvegarde pour voir les menus et tout autre contenu qui se trouve avant le champ ciblé.

Une méthode préférée, à mon avis, est de ne mettre le focus sur aucun champ, à l'exception d'un saut de lien s'il est disponible. Cela leur donne la possibilité de sauter dans le contenu des pages ou de lire la page de haut en bas.

Greg
la source
Ajouter un lien de saut qui est également masqué visuellement, mais accessible via des lecteurs d'écran serait génial!
James Cazzetta
J'ai tellement à apprendre sur l'accessibilité. Merci d'avoir ajouté cette réponse pour aider le reste d'entre nous à apprendre!
Andrew Steitz
3

Comme d'autres l'ont dit, sans Javascript, vous ne pouvez pas garantir un champ par défaut. Une autre option que vous voudrez peut-être essayer, si vous avez plusieurs champs auxquels un utilisateur peut vouloir accéder, consiste à utiliser l' accesskeyattribut. Cela signifie essentiellement qu'un utilisateur peut revenir à l'un ou l'autre des champs instantanément plus tard pendant la navigation, ce qui peut être utile pour les utilisateurs de lecteurs d'écran, etc.

L'article de Wikipedias sur ce sujet est très utile - http://en.wikipedia.org/wiki/Access_key


la source
0

Cela n'est pas possible sans une forme de script. Même la page d'accueil de Google nécessite Javascript pour concentrer le champ de recherche.

Evan Mulawski
la source
1
C'est. Google ajoute simplement javascript pour les navigateurs qui ne prennent pas en charge HTML5. Quelque chose à considérer dans n'importe quelle application.
mvbrakel
-8

Vous pourrez peut-être utiliser l' attribut tabindex et utiliser la valeur la plus basse dans la zone de texte par défaut. Vérifiez ici la prise en charge du navigateur:

http://reference.sitepoint.com/html/object/tabindex#compatibilitysection

Le site suggère que

(dans presque tous les autres cas, à savoir les contrôles de formulaire et les liens, le tabindex a un excellent support)

Cahit
la source
3
L'attribut "tabindex" ne donne le focus automatique à aucun élément, pas même à un élément avec "tabindex = 1". Appuyer sur <tab> (ou un clic) est nécessaire pour donner le focus au premier élément de la séquence d'onglets.
Clint Pachl