Comments: I'm sure you have some knowledge about the automatic focus and placeholder text of HTML5. To use the automatic focus function of HTML5, you only need to add the autofocus attribute in the form field, first, let's take a look at the sample code that uses HTML auto-focus and placeholder text. If you are interested, you can understand
First, let's take a look at the following sample code that uses HTML auto-focus and placeholder text.
The Code is as follows:
<! DOCTYPE html> 2: <Head>
<Title> register an account </title>
<Meta charset = "UTF-8">
</Head>
<Body>
<Form method = "post" action = "goto">
<Fieldset id = "register_information">
<Legend> New User Registration </legend>
<Ol>
<Li>
<Label for = "name"> email box </label>
<Input type = "email" id = "name" name = "name">
</Li>
<Li>
<Label for = "user"> user Name </label>
<Input type = "text" id = "user" name = "user">
</Li>
<Li>
<Label for = "nickname"> display name </label>
<Input type = "text" id = "nickname" name = "user">
</Li>
<Li>
<Label for = "password"> password </label>
<Input type = "password" id = "password" name = "user_password">
</Li>
<Li>
<Label for = "confirm_password"> Confirm Password </label>
<Input type = "password" id = "confirm_password" name = "user_password">
</Li>
</Ol>
</Fieldset>
</Form>
</Body>
</Html>
Use auto focus
To use the auto-focus function of HTML5, you only need to add the autofocus attribute to the form field.
For example, when the page is loaded, the cursor is automatically directed to the first form field mailbox of the form and the input efficiency is improved.
The Code is as follows:
<Li>
<Label for = "name"> email box </label>
<Input type = "email" id = "name" name = "name" autofocus>
</Li>
Note that if multiple autofocus attributes are set on the page, the user's cursor will only be located in the form field with the last autofocus attribute.
Use placeholder text
The most useful of placeholder text is to explain to the user how to enter the form correctly. Enter the prompt. To use placeholder text, you only need to add the placeholder attribute in the input domain.
The following is the input form field using the placeholder attribute.
The Code is as follows:
<Ol>
<Li>
<Label for = "name"> email box </label>
<Input type = "email" id = "name" name = "name" autofocus placeholder = "enter a valid email Address">
</Li>
<Li>
<Label for = "user"> user Name </label>
<Input type = "text" id = "user" name = "user" placeholder = "enter user name">
</Li>
<Li>
<Label for = "nickname"> display name </label>
<Input type = "text" id = "nickname" name = "user" placeholder = "input nickname">
</Li>
<Li>
<Label for = "password"> password </label>
<Input type = "password" id = "password" name = "user_password" placeholder = "Enter password">
</Li>
<Li>
<Label for = "confirm_password"> Confirm Password </label>
<Input type = "password" id = "confirm_password" name = "user_password" placeholder = "enter the password again">
</Li>
</Ol>
The running effect is as follows:
Enable Automatic completion?
The autocomplete attribute is introduced in HTML5. It is used to notify the browser whether to automatically fill in data for the current form field. Some browsers will remember the data that users have previously entered. In some cases, we may not want users to use record data, especially those similar to passwords.
Turn off auto-completion
The Code is as follows:
<Input type = "password" id = "password" name = "user_password" autocomplete = "off" placeholder = "Enter password">
You only need to set the atuocomplete value to off to Prevent Automatic completion.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
