What new input types and attributes are added to HTML5?

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

(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

Color pops up when clicked Selector, you can select any color

• number
  
  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
  

• 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
  

• time
  You can manually select the time
  

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

• datetime-local
  
  Select date and time without time zone

• month
  
  and The date type is the same, except that you can only select the month

• week
  
  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

<form><input list="mylist"/><datalist id="mylist">
    <option>张三</option>
    <option>李四</option>
    <option>王五</option></datalist></form>

and the performance on the page is (the optional options will be expanded when you click on the right side to expand):

- 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!