整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
題目只能有30個字，不能寫全，其實今天我們要學(xué)習(xí)的內(nèi)容有三個，第一，下拉列表表單，第二，多行文字輸入表單，第三，數(shù)據(jù)集表單。
開始學(xué)習(xí)吧！
前天和昨天我們在《HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作》和《HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作》中基本上把<input/>標(biāo)簽的type屬性里不同的值進(jìn)行了講解與實踐，今天我們來學(xué)習(xí)其他包含在<form></form>之間的元素。
帶有下拉列表的表單
我們在一些網(wǎng)站填寫注冊信息時，經(jīng)常會遇到選擇"生活所在地"的操作，因為中國的地名是固定的，因此頁面會為我們提供一個下拉列表選項，我們直接點選即可，就不需要輸入文字了，這樣操作的好處在于不會出現(xiàn)拼寫錯誤。例如：
寫這個功能我們需要介紹一組新標(biāo)簽<select></select>。"select"（選擇）。在這個標(biāo)簽中再添加<option></option>。"option"（選項）。這樣就可以寫出帶有下拉列表的表單了，示例代碼如下：
<select><option></option></select>這段代碼我們繼續(xù)在昨天的"表單.html"文件中添加即可，在<input type = "image" src = "img/示例圖片/submit.jpg"/><br>這段代碼之前即可！與這個圖片提交按鈕共用一個<form></form>標(biāo)簽！
下面我們?yōu)槎噙x表單添加名稱，示例代碼如下：
請選擇省份<select><option></option></select>下面我們添加不同選項，示例代碼如下：
請選擇省份
<select >
<option >河北</option>
<option >山東</option>
<option >河南</option>
<option >海南</option>
<option >江蘇</option>
<option >安徽</option>
</select>
<br><br>為了規(guī)范起見，我們?yōu)楸韱涡畔⑻砑觧ame和value屬性，示例代碼如下：
請選擇省份
<select name = "province">
<option value="Hebei">河北</option>
<option value="Shandong">山東</option>
<option value="Henan">河南</option>
<option value="Hainan">海南</option>
<option value="Jiangsu">江蘇</option>
<option value="Anhui">安徽</option>
</select>
<br><br>大家要注意的是，在下拉列表表單中，name寫在<select>中，value寫在<option>中。
頁面效果如下：
這里告訴大家一個規(guī)律，下拉列表表單默認(rèn)顯示第一個<option></option>中的文字內(nèi)容。
如果您想改變這個默認(rèn)顯示，請在需要顯示的<option>中添加selected屬性，并賦值為"selected"。
示例代碼如下：
請選擇省份
<select name = "province">
<option value="Hebei">河北</option>
<option value="Shandong">山東</option>
<option value="Henan" selected="selected">河南</option>
<!--選中這個選項--><option value="Hainan">海南</option><option value="Jiangsu">江蘇</option><option value="Anhui">安徽</option></select><br><br>頁面效果如圖：
多行文字輸入表單
我們在西瓜視頻上發(fā)布視頻時會被要求填寫視頻描述，頁面中的輸入框不是像下圖這么短的單行輸入框。
而是多行輸入框，如圖：
使用<textarea></textarea>標(biāo)簽即可添加這樣的輸入框，不過要設(shè)置row（列）和cols（行）屬性的數(shù)值。示例代碼如下：
<br>請簡要描述您的劇本的情節(jié)<br><textarea row="3" cols="20"></textarea><br>這段代碼添加到</select><br><br>之后，與其共同使用一個<form></form>標(biāo)簽。
下面我們?yōu)檫@個多行輸入框添加一些提示和限制。
首先，添加提示文字，和type="text"的<input/>標(biāo)簽一樣，都是使用placeholder屬性。
第二，我們限制一下字?jǐn)?shù)，使用maxlength（最大長度）屬性。
第三，在頁面加載完成后，直接讓光標(biāo)停留在輸入框中，使用autofocus屬性。
下面看看如何寫吧，示例代碼如下：（不要忘記寫好name屬性！）
<br>
請簡要描述您的劇本的情節(jié)<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea><br>頁面效果如圖：
如果刷新頁面不能正確顯示，請嘗試關(guān)閉后重新打開！
數(shù)據(jù)集表單
數(shù)據(jù)集表單實際上就是一個將不同選項或信息打包上傳的設(shè)置。
當(dāng)一組表單元素放到 <fieldset> 標(biāo)簽內(nèi)時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創(chuàng)建一個子表單來處理這些元素。（W3school）
這個數(shù)據(jù)集有三個部分組成，首先是<fliedset></fliedset>,這個標(biāo)簽不會顯示，只是告訴瀏覽器這里的數(shù)據(jù)要打包。
第二是<legend></legend>,"legend"(說明)，這里添加數(shù)據(jù)集名稱。
第三就是我們之前學(xué)到的那些標(biāo)簽了。
示例代碼如下：
<fliedset> <legend>信息打包</legend> </fliedset>下面我們使用這段代碼把form2打包一下吧。示例代碼如下：
<form>
<fieldset><!--開始-->
<legend>信息打包</legend><br>
<!--標(biāo)題-->興趣愛好：<br>
<input type = "checkbox" name = "hobby" value = "reading"/>讀書
<input type = "checkbox" name = "hobby" value = "film"/>電影
<input type = "checkbox" name = "hobby" value = "painting"/>繪畫
<input type = "checkbox" name = "hobby" value = "music"/>音樂
<br>
最高學(xué)歷：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>碩士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
請選擇省份
<select name = "province">
<option value="Hebei">河北</option>
<option value="Shandong">山東</option>
<option value="Henan" selected="selected">河南</option><!--選中這個選項-->
<option value="Hainan">海南</option>
<option value="Jiangsu">江蘇</option>
<option value="Anhui">安徽</option>
</select>
<br><br><br>
請簡要描述您的劇本的情節(jié)<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea>
<br>
</fieldset><!--結(jié)尾-->
<input type = "image" src = "img/示例圖片/submit.jpg"/><br>
<input type="reset" /><br>
<input type = "submit" value = "submit"/>
</form>頁面效果如下：
今天的內(nèi)容結(jié)束了！
如果您喜歡我的教程請關(guān)注我，點贊也能讓我充滿動力！
HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
html5 中，在增加了大量的表單元素與屬性的同時，也增加了大量在提交時對表單與表單內(nèi)新增元素進(jìn)行內(nèi)容有效性驗證的功能，接下來我們來說1下自動驗證。
在html5中，通過對元素使用屬性的方法，可以實現(xiàn)在表單提交時履行自動驗證的功能，在履行代碼后，將在表單提交時自動驗證輸入的內(nèi)容是不是為數(shù)字，如果驗證通不過，將顯示毛病信息文字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗證示例</title>
</head>
<body>
<form action="#" method="post">
<input type="text" name="text" required pattern="^\w.*$">
<input type="submit" value="提交">
</form>
</body>
</html>
接下來我們來看1下在html5 中追加的關(guān)于對元素內(nèi)輸入內(nèi)容進(jìn)行限制的屬性的指定。
1.required屬性
html5 中新增的required屬性可以利用在大多數(shù)輸入元素上（除隱藏元素，圖片元素按鈕上）。在提交時，如果元素中內(nèi)容為空白。則不允許提交，同時在閱讀器中顯示信息提示文字，提示用戶這個元素中必須輸入內(nèi)容，效果如圖
2.pattern屬性之條件到的新增的input元素，比如email，number，URL等，要求輸入內(nèi)容符合1定的格式，對input元素使用pattern屬性，并且將屬性值設(shè)置為某個格式的正則表達(dá)式，在提交時會檢查其內(nèi)容是不是符合給定格式。當(dāng)輸入的內(nèi)容不符合給定格式時，則不允許提交，同時在閱讀器中顯示信息提示文字，提交輸入的內(nèi)容必須符合給定格式，代碼以下，要求輸入內(nèi)容為1個數(shù)字與3個大寫字母：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗證示例</title>
</head>
<body>
<form action="#" method="post">
請輸入指定內(nèi)容:<input pattern="[0⑼][A-Z]{3}" name="part" placeholder="輸入:1個數(shù)字3個大寫字母">
<input type="submit" value="提交">
</form>
</body>
</html>履行效果以下：
3.min屬性與max屬性
min與max這兩個屬性是日期類型或數(shù)值類型的input元素的專用屬性，他們限制了在input元素中輸入的數(shù)值與日期的范圍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗證示例</title>
</head>
<body>
<form action="#" method="post">
請輸入數(shù)值:<input type="number" name="point" min="0" max="100" />
<input type="submit" value="提交">
</form>
</body>
</html>履行效果以下：
4.step屬性
step屬性控制input元素中的值增加過減少時的步驟。例如當(dāng)你想讓用戶輸入的值在0與100之間，但必須是5的倍數(shù)時，你可以指定step為5，代碼以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗證示例</title>
</head>
<body>
<form action="#" method="get">
<input type="number" name="point" step="5" />
<input type="submit" />
</form>
</body>
</html>
效果以下：
原文：http://www.wfuyu.com/htmlcss/27520.html
三篇文章，給大家介紹了常用的一些標(biāo)簽，對于剛?cè)腴T前端的童靴們已經(jīng)夠用了。今天小編帶大家學(xué)習(xí)HTML最后一部分——表單，之后我們就進(jìn)入CSS課程的學(xué)習(xí)了。對HTML還不太熟悉的童靴，趕緊打開你的編輯器把前三章的內(nèi)容練習(xí)一下吧！
HTML表單
1. <form> 元素
HTML 表單用于收集用戶輸入，像登錄、注冊、找回密碼等頁面便是表單的應(yīng)用。
<form> 定義表單。
定義表單
2. 表單元素
表單中含有許多表單元素，表單元素指的是不同類型的 input 元素、復(fù)選框、單選按鈕、提交按鈕等等。
<input> 元素
<input> 元素是最重要的表單元素。
<input> 元素有很多形態(tài)，根據(jù)不同的 type 屬性。
文本輸入
<input type="text"> 定義用于文本輸入的單行輸入字段：
文本框
在瀏覽器中顯示：
通過上篇文章的學(xué)習(xí)，童靴們知道input是塊級元素還是內(nèi)聯(lián)元素了嗎？（在這里先不告訴大家，不清楚的趕緊補(bǔ)一下上篇文章）
單選按鈕輸入
<input type="radio"> 定義單選按鈕。
單選按鈕允許用戶在有限數(shù)量的選項中選擇其中之一。
單選按鈕
通過相同的name屬性，把單選按鈕分成一組。
在瀏覽器中顯示：
單選按鈕
復(fù)選按鈕輸入
<input type="checkbox"> 定義復(fù)選按鈕。
復(fù)選按鈕允許用戶在有限數(shù)量的選項中選擇多個。
復(fù)選框
在瀏覽器中顯示：
提交按鈕
<input type="submit"> 定義用于向表單處理程序（form-handler）提交表單的按鈕。
表單處理程序通常是包含用來處理輸入數(shù)據(jù)的腳本的服務(wù)器頁面。
表單處理程序在表單的 action 屬性中指定.
提交按鈕
在瀏覽器中顯示：
Action 屬性
action 屬性定義在提交表單時執(zhí)行的動作。向服務(wù)器提交表單的通常做法是使用提交按鈕。通常，表單會被提交到 web 服務(wù)器上的網(wǎng)頁。在上面的例子中，指定了某個服務(wù)器腳本來處理被提交表單：
<form action="action_page.php">
如果省略 action 屬性，則 action 會被設(shè)置為當(dāng)前頁面。
Method 屬性
method 屬性規(guī)定在提交表單時所用的 HTTP 方法（GET 或 POST）
<form action="action_page.php" method="GET">
或者是
<form action="action_page.php" method="POST">
Name 屬性
如果要正確地被提交，每個輸入字段必須設(shè)置一個 name 屬性。
只提交lastname輸入字段
上面的例子因為只有l(wèi)astname含有name屬性，所以只提交lastname輸入的字段。
好啦，今天一不小心又講多了，下篇文章繼續(xù)給大家講解表單其它的元素。
你必須非常努力，才能看起來毫不費力！
關(guān)注小白前端，才會持續(xù)收到文章推送！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
