整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
為了不再被疑似涉嫌低俗，我只能給大家提供這種圖片了，耐得住寂寞才能學(xué)有所成！吸引人的東西未必珍貴。
昨天我們學(xué)習(xí)了《HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作》（目錄在結(jié)尾），大家通過學(xué)習(xí)對(duì)HTML頁面中的表單元素的基本寫法已經(jīng)非常熟悉了。同時(shí)也學(xué)會(huì)了通過變換<input/>標(biāo)簽中的type屬性的值為表單賦予不同的功能，例如輸入文本和建立多選表單。期間，對(duì)name與value這兩個(gè)屬性的作用與特點(diǎn)進(jìn)行了闡釋。今天我們繼續(xù)學(xué)習(xí)新的表單內(nèi)容。
建立單選表單：單選表單把<input/>標(biāo)簽的type屬性修改為"radio"（收音機(jī)），為什么單選表單使用"收音機(jī)"這個(gè)詞呢？其實(shí)道理很簡(jiǎn)單，收音機(jī)調(diào)頻旋鈕是對(duì)應(yīng)角度對(duì)應(yīng)相應(yīng)調(diào)頻，不可能一個(gè)角度對(duì)應(yīng)兩個(gè)調(diào)頻，所以選這個(gè)就不能選其他的表單中的type屬性使用"radio"這個(gè)詞表示，是不是很形象。
示例代碼如下：
<form>
最高學(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>
<input type = "submit" value = "submit"/>
</form>因?yàn)槊鑼懙氖亲罡邔W(xué)歷，一般人最高學(xué)歷只有一個(gè)，不可能又是學(xué)士又是博士，因此使用單選表單。
向服務(wù)器提交時(shí)，name叫做"education"（教育），value對(duì)應(yīng)不同層次。
頁面效果如下：
大家可以點(diǎn)點(diǎn)試試，每次只能有一個(gè)被選中。如圖：
綜合練習(xí)：到這為止，我們把之前零散的代碼拼湊一下看看效果吧！
<!DOCTYPE HTML>
<html>
<head>
<title>表單 </title>
</head>
<body>
<form>
會(huì)員名稱：
<input type = "text" placeholder = "請(qǐng)輸入英文或漢語拼音" name="memberName"/><br>
會(huì)員密碼：
<input type = "text" placeholder = "請(qǐng)輸入英文字母、特殊符號(hào)、數(shù)字" name="passWord"/><br>
確認(rèn)密碼：
<input type = "text" name="confirmPassWord"/><br>
<input type = "submit" value = "提交"/><br>
</form>
<hr>
<form>
興趣愛好：
<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>
<input type = "submit" value = "submit"/>
</form>
</body>
</html>頁面效果如下：
密碼輸入：我們?cè)谑褂蒙鲜霰韱屋斎朊艽a時(shí)發(fā)現(xiàn)，密碼時(shí)實(shí)時(shí)顯示在輸入框中，這一點(diǎn)是不安全的，如圖：
如何讓密碼隱藏呢？其實(shí)看過上一篇中type屬性列表的小伙伴肯定猜到了，把type從"text"改為password。示例代碼如下：
會(huì)員密碼：
<input type = "password" placeholder = "請(qǐng)輸入英文字母、特殊符號(hào)、數(shù)字" name="passWord"/><br>
確認(rèn)密碼：
<input type = "password" name="confirmPassWord"/><br>頁面效果如下：
上傳文件：使用type="file"可以上傳文件！
示例代碼如下：寫在"submit"的上面即可。
<input type = "file"/><br><input type = "submit" value = "submit"/>頁面效果如下：
點(diǎn)擊"瀏覽"看下效果：
神奇！
使用圖片制作按鈕：將type="image"即可，代碼如下：
<input type = "image" src = "img/示例圖片/submit.jpg"/><br>頁面效果如下：用一個(gè)src導(dǎo)入圖片即可。
示例圖片：路徑自行設(shè)置即可！
為表單設(shè)置一個(gè)重置按鈕：如果用戶打算重置表單內(nèi)容后從新填寫，我們可以給他這樣一個(gè)按鈕：
<input type="reset" /><br>頁面如圖所示：
大家要注意的是這個(gè)"重置"按鈕的作用范圍僅僅是它所在的<form></form>標(biāo)簽之間！
舉個(gè)例子，如圖：
下面我們點(diǎn)擊"重置"后效果如下：
form1中的內(nèi)容沒有被清空，"重置"按鈕所在的form2內(nèi)容被清空了！
type屬性值講解我們到此結(jié)束了，hidden值這里先不給大家介紹，以后有機(jī)會(huì)再細(xì)說。
button值以后在JavaScript部分還會(huì)細(xì)說，這里也先略過。
除了<input/>外，還有其他一些標(biāo)簽，例如<select>或<textarea>等有趣且實(shí)用的標(biāo)簽，我們明天再學(xué)習(xí)吧！
今天的內(nèi)容先到這里。希望大家看完之后可以寫寫代碼進(jìn)行實(shí)操。代碼這種東西即使再簡(jiǎn)單，寫過和沒寫過的體會(huì)也是不一樣的。這個(gè)部分的代碼使用"文本編輯器"就可以實(shí)踐。具體操作請(qǐng)?jiān)斠姟丁贰?/p>
碎片化的知識(shí)其實(shí)對(duì)人并沒有多大作用，但是我們的時(shí)間在現(xiàn)代化的生活節(jié)奏中被撕地越來越碎，因此我希望大家可以利用碎片時(shí)間來學(xué)習(xí)完整的知識(shí)，所以，以短篇的形式，每天20分鐘左右，通過積少成多的辦法為大家提供零基礎(chǔ)頁面制作的教程體系是我的主要目的。希望大家學(xué)有所成！
喜歡我的教程的小伙伴請(qǐng)關(guān)注我，點(diǎn)贊也會(huì)讓我充滿動(dòng)力！
喜歡的小伙伴請(qǐng)關(guān)注和轉(zhuǎn)發(fā)，閱讀中遇到任何問題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！
HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)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中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)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)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
.槪念
用來收集用戶輸入的信息，定義采集數(shù)據(jù)的范圍，并且完成與用戶的基本交互的作用。
表單就是輸入框、單選框、復(fù)選框、按鈕、選項(xiàng)菜單等網(wǎng)頁元素，也稱表單元素。
2.語法
form標(biāo)簽，所有表單元素都要放在form標(biāo)簽中。
<form action = "#" method = "get">xx</form> <!-- # 是沒有數(shù)據(jù)時(shí)的占位--> from標(biāo)簽屬性：
① action：設(shè)置發(fā)送數(shù)據(jù)的位置；
② method：用什么方式發(fā)送數(shù)據(jù)。
屬性值分為get和post：get，發(fā)送數(shù)據(jù)時(shí)直接顯示在url欄中，發(fā)
送數(shù)據(jù)量小，且不安全；post，直接通過服務(wù)器發(fā)送數(shù)據(jù)，用戶看不到過
程，且數(shù)據(jù)量較大。
3.表單元素
一般使用 input標(biāo)簽：
<form action = "#" method>
<input type = "text" name = "age"/>
</form>input標(biāo)簽屬性：
type屬性：設(shè)置當(dāng)前輸入框的不同形態(tài)。值分別為：
password 密碼框，text輸入文字、字母、數(shù)字等
submit 提交按鈕，reset 重置按鈕
button 普通按鈕，checkbox 表單復(fù)選框
radio表單單選框。
name 屬性：給當(dāng)前的表單元素?cái)?shù)據(jù)起個(gè)名字，不能是中文和特殊符號(hào)。 （除了按鈕標(biāo)簽外需要輸入數(shù)據(jù)的都要加name屬性）
value 屬性：當(dāng)前表單元素的默認(rèn)值，在按鈕標(biāo)簽中會(huì)顯示在按鈕上，在選項(xiàng)框里必須有，否則后端看到為on。
例如，<input type = "radio" name = "sex" value = "男"/>，傳遞給后端數(shù)據(jù)為sex=男，如果不寫value，則顯示sex=on。
placeholder屬性：輸入框的提示信息。
maxlength屬性：設(shè)置輸入text和password輸入框的最大字符數(shù)。
size屬性：當(dāng)type = "text"或"password"時(shí)，設(shè)置元素的寬度。
checked屬性：當(dāng)type為radio或checkbox時(shí)，設(shè)置單選框或復(fù)選框的默認(rèn)選中項(xiàng)。
4.擴(kuò)展表單元素
如圖，select 標(biāo)簽表示聲明下拉列表；option 標(biāo)簽用于聲明列表項(xiàng)；selected 改變下拉列表默認(rèn)選中項(xiàng)。
多文本域（textarea）：
表單在 Web 網(wǎng)頁中用來給訪問者填寫信息，從而能采集客戶端信息，使網(wǎng)頁具有交互的功能。一般是將表單設(shè)計(jì)在一個(gè)Html 文檔中，當(dāng)用戶填寫完信息后做提交(submit)操作，于是表單的內(nèi)容就從客戶端的瀏覽器傳送到服務(wù)器上，經(jīng)過服務(wù)器上的 ASP 或 PHP 等處理程序處理后，再將用戶所需信息傳送回客戶端的瀏覽器上，這樣網(wǎng)頁就具有了交互性。這里我們只講怎樣使用Html 標(biāo)志來設(shè)計(jì)表單。
web前端基礎(chǔ)學(xué)習(xí)-from表單的使用
北京尚學(xué)堂的視頻
· 63 播放
節(jié)數(shù) | 知識(shí)點(diǎn) | 要求 |
第一節(jié) （form） | 表單概念 | 了解 |
Form | 掌握 | |
Get和post的區(qū)別 | 掌握 | |
第二節(jié)（表單元素） | 表單元素1 | 掌握 |
表單元素2 | 了解 | |
第三節(jié)（表單元素的屬性） | 表單元素的屬性 | 掌握 |
第四節(jié)（HTML5新增） | HTML5新增type類型 | 了解 |
第五節(jié)（HTML5新增） | HTML5新增屬性 | 掌握 |
所有的用戶輸入內(nèi)容的地方都用表單來寫，如登錄注冊(cè)、搜索框。
表單是由窗體和控件組成的,一個(gè)表單一般應(yīng)該包含用戶填寫信息的輸入框,提交按鈕等，這些輸入框,按鈕叫做控件,表單很像容器,它能夠容納各種各樣的控件。
<form action＝"url" method=get|post name="myform" ></form>-name：表單提交時(shí)的名稱-action：提交到的地址-method：提交方式，有g(shù)et和post兩種，默認(rèn)為get |
1、數(shù)據(jù)提交方式，get把提交的數(shù)據(jù)url可以看到，post看不到
2、get一般用于提交少量數(shù)據(jù)，post用來提交大量數(shù)據(jù)
一個(gè)完整的表單包含三個(gè)基本組成部分：表單標(biāo)簽、表單域、表單按鈕。
1.表單標(biāo)簽
是指<form>標(biāo)簽本身，它是一個(gè)包含表單元素的區(qū)域，使用<form></form>定義
2.表單域
是<form>標(biāo)簽中用來收集用戶輸入的每一項(xiàng)，通常用input標(biāo)簽來定義，input標(biāo)簽有不同的類型，對(duì)應(yīng)用戶不同的數(shù)據(jù)。（比如：文本域、下拉列表、單選框、復(fù)選框等等）
3.表單按鈕
用來提交<form>表單中的所有信息到服務(wù)器
表單域和表單按鈕都屬于表單元素
2.1文本框
文本域通過<input type="text"> 標(biāo)簽來設(shè)定，當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域。
<form> |
瀏覽器顯示如下：
2.2密碼框
密碼字段通過標(biāo)簽<input type="password"> 來定義:
<form> |
瀏覽器顯示效果如下:
注意:密碼字段字符不會(huì)明文顯示，而是以星號(hào)或圓點(diǎn)替代。
2.3單選按鈕
<input type="radio"> 標(biāo)簽定義了表單單選框選項(xiàng)
<form> |
瀏覽器顯示效果如下:
2.4復(fù)選框
<input type="checkbox"> 定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。
<form> |
瀏覽器顯示效果如下:
2.5文件
定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳：
選擇一個(gè)文件: <input type="file" name="img"> |
2.6隱藏域
定義隱藏字段，隱藏字段對(duì)于用戶是不可見的。隱藏字段常常存儲(chǔ)默認(rèn)值，或者由 JavaScript 改變它們的值：
<input type="hidden" name="country" value="Norway"> |
2.7提交按鈕
當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。
<form name="input" action="html_form_action.php" method="get"> |
瀏覽器顯示效果如下:
2.8重置按鈕
定義重置按鈕（重置所有表單值為默認(rèn)值）：
<input type="reset"> |
提示：請(qǐng)謹(jǐn)慎使用重置按鈕！對(duì)于用戶來說，不慎點(diǎn)擊了重置按鈕是件很惱火的事情。
2.9按鈕
沒有任何功能的按鈕
<input type="button" value="點(diǎn)我"/> |
2.10圖像圖片按鈕
定義圖像作為提交按鈕：
<input type="image" src="img_submit.gif" /> |
2.11按鈕
<button> 標(biāo)簽定義一個(gè)按鈕。
在 <button> 元素內(nèi)部，您可以放置內(nèi)容，比如文本或圖像。這是該元素與使用 <input> 元素創(chuàng)建的按鈕之間的不同之處。
提示：請(qǐng)始終為 <button> 元素規(guī)定 type 屬性。不同的瀏覽器對(duì) <button> 元素的 type 屬性使用不同的默認(rèn)值。
2.12下拉列表
<select> 元素用來創(chuàng)建下拉列表。
<option> 標(biāo)簽定義下拉列表中的一個(gè)選項(xiàng)（一個(gè)條目）。
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option></select> |
<optgroup> 標(biāo)簽經(jīng)常用于把相關(guān)的選項(xiàng)組合在一起。
如果你有很多的選項(xiàng)組合, 你可以使用<optgroup> 標(biāo)簽?zāi)軌蚝芎?jiǎn)單的將相關(guān)選項(xiàng)組合在一起。
2.13多行文本框
<textarea> 標(biāo)簽定義一個(gè)多行的文本輸入控件。文本區(qū)域中可容納無限數(shù)量的文本。
可以通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸大小，不過更好的辦法是使用 CSS 的 height 和 width 屬性。
<textarea rows="10" cols="30"> |
2.14labe
<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。
提示:"for" 屬性可把 label 綁定到另外一個(gè)元素。請(qǐng)把 "for" 屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。
<form action="demo_form.php"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br><input type="submit" value="提交"> </form> |
3.1email
定義用于 e-mail 地址的字段（當(dāng)提交表單時(shí)會(huì)自動(dòng)對(duì) email 字段的值進(jìn)行驗(yàn)證）
E-mail: <input type="email" name="usremail"> |
3.2url
定義用于輸入 URL 的字段：
添加你的主頁: <input type="url" name="homepage"> |
3.3search
定義搜索字段（比如站內(nèi)搜索或谷歌搜索等）：
Search Google: <input type="search" name="googlesearch"> |
3.4tel
定義用于輸入電話號(hào)碼的字段：
電話號(hào)碼: <input type="tel" name="usrtel"> |
3.5color
從拾色器中選取顏色：
選擇你喜歡的顏色: <input type="color" name="favcolor"> |
3.6number
定義用于輸入數(shù)字的字段（您可以設(shè)置可接受數(shù)字的限制）：
數(shù)量 ( 1 到 5 之間): <input type="number" name="quantity" min="1" max="5"> |
請(qǐng)使用下面的屬性來規(guī)定限制：
max - 規(guī)定允許的最大值。
min - 規(guī)定允許的最小值。
step - 規(guī)定合法數(shù)字間隔。
value - 規(guī)定默認(rèn)值。
3.7range
定義用于精確值不重要的輸入數(shù)字的控件（比如 slider 控件）。您也可以設(shè)置可接受數(shù)字的限制：
<input type="range" name="points" min="1" max="10"> |
請(qǐng)使用下面的屬性來規(guī)定限制：
max - 規(guī)定允許的最大值。
min - 規(guī)定允許的最小值。
step - 規(guī)定合法數(shù)字間隔。
value - 規(guī)定默認(rèn)值。
3.8date
定義 date 控件：
生日: <input type="date" name="bday"> |
3.9month
定義 month 和 year 控件（不帶時(shí)區(qū)）：
生日 ( 月和年 ): <input type="month" name="bdaymonth"> |
3.10week
定義 week 和 year 控件（不帶時(shí)區(qū)）：
選擇周: <input type="week" name="week_year"> |
4.1autofocus 屬性
autofocus 屬性規(guī)定在頁面加載時(shí)，域自動(dòng)地獲得焦點(diǎn)。
注釋：autofocus 屬性適用于所有 <input> 標(biāo)簽的類型。
User name: <input type="text" name="user_name" autofocus /> |
4.2multiple 屬性
multiple 屬性規(guī)定輸入域中可選擇多個(gè)值。
注釋：multiple 屬性適用于以下類型的 <input> 標(biāo)簽：email 和 file。
Email: <input type="email" multiple /> |
4.3placeholder 屬性
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。
<input type="search" name="user_search" placeholder="Search W3School" /> |
4.4required 屬性
required 屬性規(guī)定必須在提交之前填寫輸入域（不能為空）。
Name: <input type="text" name="usr_name" required /> |
視頻介紹：
前端零基礎(chǔ)入門學(xué)習(xí)之表單的使用
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
