1.表格簡介
HTML中的表格可以大致分爲三個部分：
thead ———表格的頁眉
tbody ———表格的主體
tfoot ———定義表格的頁腳
thead, tbody, tfoot 相當於三間房子，每間房子都可以用來放東西。
這個標籤就是放在三間房子裏面的東西，每一個 就是表格一行。
表格的每一行被分爲一個個單元格。
我們簡單嘗試寫一個表格：
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
的使用
標籤用於對錶格中的列進行組合，以便對其進行格式化。
標籤規定了 元素內部的每一列的列屬性。
職位名 工作地點 職位等級 薪酬
咖啡師 紐約 L3 6000
大中華區副總裁 北京 L8 面議
全球副總裁 佛羅倫薩 L9 面議
3.合併單元格和表格的間距 colspan屬性：合併列 rowspan屬性：合併行 以上兩個屬性均作用在單元格上，並且屬性值的數字代表算上單元格本身，一共合併的單元格個數。
第一行第一列 第一行第二列
第二行第二列 第二行第三列
第三行第一列 第三行第二列 第三行第三列
cellpadding屬性：單元格邊框與內容的間距。
cellspacing屬性：單元格之間的間距。
第一行第一列 第一行第二列
第二行第二列 第二行第三列
第三行第一列 第三行第二列 第三行第三列
3.1 表單域的原理
用之前學習的標籤，我們暫時還不能完成與網頁的交流，網頁無法獲取我們的輸入信息。
在瀏覽網頁時，有很多的場景需要用戶輸入來完成特定的交互，比如註冊、登錄、問卷調查等，我們可以使用表單來完成這些操作。
1.什麼是表單
表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。表單在網頁中主要負責採集數據。
：標籤是成對出現的，以開始，以結束。 action：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。 method：數據傳送的方式（get/post）。 表單中還包括文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框、提交按鈕和文件上傳框等。 3.2 文本框和密碼框 當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化爲密碼輸入框。
type：當type=”text”時，輸入框爲文本輸入框，當type=”password”時,輸入框爲密碼輸入框。
name：告訴服務器，我們提交的這個value值代表的什麼。
value：爲文本輸入框設置默認值。(一般起到提示作用)。
3.3 單選框和複選框
在使用表單時，爲了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和複選框，兩者的區別是單選框中的選項用戶只能選擇一項，而複選框中用戶可以任意選擇多項，甚至全選。
type:當type=”radio”時，控件爲單選框。當type=”checkbox”時，控件爲複選框。
value：提交數據到服務器的值（後臺程序PHP使用）。
name：告訴服務器，我們提交的這個value值代表的什麼。
checked：當設置checked=”checked”時，該選項被默認選中。
3.3 下拉列表框
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。
value：提交數據到服務器的值。
selected=”selected”：設置selected=”selected”屬性，則該選項就被默認選中。
下拉列表也可以進行多選操作，在標籤中設置multiple=”multiple”屬性，就可以實現多選功能，在windows操作系統下，進行多選時按下Ctrl鍵同時進行單擊（在Mac下使用Command+單擊），可以選擇多個選項。
多行文本和重置按鈕
多行文本
當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。
文本
標籤是成對出現的，以開始，以結束。
name：指定輸入框的名字。
cols ：多行輸入域的列數。
rows ：多行輸入域的行數。
在標籤之間可以輸入默認值。
2.上傳
在實際開發中，我們經常會遇到要求用戶上傳頭像圖片或者添加附件在表單中的場景。
在HTML中，文件上傳同樣也使用input標籤。
提交按鈕和重置按鈕
3.6 提交按鈕
在表單中有兩種按鈕可以使用，分別爲：提交按鈕、重置。當用戶需要提交表單信息到服務器時，需要用到提交按鈕。當我們需要重置表單信息的時候，需要用到重置按鈕。
提交按鈕
type：只有當type值設置爲submit時，按鈕纔有提交作用。
value：按鈕上顯示的文字。
3.7 提交按鈕
當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”後，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置爲”reset”就可以。
type：只有當type值設置爲reset時，按鈕纔有重置作用。
value：按鈕上顯示的文字。
3.8 爲CODING COFFEE加入在線購買頁面
大家還記得CODING COFFEE咖啡館嗎？現在，它非常火爆，很多顧客排隊也買不到咖啡。
所以，我們打算在網上接收咖啡的訂單，送貨上門！
試着使用表單獲取用戶的訂單信息！
<h1>CODING COFFEE在線訂購</h1>
<h2>請填寫您的真實信息，我們將在24小時內送貨門</h2>
<form action="http://codingcoffee.com/onlineorder.php" method="post">
<p>
選擇豆子類型：
<select name="beans">
<option value="House Blend">House Blend</option>
<option value="Bolivia">Shade Grown Bolivia Supremo</option>
<option value="Guatemala">Organic Guatemala</option>
<option value="Kenya">Kenya</option>
</select>
</p>
<p>
類型:<br>
<input type="radio" name="beantype" value="whole">
完整豆子
<br>
<input type="radio" name="beantype" value="ground" checked>
咖啡粉
</p>
<p>
數量: <input type="number" name="bags" min="1" max="10">
</p>
<p>
最晚到達日期: <input type="date" name="date">
</p>
<p>
Extras:<br>
<input type="checkbox" name="extras[]" value="giftwrap">
禮盒包裝
<br>
<input type="checkbox" name="extras[]" value="catalog" checked>
包含購物清單
</p>
<p>
送貨地址: <br>
姓名:
<input type="text" name="name" value=""><br>
具體地址:
<input type="text" name="address" value=""><br>
城市:
<input type="text" name="city" value=""><br>
省:
<input type="text" name="state" value=""><br>
區:
<input type="text" name="zip" value=""><br>
電話號碼:
<input type="tel" name="phone" value=""><br>
</p>
<p>
客戶留言:<br>
<textarea name="comments"></textarea>
</p>
<p>
<input type="submit" value="現在購買">
<input type="reset" value="重新填寫">
</p>
</form>
