Type and detailed usage of type in input tag

reproduced

Input represents one type of entry object in form form, which is divided into text input box, password input box, radio/check box, submit/Reset button and so on.
1,type=text
input type is text, this is the most we see is also the most used, such as login input user name, registration input phone number, e-mail, home address and so on. This is, of course, the default type of input.
Parameter name: The name of the text input box that is also represented.
Parameter size: The length of the input box.
Parameter maxlength: The maximum number of characters allowed in the input box.
Parameter value: The default value in the input box
Special parameter ReadOnly: Indicates that the box can only be displayed and modifications cannot be added.


<form>
Your name:
<input type= "text" name= "yourname" size= "30" maxlength= "value=" The length of the input box is the maximum number of characters allowed ><br>
<input type= "text" name= "yourname" size= "" Maxlength= "" ReadOnly value= "You can only read can't modify" >
</form>
2,type=password
I don't need to say, a look at the password input box, the biggest difference is when you enter information in this input box is displayed as a confidential character.
The parameters are similar to "Type=text".
<form>
Your password:
<input type= "Password" name= "yourpwd" size= "maxlength=" [] value= "123456" > Password length less than 15
</form>
3,type=file
When you upload pictures in BBs, in the email upload attachments must be something:)
Provides a file directory input platform, parameters are name,size.
<form>
Your file:
<input type= "File" Name= "Yourfile" size= ">
</form>
4,type=hidden
A very noteworthy one, often called a hidden field: if a very important piece of information needs to be submitted to the next page, but cannot or cannot be expressed.
In a word, you can't see where the hidden is in the page. The most useful is the value of the hidden.

<form name= "Form1" >
Your hidden info here:
<input type= "hidden" name= "Yourhiddeninfo" value= "cnbruce.com" >
</form>
<script>
Alert ("The value of the hidden field is" +document.form1.yourhiddeninfo.value)
</script>


5,type=button
Standard a Windows-style button, of course, to let the button jump to a page also need to add write JavaScript code
<form name= "Form1" >
Your button:
<input type= "button" Name= "Yourhiddeninfo" value= "go,go,go! "Onclick=" window.open (' http://www.cnbruce.com ') ">
</form>


6,type=checkbox
Multi-box, common in the registration of the selection of hobbies, personality, and other information. Parameters are Name,value and special parameters checked (indicates default selection)
In fact, the most important thing is value, which is referred to as value in the processing page. (Attached: Name value can be different, but 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>
The name value can be different, but it is not recommended <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>


7,type=radio
That is, the single box appears in the multiple selection one of the page settings. Parameters also have name,value and special parameters checked.
Unlike the checkbox, the name value must be the same, otherwise you cannot choose one more. Of course, it is also the value that is submitted to the processing page.

<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>
The following is an example of a different name value, it is not possible to achieve a multi-select effect <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>


8,type=image
Compare the other one, take a look at the effect bar, can be submitted as a picture

<form name= "Form1" action= "xxx.asp" >
Your imgsubmit:
<input type= "image" src= ". /blog/images/face4.gif ">
</form>


9,type=submit and Type=reset
"Submit" and "Reset" two buttons, respectively.
The main function of submit is to submit all the contents of the form to the action page, and reset is a quick and easy function to clear all the contents.

<form name= "Form1" action= "xxx.asp" >
<input type= "text" name= "Yourname" >
<input type= "Submit" value= "Submission" >
<input type= "reset" value= "reset" >
</form>

Type and detailed usage of type in input tag