input tag summary

1. input labels of all type

1.1 Common

Types of	Explanation
text	text
password	password
radio	Radio
checkbox	Multiple choice
file	File selector
button	Push button
submit	submit
reset	Reset
hidden	Pass hidden values
image	image

1.2 Date Time (HTML5)

Types of	Explanation
date	Custom date field (with calendar control)
datetime	Custom date field (with calendar and time controls)
datetime-local	Custom date field (with calendar and time controls)
month	May-defined date field (with calendar control)
week	Periphery defined date field (with calendar control)
time	Defining the date field, minutes, seconds (with time control)

1.3 color(html5)

Types of	Explanation
color	Defined Color Picker

1.4 number(html5)

Types of	Explanation
number	Numeric field definitions with spinner controls

<input type="number" name="points" min="1" max="100" step="2" />

1.5 range(html5)

Types of	Explanation
range	Numeric field definitions with slider controls

<input type="range" name="points" min="1" max="10" />

1.6 search(html5)

Types of	Explanation
search	Defined text fields for searching, there will be clear button

1.7 Other

Types of	Explanation
email	There will be an email address check
tel	Tel format will check
url	Will check url format

2. input of pattern and required

Types of	Explanation
pattern	Regular calibration check
required	Can not be empty

code show as below:

<input type="text" pattern="^[0-9]{4}$" required="true">

3. readonly和disabled

Types of	Explanation
readonly	Read-only
disabled	Disable

The difference between the two:

1. The style is not the same, disabled style will change.

2. When submitting, disable the name, value will not submit; readonly will continue to be submitted.

4. list

Datalist element designated to provide the recommended value as a text box, a value of the id value datalist element. code show as below:

<input type="text" list="dl">
<datalist id="dl">
    <option value="1">香蕉</option>
    <option value="2">苹果</option>
    <option value="3">橘子</option>
    <option value="4">西瓜</option>
    <option value="5">草莓</option>
    <option value="6">柚子</option>
</datalist>

And select difference is, select the option selected value is value, text is displayed in the text option. The datalist general text display option, if the option has value, the display value. Since datalist only available to input the recommended value, generally we do not need value.

5. Other

Types of	Explanation
maxlength	Text length
size	Width of the textbox
placeholder	prompt