Understand the 23 types and input23 types of input elements in HTML Forms

Understand the 23 types and input23 types of input elements in HTML Forms
Traditional text password file radio checkbox hidden button image reset submit new type color tel email url search number range date month week time datetime-local

With the emergence of HTML5, multiple types of input elements are added to accept various types of user input. Among them, buttons, checkbox, file, hidden, image, password, radio, reset, submit, and text are traditional input controls, added 13 new types: color, date, datetime-local, email, month, number, range, search, tel, time, url, and week.

 

Traditional type

Text defines the input fields of a single line. You can enter text in it.

Password defines the password field. The character mask in this field

File defines the input fields and the "Browse" button for file upload.

Radio definition radio button

Checkbox definition check box

Hidden defines hidden input fields

Button definition clickable button (in most cases, it is used to start the script through JavaScript)

Image definition image form submission button

Reset defines the reset button. The reset button clears all data in the form.

Submit defines the submit button. The submit button sends the form data to the server.

Text

　　Type = "text" indicates a text input box. It is the default input type and is a single-row control. It is generally a rectangle with an embedded box.

Password

Type = "password" indicates a password input box, which is almost the same as a text input box. The only different letters in the function will be hidden after the input, which is generally 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;

[Reset style]

padding: 0;border: 1px solid;

[Note] the width and height of the input element of type = "text" or "password" set in IE6 are the width and height of the input element including padding and border.

<Demo Box> click the following buttons for demonstration.

[Tips] Hide password display function

Note: Many software have a small eye on the right side of the password box to display and hide the password. You can change the type attribute of the input element.

<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.5, 0,); color: white; line-height: 18px; margin-left:-72px; cursor: pointer ;} </style> 
File
Type = "file" defines the input field and "Browse" button for file Upload
[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;
[Note] IE8-the width and height of the input element of type = "file" set by the browser are the width and height of the input element including padding and border.
This type of input element supports the accept attribute and multiple attribute.
For more information about the accept attribute, see this
For details about the multiple attribute, move to this point
Radio
　　Type = "radio" defines a single choice button, allowing you to select an option from the number of options. For buttons in the same group, the name value must be consistent.
[Note] padding and border cannot be set for input elements of the radio type (except for 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" defines the multiple choice button, allowing you to select one or more options for a specific number. For buttons in the same group, the value of name must be consistent.
[Note] padding and border cannot be set for input elements of the checkbox type (except for IE10-browser)
[Default style]
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;
The input element of type = "radio" or "checkbox" supports the checked attribute.
For details about the checked attribute, move to this point
Hidden
Type = "hidden" defines hidden input types used to add invisible to users in the form, but additional data needs to be submitted
[Note] the disabled attribute cannot be used with the input element of type = "hidden ".
// Click Submit, the content of the hidden field test = 12 will be included in the URL <form name = "form" action = "#"> <input type = "hidden" name = "test" value =" 12 "> <input type =" submit "> </form>
Button
The input type of type = "button" defines the clickable button, but there is no behavior. It is often used to start the javascript program when the user clicks
[Default style of button, submit, and reset]
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's box-sizing: content-box, while other browsers's box-sizing: border-box;
<input type="button" value="Click me" onclick="alert(1)" />    

The input type of type = "button" overlaps with the button element.
The detailed information about the button element is now
Image
The input type of type = "image" defines the submit button in the form of an image. For this type, you can set the width, height, src, and alt attributes.
The x and y coordinates clicked on the image are sent together with the submit button. This can be used with the server-side image map. If the image has the name attribute, it will also be sent along with the coordinates.
<Form action = "#"> <input name = "test"> <input type = "image" name = "imagesubmit" src = "http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width = "99" height = "99" alt = "test image"> </form>
Submit
Type = "submit" input type used to create a button for submitting a form
Reset
Type = "reset" input type used to create a reset form button
<form action="#" method="get">    <input>    <input type="reset" value="Reset" />    <input type="submit" value="Submit" /></form>

New Type
Color definition palette
Tel defines the input domain containing the phone number
Email defines the input domain containing the email address
Url defines the input domain containing the URL address
Search defined search domain
Number defines the input fields containing values
Range defines the input fields that contain numeric values within a certain range.
Date defines the input fields of the selected day, month, and year.
Month defines the input fields of the selected month and year.
Week defines the input fields for selecting weeks and years
Time defines the input fields of the selected month and year.
Datetime defines the input domain (UTC time) of the selected time, day, month, and year)
Datatime-local defines the input domain (local time) for the selected time, day, month, and year)
Color
For input type = "color", a color palette is created to select the color. The color value is submitted as a hexadecimal value after URL encoding. If it is black, it will be sent as % 23000000, where % 23 is the # URL encoding.
[Note] safari and IE do not support this type
[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;    
<input type="color">
Tel
The input type of type = "tel" is used to represent the semantic telephone input field, which is similar to the input type of type = "text ".
<Form action = "#"> <input type = "tel" placeholder = "Enter the 11-digit mobile phone number" pattern = "\ d {11}"> <input type =" submit "> </form>
Email
The input type of type = "email" is used to represent the input field of the semantic e-mail address. The value of the email field is automatically verified, there is no difference in appearance between the input type and type = "text"
The input element of the email type supports the multiple attribute.
[Note] IE9-not supported by browsers and safari
<form action="#" >    <input type="email" name="email" multiple>    <input type="submit"></form>
Url
The input type of type = "url" is used to represent the input field of the semantic url address. The value of the url field is automatically verified, there is no difference in appearance between the input type and type = "text"
[Note] IE9-not supported by browsers and safari
<input type="url">
Search
The input type of type = "search" is used to represent the semantic search box. It is similar to the input type of type = "text ".
<input type="search">
Number
The input type of type = "number" is used to process numeric input.
[Note] IE does not support this type
[Default style]
chrome/safari    border: 2px inset;    padding-left: 1px;firefox    border: 1px inset;    padding: 2px;
[Attribute]
Max limit
Min limit
Step specifies a valid digit Interval
Default value specified by value
[Note] the attribute value can be decimal.
<input type="number" min="0" max="10" step="0.5" value="6" />
Range
The input type of type = "range" is used to process numeric input within a certain range, similar to the input type of type = "number ".
[Note] IE9-this type is not supported
[Default style]
chrome/safari    margin: 2px;firefox    border: 1px inset;    padding: 1px;    margin: 0 9.3px;IE10+    padding: 17px 0 32px;
[Attribute]
Max limit
Min limit
Step specifies a valid digit Interval
Default value specified by value
[Note] the attribute value can be decimal.
<input type="range" min="0" max="10" step="0.5" value="6" />

HTML5 has multiple new input types available for Date and Time Selection.
Date
The input type of type = "date" is used to select a day, month, or year.
Month
The input type of type = "month" is used to select months and years.
Week
Type = "week" input type is used to select weeks, years
Time
The input type of type = "time" is used to select the hour and minute
Datetime
The input type of type = "datetime" is used to select the time, day, month, and year (UTC time)
Datetime-local
The input type of type = "datetime-local" is used to select the time, day, month, and year (local time)
[Note] Neither IE nor firefox supports the Six date types. chrome does not support the datetime type.
[Default style]
chrome/safari    border: 2px inset;    padding-left: 1px;
<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 preset the date and time of the control, you can use a string to set the value attribute.
[Value Attribute format]
date                　　 YYYY-MM-DDtime                 　　hh:mm:ss.sdatetime            　　 YYYY-MM-DDThh:mm:ss:sZdatetime-local           YYYY-MM-DDThh:mm:ss:smonth            　　　　 YYYY-MMweek                　　 YYYY-Wnn
YYYY = year MM = month DD = day hh = hour mm = minute ss = Second s = 0.1 seconds T = separator Z between date and time = Time Zone Wnn = W weeks, from the first week of January to 1 until 52
This type of value Attribute format can also be used in min and max attributes to create time spans; step can be used to set the moving Scale
[Note] chrome does not support step settings of this type.
<input type="week" value="2015-W36" step="2" min="2015-W25" max="2015-W40">