輸入標記

2024-01-14 分類：網站建設

HTML表單標記教程,這節(jié)主要講解如何在網頁中使用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屬性值用來設定在表單的文本域中，輸入任何類型的文本、數(shù)字或字母。輸入的內容以單行顯示。

基本語法

<input type="text" name="field＿name" maxlength=value size=value value="field＿value"> 語法解釋

這些屬性的含義如下表所示

文字域屬值描述 name 文字域的名稱 maxlength 文字域的大輸入字符數(shù) size 文字域的寬度 value 文字域的默認值文件范例:11-6.htm

在頁面中插入文字域。 01  02  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 密碼域的大輸入字符數(shù) size 密碼域的寬度（以字符為單位） value 密碼域的默認值文件范例:11-7.htm

在頁面中插入密碼域。 01  02  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行是密碼域。設定了密碼域的尺寸、名稱和大輸入字符數(shù)。

文件域FILE

文件域可以讓用戶在域的內部填寫自己硬盤中的文件路徑，然后通過表單上傳，這是文件域的基本功能。如在線發(fā)送E-mail時常見的附件功能。有的時候要求用戶將文件提交給網站，例如Office文檔、瀏覽者的個人照片或者其它類型的文件，這時就要用到文件域。

文件域的外觀是一個文本框加一個瀏覽按鈕，用戶既可以直接將要上傳給網站的文件的路徑寫在文本框內，也可以單擊瀏覽按鈕，在自己的電腦中找到要上傳的文件。

基本語法

<input type="File" name="field＿name"> 文件范例：11-8.htm

在頁面中插入文件域。 01  02  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

瀏覽者填寫表單時，有一些內容可以通過讓瀏覽者進行選擇的形式來實現(xiàn)。例如常見的網上調查，首先提出調查的問題，然后讓瀏覽者在若干個選項中進行選擇。又例如收集個人信息時，要求在個人愛好的選項中進行選擇等。適應以上各種不同類型調查的需要，選擇域分為兩種。

多選框：可以在若干選項中選擇多個項目單選框：在若干選項只允許選擇一項復選框能夠進行項目的多項選擇，以一個方框表示。

基本語法

<input type="checkbox" name="field＿name" checked value="value"> 語法解釋

checked表示此項被默認選中，value表示選中項目后傳送到服務器端的值。

文件范例：11-9.htm

在頁面中插入復選框。 01  02  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  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

表單中的按鈕起著至關重要的作用。按鈕可以激發(fā)提交表單的動作，可以在用戶需要修改表單的時候，將表單恢復到初始的狀態(tài)，還可以依照程序的需要，發(fā)揮其它作用。普通按鈕主要是配合JavaScript腳本來進行表單的處理。

基本語法

<input type="button" name="field＿name" value="button＿text"> 語法解釋

value值代表顯示在按鈕上面的文字。

文件范例：11-11.htm

在頁面中插入普通按鈕。 01  02  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

單擊提交按鈕后，可以實現(xiàn)表單內容的提交。

基本語法

<input type="sbmit" name="field＿name" value="button＿text"> 文件范例：11-12.htm

在頁面中插入提交按鈕。 01  02  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  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

圖像域是指可以用在提交按鈕上的圖片，這幅圖片具有按鈕的功能。使用默認的按鈕形式往往會讓人覺得單調。如果網頁使用了較為豐富的色彩或稍微復雜的設計，再使用表單默認的按鈕形式甚至會破壞整體的美感。這時可以使用圖像域，創(chuàng)建和網頁整體效果相統(tǒng)一的圖像提交按鈕。

基本語法

<input type="image" name="field＿name" src="image＿url"> 文件范例：11-14.htm

在頁面中插入圖像提交按鈕。 01  02  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

隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候，隱藏域的信息也被一起發(fā)送到瀏覽器。

基本語法

<input type="hidden" name="field＿name" value="value"> 文件范例：11-15.htm

在頁面中插入表單隱藏域。 01  02  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行就是插入的隱藏域。

本文來源于成都網站建設公司與成都網站設計制作公司-創(chuàng)新互聯(lián)成都公司！

本文名稱：輸入標記
當前路徑：http://redsoil1982.com.cn/news40/313540.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網頁設計公司、營銷型網站建設、做網站、網站設計、App開發(fā)、網站內鏈

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容