六角學院｜ 顯示課程導航 設定表格(Table)上的 CSS樣式

表單三劍客：Form、輸入欄位、Submit

當你要新增一個表單時,需要新增一個欄位叫做form.
<form action="資料庫位置"></form>

新增一個文欄位,input.
-文字欄位text並且為其命名一個title
-送出欄位submit
<input type="text" name="mail">
<input type="text" name="person">
<input type="submit" value="下一步">

example:
<form action="index.html">
  <input type="text" name="Name">
  <input type="text" name="tel">
  <input type="submit" value="送出">
</form>


使用 label、placeholder 提升表單使用者體驗

<form action="index56.html">
<label for="mail">電子郵件:</label>
<input id="mail" type="text" placeholder="輸入姓名" name="mail">

<label for="person">姓名:</label>
    <input type="text" placeholder="請輸入姓名" name="person">
</form>

placebolder
-寫預設輸入預期值的文字提示,輸入立即消失.

label:
-<label> 標籤為 input 元素定義標註.
    →<label for="mail">電子郵件:</label>
<input id="mail" type="text" placeholder="輸入姓名" name="mail">
-label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。
-<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。
-"for" 屬性可把 label 綁定到另外一個元素.請把 "for" 屬性的值設置為相關元素的 id 屬性的值.

*補充border collapse:http://www.wibibi.com/info.php?tid=CSS_border-collapse_屬性

表單元素：radio、checkbox

radio
-用於單選,因故其name要命名相同.
 <input type="radio" name="sex" value="male">男生
 <input type="radio" name="sex" value="female">女生

checkbox
-用於複選.
 <input type="checkbox" value="movie" name="hobby">看電影
 <input type="checkbox" value="music" name="hobby">聽音樂
 <input type="checkbox" value="comic" name="hobby">看漫畫

*commamd+D →選取sublime text中相同文字選取之快捷鍵

表單元素：select、textarea
select:下拉式選單.必須先以label命名,選擇需輸入option選項.
<label for="birth">生日:</label>
<select id="birth" name="birth">
<option value="1900">1900</option>
<option value="1901">1901</option> 

textarea內容:
-input="text",為單行文字欄位.
-多行文字欄位,必須使用textarea
  <textarea name="contect" cols="30" rows="10"></textarea>

使用 CSS 修改表單 (Form) 樣式
文字欄位:
(HTML)
<form action="index58.html">
<input type="text" class="describe">
</form>
(CSS)
.describe{
color:red;
border:3px solid blue;
border-radius:10px;
background: #000;
padding:5px 10px;
font-size:16px;
width:250px;
}

submit送出表單的按鈕
botton按鈕圖案不送出
＊cursor: pointer（滑鼠出現手去點選的圖案）
    http://www.eion.com.tw/Blogger/?Pid=1117


考慮瀏覽器兼容的問題
https://purecss.io/start/