Comment: I believe you have a good understanding of HTML5's autofocus and placeholder text. To use HTML5's autofocus function, you only need to add the autofocus attribute in the form field. First, look at the following example code for using HTML autofocus and placeholder text. Interested friends can learn about it.
First look at the following example code for using HTML autofocus and placeholder text
<!DOCTYPE html> 2: <html>
<head>
<title>Register an account</title>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="goto">
<fieldset>
<legend>New user registration</legend>
<ol>
<li>
<label for="name">Email</label>
<input type="email">
</li>
<li>
<label for="user"> Username</label>
<input type="text">
</li>
<li>
<label for="nickname"> Display name</label>
<input type="text">
</li>
<li>
<label for="password">Password</label>
<input type="password">
</li>
<li>
<label for="confirm_password">Confirm password</label>
<input type="password">
</li>
</ol>
</fieldset>
</form>
</body>
</html>
Using autofocus
To use HTML5's autofocus function, just add the autofocus property in the form field
For example, you want to automatically locate the cursor on the first form field mailbox of the form when the page is loaded and improve input efficiency.
<li>
<label for="name">Email</label>
<input type="email" autofocus>
</li>
It should be noted that if multiple autofocus properties are set in the page, the user's cursor will only be located on the last form field with the autofocus properties set.
Use placeholder text
The greatest use of placeholder text is to explain to users how to fill out the form correctly. That is, the input prompt is made. To use placeholder text, just add the placeholder attribute in the input field
Below is the input form field using the placeholder attribute
<ol>
<li>
<label for="name">Email</label>
<input type="email" autofocus placeholder="Please enter a valid email address">
</li>
<li>
<label for="user"> Username</label>
<input type="text" placeholder="enter username">
</li>
<li>
<label for="nickname"> Display name</label>
<input type="text" placeholder="enter nickname">
</li>
<li>
<label for="password">Password</label>
<input type="password" placeholder="enter password">
</li>
<li>
<label for="confirm_password">Confirm password</label>
<input type="password" placeholder="Enter password again">
</li>
</ol>
The operation effect is as follows
Whether to enable autocomplete
The autocomplete attribute was introduced in HTML5. Used to notify the browser whether the current form field is automatically filled with data. Some browsers will remember the data entered by the user before, and in some cases we may not want the user to use the record data, especially similar to the password.
Close Autocomplete
<input type="password" autocomplete="off" placeholder="enter password">
Just set the value of atuocomplete to off to prevent automatic completion.