What new input types and attributes are added to HTML5?

青灯夜游
Release: 2023-01-04 09:37:33
Original
5574 people have browsed it

New types: color, date, datetime, email, month, number, tel, time, url, week, etc.; new attributes: autofocus, form, max, min, pattern, step, list, etc.

What new input types and attributes are added to HTML5?

(Recommended tutorial: html tutorial)

New input types and their attributes in HTML5

In HTML4.01, the only input types are text, button, password, submit, radio, checkbox and hidden (hidden field). Some new types have been added to H5, which are more convenient to use, including:

  • color

What new input types and attributes are added to HTML5?
Color pops up when clicked Selector, you can select any color

  • number
    What new input types and attributes are added to HTML5?
    Enter a number within the range, you can manually enter a number out of the range, but you cannot submit

  • tel
    Enter the phone number, only safari supports it

  • email
    It has a built-in detection function. When submitting, it will detect whether it contains the @ symbol, and Are there characters before and after the @ symbol

  • range
    What new input types and attributes are added to HTML5?

  • url
    The entered URL must be http:// at the beginning, and there must be characters after it, otherwise it cannot be submitted

  • date
    You can manually select the date
    What new input types and attributes are added to HTML5?

  • time
    You can manually select the time
    What new input types and attributes are added to HTML5?

  • datetime
    Select the date and time with time zone, ie, firfox and chrome do not support it

  • datetime-local
    What new input types and attributes are added to HTML5?
    Select date and time without time zone

  • month
    What new input types and attributes are added to HTML5?
    and The date type is the same, except that you can only select the month

  • week
    What new input types and attributes are added to HTML5?
    and you can only select the week. This date method is rarely used in China.

  • search

    Define the text field used to enter the search string

Some new common properties :

  • autocomplete
    Optional value on/off, indicating that the browser automatically fills in / does not allow automatic filling based on the content previously entered by the user

  • autofocus
    The input automatically gains focus when the page is loaded

  • form
    It is specified that the input outside the form belongs to one or more forms, and the form attribute points to the id value of the belonging form. , if it belongs to multiple forms, add spaces between the ids

  • list

list points to the referenced datalist (the function is the same as select, but not Displayed on the web page) predefined optional options, such as

Copy after login

and the performance on the page is (the optional options will be expanded when you click on the right side to expand):
What new input types and attributes are added to HTML5?

- formaction

specifies the URL of the file that handles the input control when the form is submitted. (only for type="submit" and type="image")

- formenctype

Specifies how to encode form data when submitted to the server (only for type="submit" and type= "image").

-formmethod

Define the HTTP method that sends form data to the action URL. (Only suitable for type="submit" and type="image")

- formnovalidate

The formnovalidate attribute overrides the novalidate attribute of the

element.

- formtarget

specifies where to display the name or keyword of the response received after submitting the form. (Only suitable for type="submit" and type="image")

- height

Specifies the height of the element. (Only for type="image")

- min
Specifies the minimum input value, applicable to number, range, date, datetime, datetime-local, month, time

- max
specifies the maximum input value, also applies to number, range, date, datetime, datetime-local, month, time

- multiple
allows multiple values, separated by ","

- required
The items must be filled in, that is, it cannot be empty. If it is empty, it will not be submitted

- pattern

Define verification-related regular rules, note that the format does not need to add "/ /"

- placeholder
Define the prompt content displayed in the input box before the user inputs, usually light gray

- step
Define the step size of the number change, that is, the unit of each change, such as step="5". If the input is not an integer multiple of 5, an incorrect format will be prompted when submitting

- width

The width attribute specifies the width of the element. (Only for type="image")

For more programming-related knowledge, please visit: Programming Learning! !

The above is the detailed content of What new input types and attributes are added to HTML5?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!