表單元素初識(shí)
我們?cè)跒g覽網(wǎng)頁(yè)時(shí)會(huì)經(jīng)常遇到注冊(cè)會(huì)員的界面叠聋，大概像這個(gè)樣子：
或填寫問卷的情況壹粟，大概像這個(gè)樣子：
我們把這些內(nèi)容稱之為表單愕乎。
如何向自己的頁(yè)面中添加表單呢崎坊？
添加表單的操作和添加表格類似备禀。
首先我們要在頁(yè)面中寫入<form></form>標(biāo)簽，這是向?yàn)g覽器聲明這里是個(gè)表單奈揍，它本身并不會(huì)顯示在頁(yè)面中曲尸，但是可以全局控制表單元素的一些屬性，就像表格中的<table></table>標(biāo)簽男翰。
然后再在<form></form>中寫入<input/>標(biāo)簽另患，這個(gè)標(biāo)簽的內(nèi)容就會(huì)顯示在頁(yè)面中了，就像表格元素中的<tr><td>標(biāo)簽蛾绎。不同的是<input/>沒有結(jié)尾標(biāo)簽昆箕。
下面讓我們寫一寫。
首先復(fù)制"第一個(gè)頁(yè)面.html"文件秘通。改名為"表單.html"为严，然后清空<body></body>中的內(nèi)容，將<head></head>中間的<title></title>中間的內(nèi)容改為"表單"肺稀，這樣方便我們查看測(cè)試頁(yè)面第股。
示例代碼如下：
<!DOCTYPE HTML> <html> <head> <title>表單 </title> </head> <body> </body> </html>
下面我們要寫入表單內(nèi)容，示例代碼如下：
<form> <input/></form>
頁(yè)面效果如下：
只有一個(gè)輸入框话原。下面夕吻，我們?yōu)檩斎肟蛱砑用Q"會(huì)員名稱："，示例代碼如下：
<form> 會(huì)員名稱： <input/></form>
效果如下：
這樣我們就寫出了一個(gè)簡(jiǎn)單的表單繁仁，如果為表單添加更多內(nèi)容和設(shè)置涉馅，就要繼續(xù)了解表單的屬性。
表單元素屬性1
<input/>標(biāo)簽通過改變type屬性可以變換出不同功能黄虱，在頁(yè)面制作中稚矿，我認(rèn)為<input/>標(biāo)簽中的type屬性最重要。
下面我們來看一下type屬性不同的值。
圖片來源W3School
輸入文字：首先晤揣，先來看text值桥爽。說明很明確，這個(gè)屬性值的<input>標(biāo)簽主要是用來輸入文本昧识，比如"會(huì)員名稱钠四。"
示例代碼如下：
<form> 會(huì)員名稱： <input type="text"/></form>
頁(yè)面效果如圖所示：我胡亂輸入了幾個(gè)字母
如果不指定type的text值的話，表面看起來并不影響輸入內(nèi)容跪楞，但是表單的內(nèi)容最終是要提交到服務(wù)器的缀去，如果不注明type="text"，服務(wù)器就不能判斷你輸入的字符到底是一段代碼還是一段字符串組成的文本甸祭，因此缕碎，我們?yōu)榱俗屘岬慕粩?shù)據(jù)在服務(wù)器端能被準(zhǔn)確識(shí)別，一定要寫好type的屬性淋叶。
除此之外變換type值也能為<input/>變換不同功能阎曹。
制作提交按鈕：例如"submit"（提交）。在我們輸入完表單內(nèi)容后煞檩，一般都有一個(gè)提交按鈕处嫌，這個(gè)提交按鈕也是由<input/>標(biāo)簽來完成的。
示例代碼如下：
<form> 會(huì)員名稱： <input type="text"/> <input type="submit"/></form>
如圖所示：
因?yàn)?lt;input/>是內(nèi)聯(lián)元素斟湃，所以"submit"按鈕會(huì)和之前的<input>顯示在一行熏迹，換行的話很簡(jiǎn)單，可以使用
標(biāo)簽凝赛。
大家觀察一下發(fā)現(xiàn)注暗，我們并沒有給"submit"按鈕指定文字，在按鈕上卻出現(xiàn)了"提交查詢"的字樣墓猎，這是html默認(rèn)的捆昏，如果我們要改變按鈕文字就要使用value這個(gè)屬性。示例代碼如下：
<input type="submit" value = "提交"/>
頁(yè)面效果如下：
其實(shí)我們?cè)谳斎胛淖謺r(shí)毙沾，輸入框里會(huì)經(jīng)常有提示文字骗卜，當(dāng)我們點(diǎn)擊輸入框時(shí)，提示文字消失了左胞，這個(gè)功能怎么實(shí)現(xiàn)寇仓？
這又涉及到一個(gè)新屬性，叫做"placeholder"（提示文字）烤宙。
示例代碼如下：
<input type="text" placeholder = "請(qǐng)輸入英文或漢語(yǔ)拼音"/>
頁(yè)面效果如下：
下面我們來練習(xí)一下遍烦，示例代碼如下：
<form> 會(huì)員名稱：<input type = "text" placeholder = "請(qǐng)輸入英文或漢語(yǔ)拼音"/><br> 會(huì)員密碼：<input type = "text" placeholder = "請(qǐng)輸入英文字母、特殊符號(hào)躺枕、數(shù)字"/><br> 確認(rèn)密碼：<input type = "text" /><br><input type = "submit" value = "提交"/><br></form>
頁(yè)面效果如下：（想把密碼字符顯示為小圓點(diǎn)的讀者可以先去屬性值列表中找找"password"看看服猪，咱們后面會(huì)細(xì)致講解）
制作多選表單：多選表單的type屬性值是"checkbox"供填。
我猜大家也猜到該怎么寫了，示例代碼如下：
<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> <input type = "submit" value = "submit"/> </form>
頁(yè)面效果如下：
大家可以點(diǎn)點(diǎn)試試蔓姚，可以多選了捕虽。如圖：
這時(shí)小伙伴們會(huì)發(fā)現(xiàn)在這組示例中，出現(xiàn)了name和value兩個(gè)屬性坡脐。
先說value，在"submit"中房揭，value的值也就是"提交"二字备闲，是直接顯示在按鈕上的，而這里的value值卻沒有顯示捅暴，顯示出來的是我們?cè)?lt;input/>標(biāo)簽后面輸入的"讀書恬砂、電影、繪畫蓬痒、音樂"這樣的字樣泻骤。也就是說這里的value不會(huì)顯示為選框的名字！
那value屬性是干嘛的呢梧奢？實(shí)際上"checkbox"屬性下的value屬性值是寫給后臺(tái)的服務(wù)器看的狱掂。
我們向服務(wù)器提交選擇后，服務(wù)器把name的名稱作為數(shù)據(jù)的大類名稱亲轨，把value值作為大類中的子類名稱來存儲(chǔ)或分析數(shù)據(jù)趋惨。
比如這個(gè)選擇表單是有關(guān)興趣愛好的，因此數(shù)據(jù)的大類屬于"愛好"（hobby）惦蚊，即name="hobby"器虾，hobby中又分為"reading"（讀書），"film"（電影）蹦锋，"painting"（繪畫）兆沙，"music"（音樂），即value="reading"莉掂、value="film"等等葛圃。這樣不同用戶的不同選擇就按照這個(gè)數(shù)據(jù)組織方式提交給了服務(wù)器。
大家明白了嗎巫湘？
另外需要說明的是装悲，name和value最好使用英文或拼音來書寫！
雖然我們目前不涉及后端服務(wù)器上的操作尚氛，但是在學(xué)習(xí)時(shí)要養(yǎng)成規(guī)范書寫的習(xí)慣诀诊。
其實(shí)，除了type="submit"的情況外阅嘶，其他需要輸入信息的type屬性類型都是要寫name屬性的属瓣，不過不同type屬性類型的value卻不太一樣载迄。
下面我們來看看type="text"時(shí)的標(biāo)準(zhǔn)寫法：當(dāng)type="text"的時(shí)候，不必寫value屬性抡蛙，因?yàn)?strong>value值為用戶輸入的內(nèi)容
<form> 會(huì)員名稱： <input type = "text" placeholder = "請(qǐng)輸入英文或漢語(yǔ)拼音" 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>
今天的內(nèi)容先到這里粗截，我們明天繼續(xù)講解"表單元素"惋耙。
喜歡的小伙伴請(qǐng)關(guān)注和轉(zhuǎn)發(fā)，閱讀中遇到任何問題請(qǐng)給我留言熊昌，如有疏漏或錯(cuò)誤歡迎大家斧正绽榛，不勝感激！
