Input type summary_html/css_WEB-ITnose

Input is the element with the most types in the form. Let’s summarize it here.

type=text

The input type is text, which is what we see most and use most, such as logging in to enter a username, registering to enter a phone number, email, home address, etc. Of course, this is also the default type of Input.
Parameter name: also represents the name of the text input box.
Parameter size: the length of the input box.
Parameter maxlength: The maximum number of characters allowed to be entered in the input box.
Parameter value: the default value in the input box.
Special parameter readonly: It means that the box can only be displayed and cannot be added or modified.

<form> your name: <input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30，允许最大字符数为20"><br> <input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改"> </form> 

type=password

Needless to say, the password input box is easy to understand at a glance. The biggest difference is that it is displayed when information is entered in this input box. A secret character.
The parameters are similar to "type=text".

<form> your password: <input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15 </form> 

type=file

When you upload pictures on BBS and upload attachments in EMAIL, you must have something indispensable:)
Provides a file Directory input platform, parameters include name, size.

<form> your file: <input type="file" name="yourfile" size="30"> </form> 

type=hidden

A very noteworthy one, often called a hidden field: if a very important information needs to be submitted to the next page, But when it is impossible or impossible to express it clearly.
In a word, you can’t see where hidden is on the page. The most useful is the hidden value.

<form name="form1"> your hidden info here: <input type="hidden" name="yourhiddeninfo" value="cnbruce.com"> </form> <script> alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value) </script>

type=button

A standard windows-style button. Of course, to make the button jump to a certain page, you need to add JavaScript code

<form name="form1"> your button: <input type="button" name="yourhiddeninfo" value="Go，Go，Go！" onclick="window.open('http://www.cnbruce.com')"> </form>

type=checkbox

Multiple checkboxes, commonly used to select hobbies, personality, and other information during registration. The parameters include name, value and the special parameter checked (indicating the default selection)
In fact, the most important thing is the value, which is the value submitted to the processing page. (P.S. The name values ​​can be different, but it is not recommended.)

<form name="form1"> a:<input type="checkbox" name="checkit" value="a" checked><br> b:<input type="checkbox" name="checkit" value="b"><br> c:<input type="checkbox" name="checkit" value="c"><br> </form> name值可以不一样，但不推荐<br> <form name="form1"> a:<input type="checkbox" name="checkit1" value="a" checked><br> b:<input type="checkbox" name="checkit2" value="b"><br> c:<input type="checkbox" name="checkit3" value="c"><br> </form>

type=radio

is a radio button that appears on a multiple-select page Setting up. Parameters also have name, value and special parameters checked.
Different from checkbox, the name value must be the same, otherwise you cannot select more than one. Of course, the value submitted to the processing page is still the value.

<form name="form1"> a:<input type="radio" name="checkit" value="a" checked><br> b:<input type="radio" name="checkit" value="b"><br> c:<input type="radio" name="checkit" value="c"><br> </form> 下面是name值不同的一个例子，就不能实现多选一的效果了<br> <form name="form1"> a:<input type="radio" name="checkit1" value="a" checked><br> b:<input type="radio" name="checkit2" value="b"><br> c:<input type="radio" name="checkit3" value="c"><br> </form>

type=image

An alternative one, see the effect for yourself, it can be used as a submitted image

<form name="form1" action="xxx.asp"> your Imgsubmit: <input type="image" src="../blog/images/face4.gif"> </form>

type=submit and type=reset

are the "Submit" and "Reset" buttons respectively
The main function of submit is to submit all the content in the Form to the action page for processing, and reset is Create a function to quickly clear all filled-in content.

HTML5 new Input type

email

url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

email

The format of the email will be automatically verified when submitting the form. The name attribute must be present in the opera browser, otherwise it will not work

url

When submitting the form, the value of the url field will be automatically verified.

number

You can limit the number entered, step is the interval between the previous number and the next number

Effect:

　

range

The

range type is used for input fields that should contain numeric values ​​within a certain range.

The range type is displayed as a slider.

You can also set limits on the numbers accepted. Attributes are the same as number

Effect:

Date Pickers

HTML5 has multiple new input types for selecting dates and times:

date - Select day, month, year

month - Select month, year

week - Select week and year

time - Select time (hours and minutes)

datetime - select time, day, month, year (UTC time)

datetime-local - select time, day, month, year (local time)

Effect:

search

The search type is used for search domains, such as site search or Google search. The search field appears as a regular text field.

<input id="search" type="url" list="searchlist" required /><datalist id="searchlist">                <option value="http://www.google.com" label="Google" />                <option value="http://www.yahoo.com" label="Yahoo" />                <option value="http://www.bing.com" label="Bing" /></datalist>

The datalist here is equivalent to a drop-down list, which can be selected. The effect:

color

can be obtained Color

Effect: