Ultra-practical HTML code segment Reading Notes 1--HTML5 automatic focus, html focus

Ultra-practical HTML code segment Reading Notes 1--HTML5 automatic focus, html focus

After the page is loaded, the input focus is automatically positioned to the desired element. You can directly input the element without manually selecting it.

You can use the autofocus attribute to specify this automatic focus function. The sample code is as follows:

<Form name = "input" action = "html_form_action.php" method = "post"> <div class = "login-item"> <label for = "nick"> name: <input autofocus id = "nick" name = "nick"/> </label> </div> <div class = "login-item"> <label for = "password"> password: <input id = "password" name = "password"/> </label> </div> <div class = "login-submit"> <button type = "submit"> submit </button> </div> </form>

　　

After the autofocus attribute is set, the input, textarea, And button elements are automatically selected (that is, the focus is obtained) after the page load is completed ). If you try other non-form elements (such as h2 elements) with tabIndex = 0, but the autofocus attribute has no effect on these elements.

This attribute is useful for retrieving user input pages. For example, you can search the homepage (figure 10.2). It is mainly used to guide the user to search, and can be implemented without additional scripts.

 

Figure 10.2 automatic focus

The autofocus attribute can only be used to set one element. If the autofocus attribute is set for multiple elements, the focus is obtained for the last element.

<input autofocus="autofocus" /> <button autofocus="autofocus">Hi!</button> <textarea autofocus="autofocus"></textarea>

This is taken from the ultra-practical HTML code segment, which covers the 400 code segments of HTML and HTML 5.