国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢(xún) 在線咨詢(xún)
15158846557 或 在線咨詢(xún)
所在位置： 首頁(yè) > 營(yíng)銷(xiāo)資訊 > 網(wǎng)站運(yùn)營(yíng) > HTML5創(chuàng)建表單（上）

HTML5創(chuàng)建表單（上）

時(shí)間：2023-07-26 14:36:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-26 14:36:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

HTML5創(chuàng)建表單（上）：

前言

首先感謝各位的支持，由于這兩天真的很忙，事有點(diǎn)多的兼顧不來(lái)，故不得已停更了兩天。作為一個(gè)偏正經(jīng)的欄目，正是由于臺(tái)前幕后各位的支持與幫助，才使得我們走的更遠(yuǎn)。這次我們了解HTML5基礎(chǔ)系列的最后一部分內(nèi)容，由于內(nèi)容比較多，故分成了上、下兩部分。表單在網(wǎng)頁(yè)上的作用也是很重要的，主要負(fù)責(zé)的是采集一些瀏覽者的相關(guān)信息。比如像注冊(cè)列表、留言表和調(diào)查表等。在HTML5中，表單具有多個(gè)新的表單輸入類(lèi)型，這使得HTML5的輸入、控制與驗(yàn)證更加的方便與人性化。這次主要給大家介紹表單的基本使用。




表單概述

表單主要是用來(lái)收集網(wǎng)頁(yè)上瀏覽者的相關(guān)信息，它與表格不同，表格一般來(lái)說(shuō)瀏覽者只能閱讀無(wú)法進(jìn)行輸入，但表單就是給用戶(hù)進(jìn)行輸入、控制和驗(yàn)證用的。表單的標(biāo)記為<form></form>。表單的基本語(yǔ)法格式如下：

1<form action="url" method="get|post" enctype="mime">2</form>其中，action指定處理提交表單的格式，它可以是一個(gè)URL或者一個(gè)電子郵箱地址；method指明提交表單的HTTP方法。enctype指明用來(lái)把表單提交給服務(wù)器時(shí)的互聯(lián)網(wǎng)網(wǎng)媒體形式。
表單是一個(gè)能夠包含表單元素的區(qū)域，我們通過(guò)使用不同的表單元素來(lái)達(dá)到我們需要的效果。
先來(lái)看如下一個(gè)例子：

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表單的基本使用</title> 6</head> 7<body> 8 <form> 9 下面是輸入用戶(hù)登錄信息<br>10 用戶(hù)名稱(chēng)11 <input type="text" name="user" ><br>12 用戶(hù)密碼13 <input type="password" name="password" ><br>14 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;15 <input type="submit" value="登錄">16 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;17 <input type="reset" value="重置">18</form>19</body>20</html>渲染出來(lái)的效果如下：


表單基本元素的使用

表單元素是能夠讓用戶(hù)在表單中輸入信息的元素，常見(jiàn)的有文本框、密碼框、下來(lái)菜單、單選框、復(fù)選框等，以用來(lái)滿(mǎn)足不同的需要。

單行文本輸入框text

文本框是一種用來(lái)讓訪問(wèn)者自行輸入內(nèi)容的表單對(duì)象，通常被用來(lái)填寫(xiě)某單個(gè)字或者一些簡(jiǎn)短的回答，比如說(shuō)用戶(hù)的姓名和地址等。代碼格式如下：

1<input type="text" name="..." size="..." maxlength="..." value="...">下面對(duì)這些屬性進(jìn)行一個(gè)簡(jiǎn)單的說(shuō)明，type="text"定義單行文本輸入框，name定義文本框的名稱(chēng)，為了保證數(shù)據(jù)采集的準(zhǔn)確性，故而要定義一個(gè)獨(dú)一無(wú)二的名稱(chēng)；size屬性定義文本框的寬度，單位是單個(gè)字符寬度；maxlength定義最多輸入的字符數(shù)；value屬性定義文本框的初始值。
看如下一個(gè)例子：

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表單的基本使用</title> 6</head> 7<body> 8 <form> 9 用戶(hù)名稱(chēng):<br>10 <input type="text" name="username" size="20" maxlength="15" ><br>11 用戶(hù)地址:<br>12 <input type="text" name="address" size="20" maxlength="15" ><br>13</form>14</body>15</html>渲染結(jié)果如下：


多行文本框標(biāo)記textarea

多行文本框標(biāo)記textarea主要用來(lái)輸入比較長(zhǎng)的文本信息，代碼格式如下：

1<textarea name="..." cols="..." rows="..." wrap="...">2</textarea>主要新出現(xiàn)的屬性，cols定義多行文本框的寬度，單位是單個(gè)字符寬度；rows多行文本框的高度，單位是單個(gè)字符高度；wrap屬性定義輸入內(nèi)容大于文本域是顯示的方式。
看如下一個(gè)例子：

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表單的基本使用</title> 6</head> 7<body> 8 <form> 9 你對(duì)本網(wǎng)站的建議是：<br>10 <textarea name="advice" cols="50" rows="5"></textarea>11 <br>12 <input type="submit" value="提交">13 </form>14</body>15</html>渲染之后得結(jié)果：


密碼域password

密碼輸入框是一種特殊的文本框，內(nèi)容是十分的重要的，一般我們?cè)诖溯斎氲臅r(shí)候，顯示的黑點(diǎn)或者其他符號(hào)，主要還是考慮到了信息安全。，代碼格式如下：

1<input type="password" name="..." size="..." maxlength="...">前面有過(guò)類(lèi)似的例子，在此就不重復(fù)了。

單選按鈕radio

單選按鈕主要是讓網(wǎng)頁(yè)瀏覽者在一組選項(xiàng)中選擇其中之一，代碼格式如下：

1<input type="radio" name="..." value="...">其中，type="radio"定義單選按鈕；name定義單選按鈕的名稱(chēng)，單選按鈕都是以組為單位使用的，在同一組中的單選項(xiàng)都必須用同一名稱(chēng)。
看如下一個(gè)例子：

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表單的基本使用</title> 6</head> 7<body> 8 <form> 9 請(qǐng)選擇你感興趣的圖書(shū)類(lèi)型：<br> <!-- 單選按鈕radio-->10 <input type="radio" name="book" value="Book1">網(wǎng)站編程<br>11 <input type="radio" name="book" value="Book2">辦公軟件<br>12 <input type="radio" name="book" value="Book3">設(shè)計(jì)軟件<br>13 <input type="radio" name="book" value="Book4">網(wǎng)絡(luò)管理<br>14 <input type="radio" name="book" value="Book5" checked>黑客攻防<br>15 </form>16</body>17</html>渲染結(jié)果如下：


復(fù)選框checkbox

前面講了單選，有單選肯定就會(huì)有多選（復(fù)選）。其代碼格式如下：

1<input type="checkbox" name="..." value="...">看如下一個(gè)例子：

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表單的基本使用</title> 6</head> 7<body> 8 <form> 9 請(qǐng)選擇你感興趣的圖書(shū)類(lèi)型：<br> <!-- 復(fù)選框checkbox-->10 <input type="checkbox" name="book" value="Book1">網(wǎng)站編程<br>11 <input type="checkbox" name="book" value="Book2">辦公軟件<br>12 <input type="checkbox" name="book" value="Book3">設(shè)計(jì)軟件<br>13 <input type="checkbox" name="book" value="Book4">網(wǎng)絡(luò)管理<br>14 <input type="checkbox" name="book" value="Book5" checked>黑客攻防<br>15 </form>16</body>17</html>渲染結(jié)果如下：


選擇列表標(biāo)記<select>

下拉選擇框主要用于在有限的空間里設(shè)置多個(gè)選項(xiàng)，它既可以用來(lái)做單選，也可以用來(lái)做多選，代碼如下：

1<select name="..." size="..." multiple>2 <option value="..." selected>3 ...4 </option>5 ...6</select>看如下一個(gè)例子：

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表單的基本使用</title> 6</head> 7<body> 8 <form> 9 請(qǐng)選擇你感興趣的圖書(shū)類(lèi)型：<br> <!-- 選擇列表標(biāo)記select-->10 <select name="fruit" size="3" multiple>11 <option value="BOOK1">網(wǎng)站編程</option>12 <option value="BOOK2">辦公軟件</option>13 <option value="BOOK3">設(shè)計(jì)軟件</option>14 <option value="BOOK4">網(wǎng)絡(luò)管理</option>15 <option value="BOOK5">黑客攻防</option>16 </select>17 <br/>18</body>19</html>渲染結(jié)果如下：


普通按鈕button

普通按鈕用來(lái)控制其他定義了了解腳本的處理工作，代碼格式如下：

1<input type="button" name="..." value="..." onclick="...">其中onclick屬性表示單擊行為，也可以通過(guò)指定腳本函數(shù)（如JavaScript）來(lái)定義按鈕的行為，這個(gè)我們到JavaScript部分就會(huì)十分清楚了。

提交按鈕submit

提交按鈕用來(lái)將輸入的信息提交到服務(wù)器，其代碼格式如下：

1<input type="submit" name="..." value="...">這個(gè)前面也有相關(guān)例子，在此不再?gòu)?fù)述。

重置按鈕reset

重置按鈕用來(lái)清空表單中輸入的信息，代碼格式如下：

1<input type="reset" name="..." value="...">這個(gè)前面也提到過(guò)，不再重復(fù)。










編輯不易，歡迎推廣










關(guān)鍵詞：創(chuàng)建

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉