總結Input的標簽：
Input表示Form表單中的一種輸入對象，其又隨Type類型的不同而分文本輸入框，密碼輸入框，單選/復選框，提交/重置按鈕等，下面一一介紹。
1，type=text
輸入類型是text，這是我們見的最多也是使用最多的，比如登陸輸入用戶名，注冊輸入電話號碼，電子郵件，家庭住址等等。當然這也是Input的默認類型。
參數name：同樣是表示的該文本輸入框名稱。
參數size：輸入框的長度大小。
參數maxlength：輸入框中允許輸入字符的最大數。
參數value：輸入框中的默認值
特殊參數readonly：表示該框中只能顯示，不能添加修改。
<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>
測試代碼：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content="all kinds of input"> <meta name="keywords" content="input,html"> <title>各種input的測試</title> </head> <body> <form action=""> 姓名1：<input type="text" name="yourname" size="30" maxlength="20" value="輸入框的長度為30，允許最大字符數為20"><br> 姓名2：<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能讀不能修改"><br> </form> </body> </html>
效果圖如下：
2，type=password
不用我說，一看就明白的密碼輸入框，最大的區別就是當在此輸入框輸入信息時顯示為保密字符。
參數和“type=text”相類似。
<form>
//your password:
<input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密碼長度小於15
</form>
測試代碼如下：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content="all kinds of input"> <meta name="keywords" content="input,html"> <title>各種input的測試</title> </head> <body> <form action=""> 密碼：<input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密碼長度小於15 </form> </body> </html>
效果圖如下：
3，type=file
當你在BBS上傳圖片，在EMAIL中上傳附件時一定少不了的東西：）
提供了一個文件目錄輸入的平台，參數有name，size。
<form>
//your file:
<input type="file" name="yourfile" size="30">
</form>
測試代碼如下：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content="all kinds of input"> <meta name="keywords" content="input,html"> <title>各種input的測試</title> </head> <body> <form action=""> 文件：<input type="file" name="yourfile" size="30"> </form> </body> </html>
效果圖如下：
4，type=hidden
非常值得注意的一個，通常稱為隱藏域：如果一個非常重要的信息需要被提交到下一頁，但又不能或者無法明示的時候。
一句話，你在頁面中是看不到hidden在哪里。最有用的是hidden的值。
<form name="form1">
//your hidden info here:
<input type="hidden" name="yourhiddeninfo" value="cnbruce.com">
</form>
<script>
alert("隱藏域的值是 "+document.form1.yourhiddeninfo.value)
</script>
測試代碼如下：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content="all kinds of input"> <meta name="keywords" content="input,html"> <title>各種input的測試</title> <script> window.onload = function() { document.getElementById('button').addEventListener('click',function () { alert("隱藏域的值是 "+ document.getElementById('yourhiddeninfo').value); },false); } </script> </head> <body> <form action=""> 隱藏：<input type="hidden" name="yourhiddeninfo" id="yourhiddeninfo" value="cnbruce.com"> <button id="button">顯示隱藏內容</button> </form> </body> </html>
點擊獲取隱藏內容效果圖如下：
5，type=button
標准的一windows風格的按鈕，當然要讓按鈕跳轉到某個頁面上還需要加入寫JavaScript代碼
<form name="form1">
//your button:
<input type="button" name="yourhiddeninfo" value="Go，Go，Go！" onclick="window.open('http://www.cnbruce.com')">
</form>
測試代碼如下：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content="all kinds of input"> <meta name="keywords" content="input,html"> <title>各種input的測試</title> </head> <body> <form action=""> 按鈕：<input type="button" name="yourhiddeninfo" value="Go，Go，Go!" onclick="window.open('http://www.cnbruce.com')"> </form> </body> </html>
效果圖如下：
6，type=checkbox
多選框，常見於注冊時選擇愛好、性格、等信息。參數有name,value及特別參數checked（表示默認選擇）
其實最重要的還是value值，提交到處理頁的也就是value。（附：name值可以不一樣，但不推薦。）
<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>
測試代碼如下：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content="all kinds of input"> <meta name="keywords" content="input,html"> <title>各種input的測試</title> </head> <body> <form action=""> 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> </body> </html>
效果圖如下：
7，type=radio
即單選框，出現在多選一的頁面設定中。參數同樣有name,value及特別參數checked.
不同於checkbox的是，name值一定要相同，否則就不能多選一。當然提交到處理頁的也還是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>
測試代碼如下：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content="all kinds of input"> <meta name="keywords" content="input,html"> <title>各種input的測試</title> </head> <body> <form action=""> 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> </body> </html>
效果圖如下：
8，type=image
比較另類的一個，自己看看效果吧，可以作為提交式圖片
<form name="form1" action="xxx.asp">
//your Imgsubmit:
<input type="image" src="../blog/images/face4.gif">
</form>
測試代碼如下：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content="all kinds of input"> <meta name="keywords" content="input,html"> <title>各種input的測試</title> </head> <body> <form action=""> <input type="image" src="https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=3466314416,2888444446&fm=73"> </form> </body> </html>
效果圖如下：
9，type=submit and type=reset
分別是“提交”和“重置”兩按鈕
submit主要功能是將Form中所有內容進行提交action頁處理，reset則起個快速清空所有填寫內容的功能。
<form name="form1" action="xxx.asp">
<input type="text" name="yourname">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
測試代碼如下：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content="all kinds of input"> <meta name="keywords" content="input,html"> <title>各種input的測試</title> </head> <body> <form action=""> <input type="text" name="yourname"> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>
效果圖如下：
