Input表示Form表單中的一種輸入對(duì)象,其又隨Type類型的不同而分文本輸入框,密碼輸入框,單選/復(fù)選框,提交/重置按鈕等,下面一一介紹。
1,type=text
輸入類型是text,這是我們見的最多也是使用最多的,比如登陸輸入用戶名,注冊(cè)輸入電話號(hào)碼,電子郵件,家庭住址等等。當(dāng)然這也是Input的默認(rèn)類型。
參數(shù)name:同樣是表示的該文本輸入框名稱。
參數(shù)size:輸入框的長度大小。
參數(shù)maxlength:輸入框中允許輸入字符的最大數(shù)。
參數(shù)value:輸入框中的默認(rèn)值
特殊參數(shù)readonly:表示該框中只能顯示,不能添加修改。
<form>
your name:
<input type="text" name="yourname" size="30" maxlength="20" value="輸入框的長度為30,允許最大字符數(shù)為20"><br>
<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能讀不能修改">
</form>
2,type=password
不用我說,一看就明白的密碼輸入框,最大的區(qū)別就是當(dāng)在此輸入框輸入信息時(shí)顯示為保密字符。
參數(shù)和“type=text”相類似。
<form>
your password:
<input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密碼長度小于15
</form>
3,type=file
當(dāng)你在BBS上傳圖片,在EMAIL中上傳附件時(shí)一定少不了的東西:)
提供了一個(gè)文件目錄輸入的平臺(tái),參數(shù)有name,size。
<form>
your file:
<input type="file" name="yourfile" size="30">
</form>
4,type=hidden
非常值得注意的一個(gè),通常稱為隱藏域:如果一個(gè)非常重要的信息需要被提交到下一頁,但又不能或者無法明示的時(shí)候。
一句話,你在頁面中是看不到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
標(biāo)準(zhǔn)的一windows風(fēng)格的按鈕,當(dāng)然要讓按鈕跳轉(zhuǎn)到某個(gè)頁面上還需要加入寫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
多選框,常見于注冊(cè)時(shí)選擇愛好、性格、等信息。參數(shù)有name,value及特別參數(shù)checked(表示默認(rèn)選擇)
其實(shí)最重要的還是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
即單選框,出現(xiàn)在多選一的頁面設(shè)定中。參數(shù)同樣有name,value及特別參數(shù)checked.
不同于checkbox的是,name值一定要相同,否則就不能多選一。當(dāng)然提交到處理頁的也還是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值不同的一個(gè)例子,就不能實(shí)現(xiàn)多選一的效果了<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
比較另類的一個(gè),自己看看效果吧,可以作為提交式圖片
<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中所有內(nèi)容進(jìn)行提交action頁處理,reset則起個(gè)快速清空所有填寫內(nèi)容的功能。
<form name="form1" action="xxx.asp">
<input type="text" name="yourname">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
input 標(biāo)簽 -- 代表HTML表單的單行輸入域
input標(biāo)簽是單獨(dú)出現(xiàn)的,<input />
屬性.
Common -- 一般屬性
type -- 代表一個(gè)輸入域的顯示方式(分為輸入型,選擇型,點(diǎn)擊型)
maxlength -- 輸入域最多可以輸入文字的長度
src -- 當(dāng)使用圖片來表示按鈕時(shí),代表圖片的位置(URI)
alt -- 代表表單的提示文字,當(dāng)鼠標(biāo)停留時(shí)
size -- 輸入域的長度
value -- 輸入域的值
accesskey -- 表單的快捷鍵訪問方式
checked -- 如果是選擇型的輸入域,代表已經(jīng)被選擇
disabled -- 輸入域無法獲得焦點(diǎn),無法選擇,以灰色顯示,在表單中不起任何作用
readonly -- 輸入域可以選擇,但是無法修改
tabindex -- 輸入域的"tab"鍵遍歷順序
text 文本框
password 密碼
checkbox 多選框
radio 單選框
submit 提交
reset 重寫
file 文件
hidden 隱藏
image 圖片
button 按扭
<input> 文本框幾種常用屬性
1.取消按鈕按下時(shí)的虛線框
在input里添加屬性值 hideFocus 或者 HideFocus=true
2.只讀文本框內(nèi)容
在input里添加屬性值 readonly
3.防止退后清空的TEXT文檔(可把style內(nèi)容做做為類引用)
<INPUT
style=behavior:url(#default#savehistory); type=text
id=oPersistInput>
4.ENTER鍵可以讓光標(biāo)移到下一個(gè)輸入框
<input
onkeydown="if(event.keyCode==13)event.keyCode=9" >
5.只能為中文(有閃動(dòng))
<input onkeyup="value=value.replace(/[
-~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9">
6.只能為數(shù)字(有閃動(dòng))
<input
onkeyup="value=value.replace(/[^\d]/g,'')
"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
7.只能為數(shù)字(無閃動(dòng))
<input style="ime-mode:disabled"
onkeydown="if(event.keyCode==13)event.keyCode=9"
onKeyPress="if ((event.keyCode<48 || event.keyCode>57))
event.returnValue=false">
8.只能輸入英文和數(shù)字(有閃動(dòng))
<input
onkeyup="value=value.replace(/[\W]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
9.屏蔽輸入法
<input type="text" name="url"
style="ime-mode:disabled"
onkeydown="if(event.keyCode==13)event.keyCode=9">
10. 只能輸入 數(shù)字,小數(shù)點(diǎn),減號(hào)(-) 字符(無閃動(dòng))
<input onKeyPress="if
(event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48
|| event.keyCode>57)) event.returnValue=false">
11. 只能輸入兩位小數(shù),三位小數(shù)(有閃動(dòng))
<input maxlength=9
onkeyup="if(value.match(/^\d{3}$/))value=value.replace(value,parseInt(value/10))
;value=value.replace(/\.\d*\./g,'.')"
onKeyPress="if((event.keyCode<48 || event.keyCode>57)
&& event.keyCode!=46 && event.keyCode!=45 ||
value.match(/^\d{3}$/) || /\.\d{3}$/.test(value)) {event.returnValue=false}"
id=text_kfxe name=text_kfxe>
autocomplete="off" 關(guān)閉輸入記錄
onpaste="return false" 禁止粘貼
更多建議: