form form new features functions

1.placeholder

Its characteristic value will be displayed in the input box in light gray style. When the input box gains focus and has a value, the prompt message will disappear automatically.

<p>
    <label for="runnername">
        Runner:
    </label>
    <input id="runnername"name="runnername" type="text" placeholder="First and last name" />
</p>

The result of the operation is: there are 'First and last name' characters in the input box, and when the input is clicked, the characters disappear.

2.autocomplete

Browsers use the autocomplete feature to know whether input values should be saved for future use. Autocomplete should protect user sensitive data from unsafe storage by the local browser.

Types of	effect
on	Fields do not need to be protected and can be copied and stored repeatedly
off	Fields are protected from copying and storage
unspecified	Contains the default settings for <form>, if not included in the form or no value is specified, the behavior is on

<form action="" method="get" autocomplete="on">
Name:<input type="text" name="name" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

When the user submits the form once and visits it again, the input box of name will prompt the value you have entered, but the email will not prompt.

3. autofocus

When the page is loaded, we specify a form element to get the focus through autofocus, but only one autofocus is allowed on each page. If you set more than one, it is equivalent to not specifying some behaviors. Can't achieve focus shift

4. list feature and datalist

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="W3School" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

After webpage, the input box will have <datalist> three URL options list. 5.required its attribute stipulates that its input area cannot be empty

Name: <input type="text" name="usr_name" required="required" />

6.pattern

form form new features functions

Guess you like