Input標簽中Type的類型及詳細用法


 

1type=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>

2type=password

 

不用我說,一看就明白的密碼輸入框,最大的區別就是當在此輸入框輸入信息時顯示為保密字符。

 

參數和“type=text”相類似。

 

<form>

 

your password:

 

<input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密碼長度小於15

 

</form>

3type=file

 

當你在BBS上傳圖片,在EMAIL中上傳附件時一定少不了的東西:)

 

提供了一個文件目錄輸入的平台,參數有name,size。

 

<form>

 

your file:

 

<input type="file" name="yourfile" size="30">

 

</form>

4type=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>

 

 

 

 

5type=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>

 

 

 

 

6type=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>

 

 

 

 

7type=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>

 

 

 

 

8type=image

 

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

 

 

 

<form name="form1" action="xxx.asp">

 

your Imgsubmit:

 

<input type="image" src="../blog/images/face4.gif">

 

</form>

 

 

 

 

9type=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>

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM