八、表格與表單設計技巧
52. 認識 HTML 表格(Table) 標籤
用 word 來舉例
table 完整 table 標籤
tr 表格的每一行
th 表格頭部，通常放在第一個 tr
td 表格裡面的資料
其他
thead
tbody
tfoot
multiple cursor vscode
alt + 滑鼠左鍵
53. 設定表格 (Table) 上的 CSS 樣式
幫 th, td 加 border
.product th, .product td {
border: 1px solid #000000;
}CSS reset
讓 td 和 td 之間可以合併在一起，兩個 border 1px，重疊後還是 1px
希望距離是 0px
table {
border-collapse: collapse;
border-spacing: 0;
}HW8-53 表格樣式作業
麻煩老師過目我的 HW8-53 作業練習了，謝謝老師 (已使用 CodePen 內建 css reset)
https://codepen.io/ayugioh2003/pen/MGvPWZ
其他同學範例
54. 表單 (Form) 簡介
滿常見的，像註冊、收集資料
後端語言會把資料存進資料庫
55. 表單三劍客：Form、輸入欄位、Submit
form 表單的標籤
action 要把資料送到什麼程式去
input text 要送出的資料
name 是到時候傳出去的變項名稱
input button 送出資料
56. Form、Text、Submit 範例程式碼
<form action="index.html">
<input type="text" name="Name">
<input type="text" name="tel">
<input type="submit" value="送出">
</form>57. 使用 label、placeholder 提昇表單使用者體驗
增進 input 的使用經驗
placeholder，可以輸入文字，產生預設文字
label，在 input 前有文字欄位
添加 for，點擊 label 時鼠標能定位跳到 input
在 input 設定 id，for 就能跳到 id
58. label、placeholder 範例程式碼
<form action="index.html">
<label for="mail">電子郵件：</label>
<input type="text" id="mail" name="mail" placeholder="請輸入電子郵件">
<label for="person">姓名：</label>
<input type="text" id="person" name="person" placeholder="請輸入姓名">
<input type="submit" value="下一步">
</form>59. 表單元素：radio、checkbox
<form action="index.html">
<h2>個人資料</h2>
<label for="mail">電子郵件：</label>
<input type="text" id="mail" name="mail" placeholder="請輸入電子郵件">
<label for="person">姓名：</label>
<input type="text" id="person" name="person" placeholder="請輸入姓名">
<h2>性別</h2>
<input type="radio" name="sex" value="male" id="male">
<label for="male">男生</label>
<input type="radio" name="sex" value="female" id="female">
<label for="female">女生</label>
<h2>興趣</h2>
<input type="checkbox" value="movie" name="hobby"> 看電影
<input type="checkbox" value="music" name="hobby"> 聽音樂
<input type="checkbox" value="comic" name="hobby"> 看漫畫
<br>
<input type="submit" value="送出">
</form>60. 表單元素：select、textarea
下拉式選單
多行的輸入區塊
<input type="date" name="bday">用 emmet 快速生成 option
select>option[value=$@1900]{$@1900}*117@ 代表從自己指定的數字開始跑
<h2>出生日期</h2>
<label for="birth">生日：</label>
<select name="birth" id="birth">
<option value="1990">1990</option>
<option value="1991">1991</option>
</select>
<h2>內容：</h2>
<textarea name="content" id="" cols="30" rows="10"></textarea>61. 使用 CSS 修改表單 (Form) 樣式
input
button
pure
CSS 選擇器在 table 的應用
/* 奇數選擇器 */
.pure-styleBg>tbody>tr:nth-of-type(odd) {
background-color: blue;
color:#fff;
}
/* 偶數選擇器 */
.pure-styleBg>tbody>tr:nth-of-type(even) {
background-color: black;
color:#fff;
}在查詢 CSS 選擇器時找到的文章。這網站感覺很厲害，envatotuts+
BSD 授權 purecss
BSD 基本上可以讓你自由地使用，如果是用在自己公司上面的專案，他的 CSS 上面請保留原來代碼中的BSD協議註解就 ok 哩
.pure-form input:not([type])： purecss 會出現這段
兼容 IE8
選擇沒有 type 屬性的 input 元素
用變數來管理顏色
模板字串
用 js 抓 form 的資料
漸變
其他
修改 radio, checkbox 樣式
原理
取消 input 樣式
input + label:before 設定方塊或圓圈
input:checked + label before 設定改變的樣式
能搜尋的下拉選單
HW8-61 使用 CSS 修改表單 (Form) 樣式，作業
麻煩老師過目我的 HW7-51 作業練習了，謝謝老師 (已使用 CodePen 內建 css reset)
https://codepen.io/ayugioh2003/pen/YLeYQL
想順便問在作業過程中的想法與問題
一、自己另外加的東西
1 body 的背景使用線性漸變效果 2 在 form 以及 button 添加 PureCss 的 class 3 使用 CSS 變數來管理與套用顏色 4 radio, checkbox 勾選後，改變相對應 label 的顏色 5 隱藏 radio, checkbox 樣式，使用 label:before 模擬勾選框 6 在 button 添加 onclick，跳出 alert 查看表單的填寫狀況
二、label 的文字要不要用 span 包起來
在觀摩一些教學範例時，有些人的 <label for=""></label> 裡面會包一個 span。實務上在使用的時候有需要再包一個 span 嗎，還是有什麼特殊需求的時候再包就好
其他問題
一、能搜尋的下拉式選單
曾經有看過下拉選單可以用搜尋的方式選取，但不曉得該怎麼實做。例如，畫面有一個國家的下拉選單，我在文字框鍵入 tai 後，選單會自動找到 tai 開頭的第一個國家
二、HTML 和 CSS 的縮進空白格數
曾看過有篇文章提到，Google 建議撰寫 JS 時使用兩個空白當作間距。想請問老師的撰寫習慣是幾個空白呢？另外，HTML 和 CSS 的縮排，老師習慣用幾個空白當縮進呢？ https://goo.gl/5RufGG
第七章測驗
HTML 和 CSS 的縮進空白格數 在前端用 js 模擬 form 的 action 程式
Last updated
Was this helpful?