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>
2，type=password
不用我說，一看就明白的密碼輸入框，最大的區別就是當在此輸入框輸入信息時顯示爲保密字符。
參數和「type=text」相相似。
<form>
your password:
<input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密碼長度小於15
</form>
3，type=file
當你在BBS上傳圖片，在EMAIL中上傳附件時必定少不了的東西：）
提供了一個文件目錄輸入的平臺，參數有name，size。
<form>
your file:
<input type="file" name="yourfile" size="30">
</form>
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>


5，type=button
標準的一windows風格的按鈕，固然要讓按鈕跳轉到某個頁面上還須要加入寫JavaScript代碼
<form name="form1">
your button:
<input type="button" name="yourhiddeninfo" value="Go，Go，Go！" http://www.cnbruce.com/" target=_blank>http://www.cnbruce.com')">
</form>


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>


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>


8，type=p_w_picpath
比較另類的一個，本身看看效果吧，能夠做爲提交式圖片

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


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> 

input 標籤 -- 表明HTML表單的單行輸入域
input標籤是單獨出現的,<input />
屬性.
Common -- 通常屬性
type -- 表明一個輸入域的顯示方式(分爲輸入型,選擇型,點擊型)
maxlength -- 輸入域最多能夠輸入文字的長度
src -- 當使用圖片來表示按鈕時,表明圖片的位置(URI)
alt -- 表明表單的提示文字,當鼠標停留時
size -- 輸入域的長度
value -- 輸入域的值
accesskey -- 表單的快捷鍵訪問方式
checked -- 若是是選擇型的輸入域,表明已經被選擇
disabled -- 輸入域沒法得到焦點,沒法選擇,以灰色顯示,在表單中不起任何做用
readonly -- 輸入域能夠選擇,可是沒法修改
tabindex -- 輸入域的"tab"鍵遍歷順序




text 文本框
password 密碼
checkbox 多選框
radio 單選框
submit 提交
reset 重寫
file 文件
hidden 隱藏
p_w_picpath 圖片
button 按扭