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