Web前端學習筆記（三）——input標籤的屬性

說明：最近整理硬盤，發現好幾篇自己以前學習web前端技術時所記錄的筆記，覺得還是頗有價值的，因此打算陸續整理出來。

 

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" readonlyvalue="你只能讀不能修改">
</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！"οnclick="window.open('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=image

比較另類的一個，自己看看效果吧，可以作爲提交式圖片

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

9  type=submitand type=reset

分別是“提交”和“重置”兩按鈕

submit主要功能是將Form中所有內容進行提交action頁處理，reset則起個快速清空所有填寫內容的功能

信息資料來源: http://hi.baidu.com/hudiahcn/blog/item/0749e9dd125a02305982ddea.html