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