HTML5 form, html5 form example

HTML5 form, html5 form example

HTML5 adds various forms, including adding input types, form elements, form attributes, and input attributes.

1. New Input types:

Email: <Input type = "email" name = "user_email"/>

Url: <Input type = "url" name = "user_url"/>

Number: <Input type = "number" name = "user_number" min = "1" max = "20" step = "4"/> max: Maximum allowed value; min: specifies the minimum value allowed; step: Specifies the valid number interval (if step = "4", the valid number is-4, 0, 4, 8); value: Specifies the default value.

Range: <Input type = "range" name = "user_range" min = "1" max = "20" step = "4"/>

Date type: Date, month, week, time, datetime, datetime-local

Search: <Input type = "search" name = "user_search"/>

Tel: <Input type = "tel" name = "user_tel"/>

Color: <Input type = "color" name = "user_color"/>

2. New input attributes:

Autocomplete: Helps users automatically complete content input in Input boxes, including text, search, url, telephone, email, password, datepickers, range, and color; the attribute values include on, off, and null.

Autofocus: Get the focus of the page form control. Only one autofocus attribute value can be used for the same page. Set on to get the focus.
<Input type = "text" name = "user_name" autofocus = "on"/>

List: A datalist element is added to HTML5 to implement the drop-down effect of the Data list. It looks similar to autocomplete. You can select from the list or enter it yourself. The list attribute is used to specify the datalist element bound to the input box. Its value is the id of a datalist.

Enter the city <input type = "text" list = "<span style =" color: # ff0000; "> text_list </span>" name = "weblink"/> <datalist id = "<span style =" color: # ff0000; "> text_list </span>"> <option value = "BeiJing"> BeiJing </option> <option value = "QingDao"> QingDao </option> <option value =" qingHai "> QingHai </option> </datalist>

The list attribute applies to the following Input types: text, search, url, telephone, Email, date pickers, number, range, and color.

Min, max, and step:The new min, max, and step attributes are used to set limits for Input types that contain numbers or dates, that is, to add a numerical constraint to these types of Input boxes, applicable to date, pickers, number, and range labels.

Multiple: This attribute supports selecting multiple files at a time for the file type in the input type.

 <input type="file" name="img" multiple="multiple" /><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">   </span>

Patterm: Used to verify whether the content entered by the user in the Input box matches the custom regular expression. It is applicable to the following types of Input tags: text, search, url, telephone, Email, and password.
Enter the zip code: <input type = "text" name = "zip_code" pattern = "[0-9] {6}"/> This row indicates that the input box requires a 6-digit zip code.

Placeholder: Provides a prompt for Input boxes of the Input type. Applicable to: text, search, url, telephone, Email, and password
Enter the zip code: <input type = "text" name = "zip_code" pattern = "[0-9] {6}"/>

Required: The content cannot be blank. Applicable to: text, search, url, telephone, Email, password, date pickers, number, checkbox, radio, and file
<Input type = "text" name = "n_name" required = "required"/>