Default html form focus without JavaScript

Question

Is it possible to set the default input focus on an HTML form without using JavaScript, for example:

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

I want to set the default focus to either of the text-boxes when the form loads without using JavaScript (as I want the behaviour to occur when a user has js disabled).

score 332 · Accepted Answer · edited Sep 04 '15 at 05:43

332

You can do it in HTML5, but otherwise, you must use JavaScript.

HTML5 allows you to add autofocus to your form element, eg:

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

This does work in browsers which support HTML5 (Or rather, browsers which support this particular part of HTML5) but as you know, not everybody can use it yet.

edited Sep 04 '15 at 05:43

jpaugh

6,634
4
38
90

answered Nov 12 '10 at 16:05

Lucas

10,476
7
39
40

score 24 · Answer 2 · answered May 16 '13 at 22:22

24

Something to be aware of ... if you set a focused form element, then anyone using Assisted Technology (AT) like a screen reader will need to back up to see menus and any other content that is before the focused field.

A preferred method, in my opinion , is to not set focus to any field, except a skip-link if its available. That gives them the option to skip into the pages content or read the page from the top down.

answered May 16 '13 at 22:22

Greg

747
9
23

Adding a skip-link which is visually hidden too, but accessible via screenreaders would be great! – James Cazzetta Jan 18 '17 at 14:42
I have so much to learn about accessibility. Thank you for adding this answer to help the rest of us learn! – Andrew Steitz Feb 26 '19 at 15:45
Note, however, that this can also degrade experience for many users, especially if the input field provides the main functionality. Consider Google’s home page, for example. – Danylo Mysak May 09 '21 at 07:52

score 3 · Answer 3 · answered May 16 '13 at 02:16

As others have said, without Javascript you can't guarantee a default field. An alternative option you might want to try, if you have multiple fields that a user might want to access is using the accesskey attribute. This will essentially mean a user can return to either of the fields instantly later during browsing, which may come in handy for users of screen readers, etc...

Wikipedias article on this subject is quite useful - http://en.wikipedia.org/wiki/Access_key

score -3 · Answer 4 · answered Nov 12 '10 at 16:03

-3

This is not possible without some form of scripting. Even Google's home page requires Javascript to focus the search field.

answered Nov 12 '10 at 16:03

Evan Mulawski

54,662
15
117
144

1

It is. Google just adds javascript for those browsers not supporting HTML5. Something worth considering in any app. – mvbrakel Feb 19 '14 at 20:43

score -8 · Answer 5 · answered Nov 12 '10 at 22:08

-8

You might be able to use the tabindex attribute and use the lowest value on the default textbox though. Check here for browser support:

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

The site suggests that

(in almost all other cases—namely form controls and links—the tabindex has excellent support)

answered Nov 12 '10 at 22:08

Cahit

2,484
19
23

3

The "tabindex" attribute does not give automatic focus to any elements, not even an element with "tabindex=1". Pressing (or a click) is required give focus to the first element in the tab sequence. – Clint Pachl Nov 08 '11 at 08:58

Default html form focus without JavaScript

5 Answers5

Linked

Related