在整個網站裡，form 表單會出現在不少地方，最常看到的是在聯絡我們那頁。

以聯絡我們來舉例，基本的表單如下：

<form action="" method="post">
  <ul>
    <li>
      <label for="name">姓名：</label>
      <input type="text" id="name">
    </li>
    <li>
      <label for="email">Email：</label>
      <input type="text" id="email">
    </li>
    <li>
      <label for="message">留言：</label>
      <textarea name="" id="message" cols="30" rows="5"></textarea>
    </li>
    <li>
      <input type="submit" value="確認送出">
      <input type="reset" value="清除重填">
    </li>
  </ul>
</form>

form

form 的基本結構，外圍就是 <form> tag，action="" 是表單傳送過去的目的地，method就是表單傳送的方法。

然後內部會是一個 label 搭配一個 input 的方式
上面例子裡會用 li 包 label 與 input，主要是因為方便樣式的製作。

label、input

input 的 type 有
text | password | checkbox | radio | submit | reset | file | hidden | image | button

基本上表單的 input 會搭配 label 一起使用，在網頁上 label 不會呈現任何效果，但是搭配 input 使用時，在 label 上加上 for ，而 input 加上 id ，這樣可以讓 label 與 input 互相指定，當滑鼠點到 label 包覆的文字，就能使游標指到 input 上面。

例如：
<label for="name">姓名：</label>
<input type="text" id="name">

將 label 跟 input 用 li 或 div 包起來，再將 label 跟 input 設為 display:inline-block ，可以針對 label 跟 input 統一設定寬度，或是製作想要的樣式，會非常方便，在許多國外免費表單的樣式設計上都可以看到類似的做法。

textarea

textarea 是用來填寫段落文字，cols="30" 這是指寬，rows="5" 是高，而寬跟高都可以用 css 來設定。

按鈕

按鈕其實也是 input 來做

• type="submit" 作用是送出，值是會顯示在按鈕上的文字 value="確認送出"
• type="reset" 作用是清除表單上的文字， value="清除重填"

以上是最簡單的表單的小介紹，各位看倌明天見囉～

參考資料：
[1] https://www.w3.org/TR/html401/interact/forms.html#h-17.1
[2] https://www.w3.org/TR/html401/interact/forms.html#h17.3
[3] http://www.w3school.com.cn/tags/tag_label.asp