我們在浏覽網頁時會經常遇到注冊會員的界面，大概像這個樣子：
或填寫問卷的情況，大概像這個樣子：
我們把這些内容稱之為表單。
如何向自己的頁面中添加表單呢？
添加表單的操作和添加表格類似。
首先我們要在頁面中寫入<form></form>标簽，這是向浏覽器聲明這裡是個表單，它本身并不會顯示在頁面中，但是可以全局控制表單元素的一些屬性，就像表格中的<table></table>标簽。
然後再在<form></form>中寫入<input/>标簽，這個标簽的内容就會顯示在頁面中了，就像表格元素中的<tr><td>标簽。不同的是<input/>沒有結尾标簽。
下面讓我們寫一寫。
首先複制"第一個頁面.html"文件。改名為"表單.HTML"，然後清空<body></body>中的内容，将<head></head>中間的<title></title>中間的内容改為"表單"，這樣方便我們查看測試頁面。
示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>表單 </title>
</head>
<body>
</body>
</html>
下面我們要寫入表單内容，示例代碼如下：
<form> <input/></form>
頁面效果如下：
隻有一個輸入框。下面，我們為輸入框添加名稱"會員名稱："，示例代碼如下：
<form> 會員名稱： <input/></form>
效果如下：
這樣我們就寫出了一個簡單的表單，如果為表單添加更多内容和設置，就要繼續了解表單的屬性。
表單元素屬性1
<input/>标簽通過改變type屬性可以變換出不同功能，在頁面制作中，我認為<input/>标簽中的type屬性最重要。
下面我們來看一下type屬性不同的值。
圖片來源W3School
輸入文字：首先，先來看text值。說明很明确，這個屬性值的<input>标簽主要是用來輸入文本，比如"會員名稱。"
示例代碼如下：
<form> 會員名稱： <input type="text"/></form>
頁面效果如圖所示：我胡亂輸入了幾個字母
如果不指定type的text值的話，表面看起來并不影響輸入内容，但是表單的内容最終是要提交到服務器的，如果不注明type="text"，服務器就不能判斷你輸入的字符到底是一段代碼還是一段字符串組成的文本，因此，我們為了讓提的交數據在服務器端能被準确識别，一定要寫好type的屬性。
除此之外變換type值也能為<input/>變換不同功能。
制作提交按鈕：例如"submit"（提交）。在我們輸入完表單内容後，一般都有一個提交按鈕，這個提交按鈕也是由<input/>标簽來完成的。
示例代碼如下：
<form> 會員名稱： <input type="text"/> <input type="submit"/></form>
如圖所示：
因為<input/>是内聯元素，所以"submit"按鈕會和之前的<input>顯示在一行，換行的話很簡單，可以使用<br>标簽。
大家觀察一下發現，我們并沒有給"submit"按鈕指定文字，在按鈕上卻出現了"提交查詢"的字樣，這是html默認的，如果我們要改變按鈕文字就要使用value這個屬性。示例代碼如下：
<input type="submit" value = "提交"/>
頁面效果如下：
其實我們在輸入文字時，輸入框裡會經常有提示文字，當我們點擊輸入框時，提示文字消失了，這個功能怎麼實現？
這又涉及到一個新屬性，叫做"placeholder"（提示文字）。
示例代碼如下：
<input type="text" placeholder = "請輸入英文或漢語拼音"/>
頁面效果如下：
下面我們來練習一下，示例代碼如下：
<form>
會員名稱：
<input type = "text" placeholder = "請輸入英文或漢語拼音"/><br>
會員密碼：<input type = "text" placeholder = "請輸入英文字母、特殊符号、數字"/><br>
确認密碼：<input type = "text" /><br><input type = "submit" value = "提交"/><br>
</form>
頁面效果如下：（想把密碼字符顯示為小圓點的讀者可以先去屬性值列表中找找"password"看看，咱們後面會細緻講解）
制作多選表單：多選表單的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>
頁面效果如下：
大家可以點點試試，可以多選了。如圖：
這時小夥伴們會發現在這組示例中，出現了name和value兩個屬性。
先說value，在"submit"中，value的值也就是"提交"二字，是直接顯示在按鈕上的，而這裡的value值卻沒有顯示，顯示出來的是我們在<input/>标簽後面輸入的"讀書、電影、繪畫、音樂"這樣的字樣。也就是說這裡的value不會顯示為選框的名字！
那value屬性是幹嘛的呢？實際上"checkbox"屬性下的value屬性值是寫給後台的服務器看的。
我們向服務器提交選擇後，服務器把name的名稱作為數據的大類名稱，把value值作為大類中的子類名稱來存儲或分析數據。
比如這個選擇表單是有關興趣愛好的，因此數據的大類屬于"愛好"（hobby），即name="hobby"，hobby中又分為"reading"（讀書），"film"（電影），"painting"（繪畫），"music"（音樂），即value="reading"、value="film"等等。這樣不同用戶的不同選擇就按照這個數據組織方式提交給了服務器。
大家明白了嗎？
另外需要說明的是，name和value最好使用英文或拼音來書寫！
雖然我們目前不涉及後端服務器上的操作，但是在學習時要養成規範書寫的習慣。
其實，除了type="submit"的情況外，其他需要輸入信息的type屬性類型都是要寫name屬性的，不過不同type屬性類型的value卻不太一樣。
下面我們來看看type="text"時的标準寫法：當type="text"的時候，不必寫value屬性，因為value值為用戶輸入的内容
<form>
會員名稱：
<input type = "text" placeholder = "請輸入英文或漢語拼音" name="memberName"/><br>
會員密碼：
<input type = "text" placeholder = "請輸入英文字母、特殊符号、數字" name="passWord"/><br>
确認密碼：<input type = "text" name="confirmPassWord"/><br>
<input type = "submit" value = "提交"/><br>
</form>
今天的内容先到這裡，我們明天繼續講解"表單元素"。
喜歡的小夥伴請關注和轉發，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML完整學習目錄HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什麼？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head标簽有啥用？——零基礎自學網頁制作
初識meta标簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顔色）——零基礎自學網頁制作
使用HTML添加表格4（行顔色與表格嵌套）——零基礎自學網頁制作
16進制顔色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與内聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>标簽實現文本内鍊接——零基礎自學網頁制作
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
