輸入標(biāo)記
2024-01-14 分類(lèi)： 網(wǎng)站建設(shè)
HTML表單標(biāo)記教程,這節(jié)主要講解如何在網(wǎng)頁(yè)中使用INPUT標(biāo)記,主要介紹INPUT標(biāo)記的屬性的使用.
輸入標(biāo)記<input>是表單中最常用的標(biāo)記之一。常用的文本域、按鈕等都使用這個(gè)標(biāo)記。
基本語(yǔ)法
01 <Form> 02 <input name="field＿name" type="type＿name"> 03 </Form> 語(yǔ)法解釋
<input>標(biāo)記的屬性如下表所示
屬性 描述 name 域的名稱(chēng) type 域的類(lèi)型 在type屬性中，包含以下屬性值
type屬性值 描述 text 文字域 password 密碼域 file 文件域 checkbox 復(fù)選框 radio 單選框 button 普通按鈕 submit 提交按鈕 reset 重置按鈕 hidden 隱藏域 image 圖像域(圖像按鈕) 文字域TEXT
text屬性值用來(lái)設(shè)定在表單的文本域中，輸入任何類(lèi)型的文本、數(shù)字或字母。輸入的內(nèi)容以單行顯示。
基本語(yǔ)法
<input type="text" name="field＿name" maxlength=value size=value value="field＿value"> 語(yǔ)法解釋
這些屬性的含義如下表所示
文字域?qū)僦?描述 name 文字域的名稱(chēng) maxlength 文字域的大輸入字符數(shù) size 文字域的寬度 value 文字域的默認(rèn)值 文件范例:11-6.htm
在頁(yè)面中插入文字域。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-6.htm --> 03 <!-- 文件說(shuō)明：插入文字域 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入文字域</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20> 13 <br> 14 網(wǎng)址：<input type="text" name="URL" size=20 maxlength=50 value="http://"> 15 <br> 16 </Form> 17 </body> 18 </html>
文件說(shuō)明
第11行是表單標(biāo)記，表單的名稱(chēng)為invest，將表單內(nèi)容以電子郵件的方式傳送，并使用get傳輸方式。第12行設(shè)定"性名"的文本框?yàn)?0字符寬度，第14行設(shè)定"網(wǎng)址"的文本框?yàn)?0字符寬度，但大可以輸入50個(gè)字符，并且顯示"http://"的初始值。
密碼域PASSWORD
在表單中還有一種文本域的形式為密碼域，輸入到文本域中的文字均以星號(hào)"?"或圓點(diǎn)顯示。
基本語(yǔ)法
<input type="password" name="field＿name" maxlength=value size=value> 語(yǔ)法解釋
這些屬性的含義如下表所示
文字域?qū)傩?描述 name 密碼域的名稱(chēng) maxlength 密碼域的大輸入字符數(shù) size 密碼域的寬度（以字符為單位） value 密碼域的默認(rèn)值 文件范例:11-7.htm
在頁(yè)面中插入密碼域。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-7.htm --> 03 <!-- 文件說(shuō)明：插入密碼域 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入密碼域</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20> 13 <br> 14 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"> 15 <br> 16 密碼：<input type="password" name="password" size=20 maxlength=8> 17 <br> 18 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8> 19 </Form> 20 </body> 21 </html> 文件說(shuō)明
第16行和第18行是密碼域。設(shè)定了密碼域的尺寸、名稱(chēng)和大輸入字符數(shù)。
文件域FILE
文件域可以讓用戶(hù)在域的內(nèi)部填寫(xiě)自己硬盤(pán)中的文件路徑，然后通過(guò)表單上傳，這是文件域的基本功能。如在線(xiàn)發(fā)送E-mail時(shí)常見(jiàn)的附件功能。有的時(shí)候要求用戶(hù)將文件提交給網(wǎng)站，例如Office文檔、瀏覽者的個(gè)人照片或者其它類(lèi)型的文件，這時(shí)就要用到文件域。
文件域的外觀(guān)是一個(gè)文本框加一個(gè)瀏覽按鈕，用戶(hù)既可以直接將要上傳給網(wǎng)站的文件的路徑寫(xiě)在文本框內(nèi)，也可以單擊瀏覽按鈕，在自己的電腦中找到要上傳的文件。
基本語(yǔ)法
<input type="File" name="field＿name"> 文件范例：11-8.htm
在頁(yè)面中插入文件域。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-8.htm --> 03 <!-- 文件說(shuō)明：插入文件域 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入文件域</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br> 16 請(qǐng)上傳你的照片：<input type="file" name="File"> 17 </Form> 18 </body> 19 </html> 文件說(shuō)明
第16行就是插入的文件域。
復(fù)選框CHECKBOX
瀏覽者填寫(xiě)表單時(shí)，有一些內(nèi)容可以通過(guò)讓瀏覽者進(jìn)行選擇的形式來(lái)實(shí)現(xiàn)。例如常見(jiàn)的網(wǎng)上調(diào)查，首先提出調(diào)查的問(wèn)題，然后讓瀏覽者在若干個(gè)選項(xiàng)中進(jìn)行選擇。又例如收集個(gè)人信息時(shí)，要求在個(gè)人愛(ài)好的選項(xiàng)中進(jìn)行選擇等。適應(yīng)以上各種不同類(lèi)型調(diào)查的需要，選擇域分為兩種。
多選框：可以在若干選項(xiàng)中選擇多個(gè)項(xiàng)目 單選框：在若干選項(xiàng)只允許選擇一項(xiàng) 復(fù)選框能夠進(jìn)行項(xiàng)目的多項(xiàng)選擇，以一個(gè)方框表示。
基本語(yǔ)法
<input type="checkbox" name="field＿name" checked value="value"> 語(yǔ)法解釋
checked表示此項(xiàng)被默認(rèn)選中，value表示選中項(xiàng)目后傳送到服務(wù)器端的值。
文件范例：11-9.htm
在頁(yè)面中插入復(fù)選框。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-9.htm --> 04 <!-- 文件說(shuō)明：插入復(fù)選框 --> 05 <!-- ------------------------------ --> 06 <html> 07 <head> 08 <title>插入復(fù)選框</title> 09 </head> 10 <body> 11 <h1>用戶(hù)調(diào)查</h1> 12 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 13 姓名：<input type="text" name="username" size=20><br> 14 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 15 密碼：<input type="password" name="password" size=20 maxlength=8><br> 16 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br> 17 請(qǐng)上傳你的照片：<input type="File" name="File"><br> 18 請(qǐng)選擇你喜歡的音樂(lè)： 19 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 20 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 21 <input type="checkbox" name="m3" value="pop">流行樂(lè) 22 </Form> 23 </body> 24 </html> 文件說(shuō)明
第18行到20行就是插入的復(fù)選框。其中每一個(gè)復(fù)選框有其獨(dú)立的名稱(chēng)和值，"搖滾樂(lè)"項(xiàng)目是被默認(rèn)選中的。
單選框RADIO
單選框能夠進(jìn)行項(xiàng)目的單項(xiàng)選擇，以一個(gè)圓框選擇。
基本語(yǔ)法
<input type="radio" name="field＿name" checked value="'value" > 語(yǔ)法解釋
checked表示此項(xiàng)被默認(rèn)選中，value表示選中項(xiàng)目后傳送到服務(wù)器端的值。
文件范例：11-10.htm
在頁(yè)面中插入單選框。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-10.htm --> 03 <!-- 文件說(shuō)明：插入單選框 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入單選框</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br> 16 請(qǐng)上傳你的照片：<input type="File" name="File"><br> 17 請(qǐng)選擇你喜歡的音樂(lè)： 18 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 19 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 20 <input type="checkbox" name="m2" value="pop">流行樂(lè)<br> 21 請(qǐng)選擇你居住的城市： 22 <input type="radio" name="city" value="beijing" checked>北京 23 <input type="radio" name="city" value="shanghai">上海 24 <input type="radio" name="city" value="nanjing">南京 25 </Form> 26 </body> 27 </html>
文件說(shuō)明
第22行到第24行就是插入的單選框。其中每一個(gè)單選框的名稱(chēng)是相同的，有其獨(dú)立的值，"北京"項(xiàng)目是被默認(rèn)選中的。
普通按紐BUTTON
表單中的按鈕起著至關(guān)重要的作用。按鈕可以激發(fā)提交表單的動(dòng)作，可以在用戶(hù)需要修改表單的時(shí)候，將表單恢復(fù)到初始的狀態(tài)，還可以依照程序的需要，發(fā)揮其它作用。普通按鈕主要是配合JavaScript腳本來(lái)進(jìn)行表單的處理。
基本語(yǔ)法
<input type="button" name="field＿name" value="button＿text"> 語(yǔ)法解釋
value值代表顯示在按鈕上面的文字。
文件范例：11-11.htm
在頁(yè)面中插入普通按鈕。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-11.htm --> 03 <!-- 文件說(shuō)明：插入普通按鈕 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入普通按鈕</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br> 16 請(qǐng)上傳你的照片：<input type="File" name="File"><br> 17 請(qǐng)選擇你喜歡的音樂(lè)： 18 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 19 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 20 <input type="checkbox" name="m2" value="pop">流行樂(lè)<br> 21 請(qǐng)選擇你居住的城市： 22 <input type="radio" name="city" value="beijing" checked>北京 23 <input type="radio" name="city" value="shanghai">上海 24 <input type="radio" name="city" value="nanjing">南京<br> 25 <input type="button" name="button" value="普通按鈕"> 26 </Form> 27 </body> 28 </html> 文件說(shuō)明
第25行就是插入的普通按鈕。
提交按紐SUBMIT
單擊提交按鈕后，可以實(shí)現(xiàn)表單內(nèi)容的提交。
基本語(yǔ)法
<input type="sbmit" name="field＿name" value="button＿text"> 文件范例：11-12.htm
在頁(yè)面中插入提交按鈕。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-12.htm --> 03 <!-- 文件說(shuō)明：插入提交按鈕 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入提交按鈕</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=post name=invest enctype=text/plain> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8>br> 16 請(qǐng)上傳你的照片：<input type="File" name="File"><br> 17 請(qǐng)選擇你喜歡的音樂(lè)： 18 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 19 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 20 <input type="checkbox" name="m2" value="pop">流行樂(lè)<br> 21 請(qǐng)選擇你居住的城市： 22 <input type="radio" name="city" value="beijing" checked>北京 23 <input type="radio" name="city" value="shanghai">上海 24 <input type="radio" name="city" value="nanjing">南京<br> 25 <input type="submit" name="submit" value="提交表單"> 26 </Form> 27 </body> 28 </html>
文件說(shuō)明
第25行就是插入的提交按鈕。
重置按紐RESET
單擊重置按鈕后，可以清除表單的內(nèi)容，恢復(fù)默認(rèn)的表單內(nèi)容設(shè)定。
基本語(yǔ)法
<input type="reset" name="field＿name" value="button＿text"> 文件范例：11-13.htm
在頁(yè)面中插入重置按鈕。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-13.htm --> 03 <!-- 文件說(shuō)明：插入重置按鈕 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入重置按鈕</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlengthH=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br> 16 請(qǐng)上傳你的照片：<input type="file" name="File"><br> 17 請(qǐng)選擇你喜歡的音樂(lè)： 18 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 19 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 20 <input type="checkbox" name="m2" value="pop">流行樂(lè)<br> 21 請(qǐng)選擇你居住的城市： 22 <input type="radio" name="city" value="beijing" checked>北京 23 <input type="radio" name="city" value="shanghai">上海 24 <input type="radio" name="city" value="nanjing">南京<br> 25 <input type="submit" name="submit" value="提交表單"> 26 <input type="reset" name="reset" value="重置表單"> 27 </Form> 28 </body> 29 </html> 文件說(shuō)明
第26行就是插入的重置按鈕。
圖像域IMAGE
圖像域是指可以用在提交按鈕上的圖片，這幅圖片具有按鈕的功能。使用默認(rèn)的按鈕形式往往會(huì)讓人覺(jué)得單調(diào)。如果網(wǎng)頁(yè)使用了較為豐富的色彩或稍微復(fù)雜的設(shè)計(jì)，再使用表單默認(rèn)的按鈕形式甚至?xí)茐恼w的美感。這時(shí)可以使用圖像域，創(chuàng)建和網(wǎng)頁(yè)整體效果相統(tǒng)一的圖像提交按鈕。
基本語(yǔ)法
<input type="image" name="field＿name" src="image＿url"> 文件范例：11-14.htm
在頁(yè)面中插入圖像提交按鈕。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-14.htm --> 03 <!-- 文件說(shuō)明：插入圖像提交按鈕 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入圖像提交按鈕</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br> 16 請(qǐng)上傳你的照片：<input type="File" name="File"><br> 17 請(qǐng)選擇你喜歡的音樂(lè)： 18 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 19 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 20 <input type="checkbox" name="m2" value="pop">流行樂(lè)<br> 21 請(qǐng)選擇你居住的城市： 22 <input type="radio" name="city" value="beijing" checked>北京 23 <input type="radio" name="city" value="shanghai">上海 24 <input type="radio" name="city" value="nanjing">南京<br> 25 <input type="image" name="image" src="11-14.GIF"> 26 </Form> 27 </body> 28 </html>
文件說(shuō)明
第25行就是插入的圖像提交按鈕。
隱藏域HIDDEN
隱藏域在頁(yè)面中對(duì)于用戶(hù)是不可見(jiàn)的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到瀏覽器。
基本語(yǔ)法
<input type="hidden" name="field＿name" value="value"> 文件范例：11-15.htm
在頁(yè)面中插入表單隱藏域。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-15.htm --> 03 <!-- 文件說(shuō)明：插入隱藏域 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入隱藏域</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br>
16 請(qǐng)上傳你的照片：<input type="file" name="File"><br> 17 請(qǐng)選擇你喜歡的音樂(lè)： 18 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 19 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 20 <input type="checkbox" name="m2" value="pop">流行樂(lè)<br> 21 請(qǐng)選擇你居住的城市： 22 <input type="radio" name="city" value="beijing" checked>北京 23 <input type="radio" name="city" value="shanghai">上海 24 <input type="radio" name="city" value="nanjing">南京<br> 25 <input type="image" name="image" src="10-14.GIF"> 26 <input type="hidden" name="Form_name" value="invest"> 27 </Form> 28 </body> 29 </html> 文件說(shuō)明
第26行就是插入的隱藏域。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
輸入標(biāo)記<input>是表單中最常用的標(biāo)記之一。常用的文本域、按鈕等都使用這個(gè)標(biāo)記。
基本語(yǔ)法
01 <Form> 02 <input name="field＿name" type="type＿name"> 03 </Form> 語(yǔ)法解釋
<input>標(biāo)記的屬性如下表所示
屬性 描述 name 域的名稱(chēng) type 域的類(lèi)型 在type屬性中，包含以下屬性值
type屬性值 描述 text 文字域 password 密碼域 file 文件域 checkbox 復(fù)選框 radio 單選框 button 普通按鈕 submit 提交按鈕 reset 重置按鈕 hidden 隱藏域 image 圖像域(圖像按鈕) 文字域TEXT
text屬性值用來(lái)設(shè)定在表單的文本域中，輸入任何類(lèi)型的文本、數(shù)字或字母。輸入的內(nèi)容以單行顯示。
基本語(yǔ)法
<input type="text" name="field＿name" maxlength=value size=value value="field＿value"> 語(yǔ)法解釋
這些屬性的含義如下表所示
文字域?qū)僦?描述 name 文字域的名稱(chēng) maxlength 文字域的大輸入字符數(shù) size 文字域的寬度 value 文字域的默認(rèn)值 文件范例:11-6.htm
在頁(yè)面中插入文字域。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-6.htm --> 03 <!-- 文件說(shuō)明：插入文字域 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入文字域</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20> 13 <br> 14 網(wǎng)址：<input type="text" name="URL" size=20 maxlength=50 value="http://"> 15 <br> 16 </Form> 17 </body> 18 </html>
文件說(shuō)明
第11行是表單標(biāo)記，表單的名稱(chēng)為invest，將表單內(nèi)容以電子郵件的方式傳送，并使用get傳輸方式。第12行設(shè)定"性名"的文本框?yàn)?0字符寬度，第14行設(shè)定"網(wǎng)址"的文本框?yàn)?0字符寬度，但大可以輸入50個(gè)字符，并且顯示"http://"的初始值。
密碼域PASSWORD
在表單中還有一種文本域的形式為密碼域，輸入到文本域中的文字均以星號(hào)"?"或圓點(diǎn)顯示。
基本語(yǔ)法
<input type="password" name="field＿name" maxlength=value size=value> 語(yǔ)法解釋
這些屬性的含義如下表所示
文字域?qū)傩?描述 name 密碼域的名稱(chēng) maxlength 密碼域的大輸入字符數(shù) size 密碼域的寬度（以字符為單位） value 密碼域的默認(rèn)值 文件范例:11-7.htm
在頁(yè)面中插入密碼域。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-7.htm --> 03 <!-- 文件說(shuō)明：插入密碼域 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入密碼域</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20> 13 <br> 14 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"> 15 <br> 16 密碼：<input type="password" name="password" size=20 maxlength=8> 17 <br> 18 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8> 19 </Form> 20 </body> 21 </html> 文件說(shuō)明
第16行和第18行是密碼域。設(shè)定了密碼域的尺寸、名稱(chēng)和大輸入字符數(shù)。
文件域FILE
文件域可以讓用戶(hù)在域的內(nèi)部填寫(xiě)自己硬盤(pán)中的文件路徑，然后通過(guò)表單上傳，這是文件域的基本功能。如在線(xiàn)發(fā)送E-mail時(shí)常見(jiàn)的附件功能。有的時(shí)候要求用戶(hù)將文件提交給網(wǎng)站，例如Office文檔、瀏覽者的個(gè)人照片或者其它類(lèi)型的文件，這時(shí)就要用到文件域。
文件域的外觀(guān)是一個(gè)文本框加一個(gè)瀏覽按鈕，用戶(hù)既可以直接將要上傳給網(wǎng)站的文件的路徑寫(xiě)在文本框內(nèi)，也可以單擊瀏覽按鈕，在自己的電腦中找到要上傳的文件。
基本語(yǔ)法
<input type="File" name="field＿name"> 文件范例：11-8.htm
在頁(yè)面中插入文件域。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-8.htm --> 03 <!-- 文件說(shuō)明：插入文件域 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入文件域</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br> 16 請(qǐng)上傳你的照片：<input type="file" name="File"> 17 </Form> 18 </body> 19 </html> 文件說(shuō)明
第16行就是插入的文件域。
復(fù)選框CHECKBOX
瀏覽者填寫(xiě)表單時(shí)，有一些內(nèi)容可以通過(guò)讓瀏覽者進(jìn)行選擇的形式來(lái)實(shí)現(xiàn)。例如常見(jiàn)的網(wǎng)上調(diào)查，首先提出調(diào)查的問(wèn)題，然后讓瀏覽者在若干個(gè)選項(xiàng)中進(jìn)行選擇。又例如收集個(gè)人信息時(shí)，要求在個(gè)人愛(ài)好的選項(xiàng)中進(jìn)行選擇等。適應(yīng)以上各種不同類(lèi)型調(diào)查的需要，選擇域分為兩種。
多選框：可以在若干選項(xiàng)中選擇多個(gè)項(xiàng)目 單選框：在若干選項(xiàng)只允許選擇一項(xiàng) 復(fù)選框能夠進(jìn)行項(xiàng)目的多項(xiàng)選擇，以一個(gè)方框表示。
基本語(yǔ)法
<input type="checkbox" name="field＿name" checked value="value"> 語(yǔ)法解釋
checked表示此項(xiàng)被默認(rèn)選中，value表示選中項(xiàng)目后傳送到服務(wù)器端的值。
文件范例：11-9.htm
在頁(yè)面中插入復(fù)選框。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-9.htm --> 04 <!-- 文件說(shuō)明：插入復(fù)選框 --> 05 <!-- ------------------------------ --> 06 <html> 07 <head> 08 <title>插入復(fù)選框</title> 09 </head> 10 <body> 11 <h1>用戶(hù)調(diào)查</h1> 12 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 13 姓名：<input type="text" name="username" size=20><br> 14 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 15 密碼：<input type="password" name="password" size=20 maxlength=8><br> 16 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br> 17 請(qǐng)上傳你的照片：<input type="File" name="File"><br> 18 請(qǐng)選擇你喜歡的音樂(lè)： 19 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 20 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 21 <input type="checkbox" name="m3" value="pop">流行樂(lè) 22 </Form> 23 </body> 24 </html> 文件說(shuō)明
第18行到20行就是插入的復(fù)選框。其中每一個(gè)復(fù)選框有其獨(dú)立的名稱(chēng)和值，"搖滾樂(lè)"項(xiàng)目是被默認(rèn)選中的。
單選框RADIO
單選框能夠進(jìn)行項(xiàng)目的單項(xiàng)選擇，以一個(gè)圓框選擇。
基本語(yǔ)法
<input type="radio" name="field＿name" checked value="'value" > 語(yǔ)法解釋
checked表示此項(xiàng)被默認(rèn)選中，value表示選中項(xiàng)目后傳送到服務(wù)器端的值。
文件范例：11-10.htm
在頁(yè)面中插入單選框。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-10.htm --> 03 <!-- 文件說(shuō)明：插入單選框 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入單選框</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br> 16 請(qǐng)上傳你的照片：<input type="File" name="File"><br> 17 請(qǐng)選擇你喜歡的音樂(lè)： 18 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 19 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 20 <input type="checkbox" name="m2" value="pop">流行樂(lè)<br> 21 請(qǐng)選擇你居住的城市： 22 <input type="radio" name="city" value="beijing" checked>北京 23 <input type="radio" name="city" value="shanghai">上海 24 <input type="radio" name="city" value="nanjing">南京 25 </Form> 26 </body> 27 </html>
文件說(shuō)明
第22行到第24行就是插入的單選框。其中每一個(gè)單選框的名稱(chēng)是相同的，有其獨(dú)立的值，"北京"項(xiàng)目是被默認(rèn)選中的。
普通按紐BUTTON
表單中的按鈕起著至關(guān)重要的作用。按鈕可以激發(fā)提交表單的動(dòng)作，可以在用戶(hù)需要修改表單的時(shí)候，將表單恢復(fù)到初始的狀態(tài)，還可以依照程序的需要，發(fā)揮其它作用。普通按鈕主要是配合JavaScript腳本來(lái)進(jìn)行表單的處理。
基本語(yǔ)法
<input type="button" name="field＿name" value="button＿text"> 語(yǔ)法解釋
value值代表顯示在按鈕上面的文字。
文件范例：11-11.htm
在頁(yè)面中插入普通按鈕。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-11.htm --> 03 <!-- 文件說(shuō)明：插入普通按鈕 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入普通按鈕</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br> 16 請(qǐng)上傳你的照片：<input type="File" name="File"><br> 17 請(qǐng)選擇你喜歡的音樂(lè)： 18 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 19 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 20 <input type="checkbox" name="m2" value="pop">流行樂(lè)<br> 21 請(qǐng)選擇你居住的城市： 22 <input type="radio" name="city" value="beijing" checked>北京 23 <input type="radio" name="city" value="shanghai">上海 24 <input type="radio" name="city" value="nanjing">南京<br> 25 <input type="button" name="button" value="普通按鈕"> 26 </Form> 27 </body> 28 </html> 文件說(shuō)明
第25行就是插入的普通按鈕。
提交按紐SUBMIT
單擊提交按鈕后，可以實(shí)現(xiàn)表單內(nèi)容的提交。
基本語(yǔ)法
<input type="sbmit" name="field＿name" value="button＿text"> 文件范例：11-12.htm
在頁(yè)面中插入提交按鈕。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-12.htm --> 03 <!-- 文件說(shuō)明：插入提交按鈕 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入提交按鈕</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=post name=invest enctype=text/plain> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8>br> 16 請(qǐng)上傳你的照片：<input type="File" name="File"><br> 17 請(qǐng)選擇你喜歡的音樂(lè)： 18 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 19 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 20 <input type="checkbox" name="m2" value="pop">流行樂(lè)<br> 21 請(qǐng)選擇你居住的城市： 22 <input type="radio" name="city" value="beijing" checked>北京 23 <input type="radio" name="city" value="shanghai">上海 24 <input type="radio" name="city" value="nanjing">南京<br> 25 <input type="submit" name="submit" value="提交表單"> 26 </Form> 27 </body> 28 </html>
文件說(shuō)明
第25行就是插入的提交按鈕。
重置按紐RESET
單擊重置按鈕后，可以清除表單的內(nèi)容，恢復(fù)默認(rèn)的表單內(nèi)容設(shè)定。
基本語(yǔ)法
<input type="reset" name="field＿name" value="button＿text"> 文件范例：11-13.htm
在頁(yè)面中插入重置按鈕。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-13.htm --> 03 <!-- 文件說(shuō)明：插入重置按鈕 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入重置按鈕</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlengthH=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br> 16 請(qǐng)上傳你的照片：<input type="file" name="File"><br> 17 請(qǐng)選擇你喜歡的音樂(lè)： 18 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 19 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 20 <input type="checkbox" name="m2" value="pop">流行樂(lè)<br> 21 請(qǐng)選擇你居住的城市： 22 <input type="radio" name="city" value="beijing" checked>北京 23 <input type="radio" name="city" value="shanghai">上海 24 <input type="radio" name="city" value="nanjing">南京<br> 25 <input type="submit" name="submit" value="提交表單"> 26 <input type="reset" name="reset" value="重置表單"> 27 </Form> 28 </body> 29 </html> 文件說(shuō)明
第26行就是插入的重置按鈕。
圖像域IMAGE
圖像域是指可以用在提交按鈕上的圖片，這幅圖片具有按鈕的功能。使用默認(rèn)的按鈕形式往往會(huì)讓人覺(jué)得單調(diào)。如果網(wǎng)頁(yè)使用了較為豐富的色彩或稍微復(fù)雜的設(shè)計(jì)，再使用表單默認(rèn)的按鈕形式甚至?xí)茐恼w的美感。這時(shí)可以使用圖像域，創(chuàng)建和網(wǎng)頁(yè)整體效果相統(tǒng)一的圖像提交按鈕。
基本語(yǔ)法
<input type="image" name="field＿name" src="image＿url"> 文件范例：11-14.htm
在頁(yè)面中插入圖像提交按鈕。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-14.htm --> 03 <!-- 文件說(shuō)明：插入圖像提交按鈕 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入圖像提交按鈕</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br> 16 請(qǐng)上傳你的照片：<input type="File" name="File"><br> 17 請(qǐng)選擇你喜歡的音樂(lè)： 18 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 19 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 20 <input type="checkbox" name="m2" value="pop">流行樂(lè)<br> 21 請(qǐng)選擇你居住的城市： 22 <input type="radio" name="city" value="beijing" checked>北京 23 <input type="radio" name="city" value="shanghai">上海 24 <input type="radio" name="city" value="nanjing">南京<br> 25 <input type="image" name="image" src="11-14.GIF"> 26 </Form> 27 </body> 28 </html>
文件說(shuō)明
第25行就是插入的圖像提交按鈕。
隱藏域HIDDEN
隱藏域在頁(yè)面中對(duì)于用戶(hù)是不可見(jiàn)的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到瀏覽器。
基本語(yǔ)法
<input type="hidden" name="field＿name" value="value"> 文件范例：11-15.htm
在頁(yè)面中插入表單隱藏域。 01 <!-- ------------------------------ --> 02 <!-- 文件范例：11-15.htm --> 03 <!-- 文件說(shuō)明：插入隱藏域 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>插入隱藏域</title> 08 </head> 09 <body> 10 <h1>用戶(hù)調(diào)查</h1> 11 <Form action=mailto:tslxg@hotmail.com method=get name=invest> 12 姓名：<input type="text" name="username" size=20><br> 13 網(wǎng)址：<input type="text" name="url" size=20 maxlength=50 value="http://"><br> 14 密碼：<input type="password" name="password" size=20 maxlength=8><br> 15 確認(rèn)密碼：<input type="password" name="password_confirm" size=20 maxlength=8><br>
16 請(qǐng)上傳你的照片：<input type="file" name="File"><br> 17 請(qǐng)選擇你喜歡的音樂(lè)： 18 <input type="checkbox" name="m1" value="rock" checked>搖滾樂(lè) 19 <input type="checkbox" name="m2" value="jazz">爵士樂(lè) 20 <input type="checkbox" name="m2" value="pop">流行樂(lè)<br> 21 請(qǐng)選擇你居住的城市： 22 <input type="radio" name="city" value="beijing" checked>北京 23 <input type="radio" name="city" value="shanghai">上海 24 <input type="radio" name="city" value="nanjing">南京<br> 25 <input type="image" name="image" src="10-14.GIF"> 26 <input type="hidden" name="Form_name" value="invest"> 27 </Form> 28 </body> 29 </html> 文件說(shuō)明
第26行就是插入的隱藏域。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
本文名稱(chēng)：輸入標(biāo)記
當(dāng)前路徑：http://jinyejixie.com/news40/313540.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站設(shè)計(jì)、App開(kāi)發(fā)、網(wǎng)站內(nèi)鏈
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 無(wú)錫網(wǎng)站建設(shè)如何提高友好度？ 2024-01-14
- 我來(lái)告訴你做成都網(wǎng)站seo的目的是什么 2024-01-14
- 了解共享主機(jī)和VPS主機(jī)以及專(zhuān)用服務(wù)器的可靠性 2024-01-14
- 福州網(wǎng)站建設(shè)8個(gè)基本流程 2024-01-14
- 天津網(wǎng)站建設(shè)制作常用的布局方法有哪些？ 2024-01-14
- 網(wǎng)站分析獲得成功法則 2024-01-14
- 新網(wǎng)頁(yè)大法：深底色頁(yè)面設(shè)計(jì)指南 2024-01-14
- 成都建站公司解釋網(wǎng)站降級(jí)的原因？ 2024-01-14
- 什么是微信小程序？對(duì)企業(yè)的發(fā)展有何益處？ 2024-01-14
- 成都響應(yīng)式網(wǎng)站建設(shè)(泉州市響應(yīng)式網(wǎng)站建設(shè)公司) 2024-01-14
- 建設(shè)工程行業(yè)招投標(biāo)綜合信息門(mén)戶(hù)——建筑市場(chǎng)與交易網(wǎng) 2024-01-14
- 網(wǎng)站建設(shè)中常見(jiàn)的網(wǎng)頁(yè)視覺(jué)吸引的模式 2024-01-14
- 一個(gè)優(yōu)秀的設(shè)計(jì)師需要懂的思考 2024-01-14
- 使您的網(wǎng)站更具影響力的5個(gè)技巧 2024-01-14
- 響應(yīng)式網(wǎng)站制作真的有必要嗎 2024-01-14
- 分享企業(yè)電子商務(wù)網(wǎng)站要做好以下幾點(diǎn)準(zhǔn)備 2024-01-14
- 成都網(wǎng)站建設(shè)期內(nèi)，怎樣明確一個(gè)企業(yè)網(wǎng)站的關(guān)鍵字？ 2024-01-14
- 了解美國(guó)VPS托管和專(zhuān)用服務(wù)器托管之間的區(qū)別 2024-01-14
- 網(wǎng)站優(yōu)化必須考慮的問(wèn)題 2024-01-14