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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.