JSP中 input type 用法

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!" ο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=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>

 

http://qmug.iteye.com/blog/228951文章出處

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章