八、表格與表單設計技巧

52. 認識 HTML 表格(Table) 標籤

用 word 來舉例

  • table 完整 table 標籤

  • tr 表格的每一行

  • th 表格頭部，通常放在第一個 tr

  • td 表格裡面的資料

其他

  • thead

  • tbody

  • tfoot

multiple cursor vscode

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 送出資料

  • Forms – Pure

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

    • @ 代表從自己指定的數字開始跑

  • HTML input tag

<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

.pure-form input:not([type])： purecss 會出現這段

  • 兼容 IE8

  • 選擇沒有 type 屬性的 input 元素

用變數來管理顏色

模板字串

用 js 抓 form 的資料

漸變

其他

修改 radio, checkbox 樣式

能搜尋的下拉選單

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 程式

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

Last updated