With the advent of HTML5, input various types of added element, for receiving various types of user input. Which, button, checkbox, file, hidden, image, password, radio, reset, submit, text which 10 are conventional input controls, there are new color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week a total of 13
Conventional type
Single-line text input field is defined, the user can enter text
password defined password field. The characters in the field are masked
file input fields and define the "Browse" button, for file uploads
radio defined radio button
Definition check box checkbox
hidden defined hidden input field
button define clickable button (in most cases, for a startup script by JavaScript)
image defining an image of form submit button
defined reset reset button. Reset button will erase all data in a form
submit define the submit button. Submit button will send the form data to the server
text
type = "text" represents a text input box, which is the default input type is a single-line control, a generally rectangular frame with embedded
password
type = "password" represents a password input box, it is almost identical to the text input box, the function will be hidden after only different letters input, usually a series of points
[] Default style
chrome/safari/opera
padding: 1px 0px;
border: 2px inset;
firefox
padding: 2px;
border-width: 1px;
ie
padding: 2px 1px;
border-width: 1px;
[Default width and height]
chrome
height: 14px;
width: 148px;
safari
height: 15px;
width: 148px;
firefox
height: 17px;
width: 137px;
IE9+
height: 14px;
width: 147px;
IE8-
height: 16px;
width: 149px;
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
[Reset] style
padding: 0;
border: 1px solid;
Note: The width and height of the browser settings type IE6 = "text" or "password" of the input element comprising padding and border width and height
[Tips] simulation show password hidden features
Description: Now a lot of software code in the right side of the box has a small eye, set a password for the show and hide. By changing the input element type attributes can be achieved
<style>
body{
margin: 0;
font-size: 16px;
}
#show{
padding: 0;
border: 1px solid black;
height: 20px;
width: 200px;
line-height: 20px;
}
#set{
display: inline-block;
height: 22px;
background-color: rgba(0,0,0,0.5);
color: white;
line-height: 18px;
margin-left: -72px;
cursor: pointer;
}
</style>
</head>
<body>
<input id="show" type="password" maxlength="6">
<span id="set">显示密码</span>
<script>
set.onclick = function(){
if(this.innerHTML == '显示密码'){
this.innerHTML = '隐藏密码';
show.type="text";
}else{
this.innerHTML = '显示密码';
show.type="password";
}
}
</script>
file
type = "file" input field and define the "Browse" button, used for file uploads
[Reset] style
padding: 0;
border: 0;
[Default width and height]
chrome
height: 21px;
width: 238px;
safari
height: 21px;
width: 238px;
firefox
height: 27px;
width: 222px;
IE9+
height: 21px;
width: 220px;
IE8
height: 16px;
width: 214px;
IE7-
height: 15px;
width: 210px;
radio
type = "radio" is defined radio button allows the user to select from a set number of selected options. The same set of buttons, name value must be consistent
Note: radio type of input element Unable to set the padding and border (except IE10- browser)
[] Default style
chrome/safari/opera/firefox
margin: 3px 3px 0 5px;
box-sizing:border-box;
ie11
margin: 3px 3px 3px 4px;
box-sizing:border-box;
ie10-
padding: 3px;
box-sizing:border-box;
[Default width and height]
chrome/safari/IE
height: 13px;
width: 13px;
firefox
height: 16px;
width: 16px;
[Reset] style
padding: 0;
margin: 0;
border: 0;
checkbox
type = "checkbox" defined radio button, allowing the user to select one or more options in a given number of choices. Button, name the value of the same group must be consistent
Note: checkbox type of input element Unable to set the padding and border (except IE10- browser)
[] Default style
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
chrome/safari/opera/firefox/ie11
margin: 3px 3px 3px 4px;
box-sizing:border-box;
ie10-
padding: 3px;
box-sizing:border-box;
[Default width and height]
chrome/safari/IE
height: 13px;
width: 13px;
firefox
height: 16px;
width: 16px;
[Reset] style
padding: 0;
margin: 0;
border: 0;
type = "radio" or "checkbox" checked attribute of the input element supports
hidden
type = "hidden" hidden input type is used to define additional data invisible to the user, but in a form to be submitted
And can not be used with the disabled attribute type = "hidden" input element: Note
//点击提交按钮后，隐藏域的内容test=12会包含在URL中
<form name="form" action="#">
<input type="hidden" name="test" value="12">
<input type="submit">
</form>
button
type = "button" input type defines the input clickable button, but do not have any behavior, often used to start the program when the user clicks on javascript
[Button, submit, reset the default style]
chrome/safari
padding: 1px 6px;
border: 2px outset buttonface;
box-sizing:border-box;
firefox
padding: 0 6px;
border: 3px outset;
box-sizing:border-box;
IE9+
padding: 3px 10px;
border: 1px outset;
box-sizing:border-box;
IE8
padding: 3px 10px;
border: 1px outset;
IE7-
padding: 1px 0.5px;
border: 1px outset;
Note: IE8- browser box-sizing: content-box; other browsers box-sizing: border-box;
<input type="button" value="Click me" onclick="alert(1)" />
type = "button" input type and the input button elements had a lot of overlapping characteristic
image
type = "image" of the input image input in the form of the type defined in the submit button, the specified type width, height, src, alt these four properties
As with a picture click on the submit button will send along the x and y coordinates on the picture, so can be used with a server-side image map, if the picture has a name attribute, will coordinate with the sending
<form action="#">
<input name="test">
<input type="image" name="imagesubmit" src="https://demo.xiaohuochai.site/submit.jpg" width="99" height="99" alt="测试图片">
</form>
submit
Button type = "submit" input type of input used to create a form submission
reset
Button type = "reset" of the type used to create the reset input input form
<form action="#" method="get">
<input>
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</form>
New type
color custom color palette
tel definition contains a telephone number input field
Input field will contain the email address of the email defined
Enter the url field definition includes a URL address
Custom Search search domain
number defined fields that contain values
defined range comprises a range within the digital input field value
Select the date defined in the day, month, year input field
month definition of selected monthly and yearly input field
Select circumferential week defined, in an input field
Choose month time defined in the input field
datetime defined selection time, sun and the moon, in the input field (UTC time)
datatime-local time defined selection, sun and the moon, in the input field (local time)
color
type = "color" input type of input creates a color palette to select the colors, the color value in hexadecimal URL encoded value after submission. Such as black will be sent to% 23 million, of which 23% is the URL encoding #
Note: safari and IE does not support this type of
[] Default style
chrome
width:44px;
height:23px;
border: 1px solid rgb(169,169,169);
padding: 1px 2px;
firefox
width:46px;
height:17px;
border: 3px solid rgb(169,169,169);
padding: 6px 0;
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
tel
type = "tel" the input telephone input type input field for indicating semantic, and type = "text" type of input Input no difference in appearance, it brings up the phone side numeric keypad
<form action="#">
<input type="tel" placeholder="请输入11位手机号码" pattern="\d{11}">
<input type="submit">
</form>
type = "email" input type of input email address input field for indicating the semantic verification value automatically email field, and type = "text" type of input Input no difference in appearance, the phone call will end the English keyboard
email support multiple types of input element attributes
Note: IE9- browser and safari browser does not support
<form action="#" >
<input type="email" name="email" multiple>
<input type="submit">
</form>
url
type = "url" input of the input type input field for indicating the semantic url address, verification value automatically url field, and type = "text" type of input Input no difference in appearance
Note: IE9- browser and safari browser does not support
<input type="url">
search
type = "search" for indicating the input type input semantic search box, and type = "text" type of input Input no difference in appearance
<input type="search">
number
type = "number" is input for processing a digital input type input, will call up the phone side numeric keypad
Note: IE does not support this type
[] Default style
chrome/safari
border: 2px inset;
padding-left: 1px;
firefox
border: 1px inset;
padding: 2px;
【Attributes】
max predetermined maximum allowed
allowing a predetermined minimum value min
step specifies the legal number intervals
value specified defaults
Note: The value of property can be a decimal
<input type="number" min="0" max="10" step="0.5" value="6" />
range
Digital input type = "range" is input for processing input type contained in a certain range, similar to type = "number" input types
Note: IE9- does not support this type
[] Default style
chrome/safari
margin: 2px;
firefox
border: 1px inset;
padding: 1px;
margin: 0 9.3px;
IE10+
padding: 17px 0 32px;
【Attributes】
max predetermined maximum allowed
allowing a predetermined minimum value min
step specifies the legal number intervals
value specified defaults
Note: The value of property can be a decimal
<input type="range" min="0" max="10" step="0.5" value="6" />
Note: If you do not set the min and max attributes, the default min = 0, max = 100
HTML5 has a new input types for selecting multiple dates and times
date
type = "date" input type of input is used to select the date, month, year
month
type = "month" is used to select input type of input Month, Year
week
type = "week" for the selected input type input peripheral, in
time
When the type = "time" is used to select the input type input, points
datetime
When type = "datetime" type of input for input selection, day, month, year (UTC time)
datetime-local
When type = "datetime-local" input type for selecting the input, day, month, year (local time)
Note: IE and firefox date of the six types are not supported, chrome does not support datetime type
[] Default style
chrome/safari
border: 2px inset;
padding-left: 1px;
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<input type="date"><br><br>
<input type="month"><br><br>
<input type="week"><br><br>
<input type="time"><br><br>
<input type="datetime"><br><br>
<input type="datetime-local">
To schedule a date and time controls, you can set the property value with a string
[Value] attribute format
date YYYY-MM-DD
time hh:mm:ss.s
datetime YYYY-MM-DDThh:mm:ss:sZ
datetime-local YYYY-MM-DDThh:mm:ss:s
month YYYY-MM
week YYYY-Wnn
YYYY=年
MM=月
DD=日
hh=小时
mm=分钟
ss=秒
s=0.1秒
T=日期与时间之间的分隔符
Z=Zulu时间的时区
Wnn=W周数，从1月的第一周开始是1，直到52
The type attribute value in the attribute format may also be used in the min and max, to create a time span; STEP movable scale may be used to set
Note: chrome does not support this type of step is set
<input type="week" value="2015-W36" step="2" min="2015-W25" max="2015-W40">
