八、表格與表單設計技巧

Previous七、切圖技巧 Next九、CSS3技巧

Last updated 5 years ago

Was this helpful?

八、表格與表單設計技巧

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)

其他同學範例

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)

想順便問在作業過程中的想法與問題

一、自己另外加的東西

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 的縮進空白格數

第七章測驗

HTML 和 CSS 的縮進空白格數在前端用 js 模擬 form 的 action 程式

Previous七、切圖技巧 Next九、CSS3技巧

Last updated 5 years ago

Was this helpful?