# 八、表格與表單設計技巧

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

用 word 來舉例

* table 完整 table 標籤
* tr 表格的每一行
* th 表格頭部，通常放在第一個 tr
* td 表格裡面的資料

其他

* thead
* tbody
* tfoot

multiple cursor vscode

* alt + 滑鼠左鍵
* [HTML 表格 | 菜鳥教程](http://www.runoob.com/html/html-tables.html)

## 53. 設定表格 (Table) 上的 CSS 樣式

幫 th, td 加 border

```css
.product th, .product td {
    border: 1px solid #000000;
}
```

CSS reset

* 讓 td 和 td 之間可以合併在一起，兩個 border 1px，重疊後還是 1px
* 希望距離是 0px

```css
table {
    border-collapse: collapse;
    border-spacing: 0;
}
```

HW8-53 表格樣式作業

麻煩老師過目我的 HW8-53 作業練習了，謝謝老師 (已使用 CodePen 內建 css reset)

<https://codepen.io/ayugioh2003/pen/MGvPWZ>

其他同學範例

* [table 練習](https://codepen.io/water80216/pen/YeZaZp)
* [表格](https://codepen.io/KRcube/pen/oqyYoL)
* [表格小練習](https://codepen.io/NIERIKE/pen/rvBGyJ?editors=1100)
* [Table](https://codepen.io/kurtke1990/pen/JvoyGY?editors=1100)
* [A Pen by Sheng-Wei Chen](https://codepen.io/Wei6374/pen/LLJWrz?editors=1100)
* [Lecture52 test](https://codepen.io/JoeCLWu/pen/RjWGqO)

## 54. 表單 (Form) 簡介

滿常見的，像註冊、收集資料

後端語言會把資料存進資料庫

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

* form 表單的標籤
* action 要把資料送到什麼程式去
* input text 要送出的資料
  * name 是到時候傳出去的變項名稱
* input button 送出資料
* [Forms – Pure](https://purecss.io/forms/)

## 56. Form、Text、Submit 範例程式碼

```markup
<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 範例程式碼

```markup
<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

```markup
    <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](https://www.w3schools.com/tags/tag_input.asp)

```markup
<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 的應用

* [A Pen by gonsakon](https://codepen.io/liao/pen/QGadEB?editors=1100)
* [CSS 選擇器參考手冊](http://www.w3school.com.cn/cssref/css_selectors.asp)

```css
/* 奇數選擇器 */
.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+

* [30 個你必須記住的 CSS 選擇器](https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048)

BSD 授權 purecss

* [簡單、開放、幾無限制的 BSD License - OpenFoundry](https://www.openfoundry.org/tw/legal-column-list/524--bsd)
* BSD 基本上可以讓你自由地使用，如果是用在自己公司上面的專案，他的 CSS 上面請保留原來代碼中的BSD協議註解就 ok 哩

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

* 兼容 IE8
* 選擇沒有 type 屬性的 input 元素

用變數來管理顏色

* [SASS, LESS 退散，原生 CSS 可以使用變數啦！ « MUKI space\*](http://muki.tw/tech/native-css-variables/)

模板字串

* [13 Noteworthy Points from Google’s JavaScript Style Guide](https://medium.freecodecamp.org/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b)

用 js 抓 form 的資料

* [\[筆記\] 用 javascript 來取得表單元素內容的值 (javascript 取值) \~ PJCHENder\
  &#x20;那些沒告訴你的小細節](https://pjchender.blogspot.tw/2015/11/javascript.html)
* [javascript - How to append something to an array? - Stack Overflow](https://stackoverflow.com/questions/351409/how-to-append-something-to-an-array)
* [How to get the value of a form element : check box and radio button](http://javascript-coder.com/javascript-form/javascript-get-check.phtml)

漸變

* [CSS3 漸變 | 菜鳥教程](http://www.runoob.com/css3/css3-gradients.html)

其他

* [《CSS3 教學》calc 讓 CSS 單位也可用加、減、乘、除 | 梅問題．教學網](https://www.minwt.com/webdesign-dev/css/11583.html)

修改 radio, checkbox 樣式

* 原理
  * 取消 input 樣式
  * input + label:before 設定方塊或圓圈
  * input:checked + label before 設定改變的樣式
* 主要參考
  * [純 CSS+HTML 自定義 checkbox 效果 | 我很好奇](http://chitanda.me/2015/06/16/css3-checkbox-diy-without-js/)
  * [checkbox 和 radio 選項樣式 - Zoneless](https://zoneless.weebly.com/blog/css-checkbox-and-radio)
  * [快速小技巧：簡單的 CSS3 多選框和單選按鈕](https://webdesign.tutsplus.com/zh-hant/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953)
  * [CSS 沒有極限 - Checkbox 的妙用 | 前端，沒有極限](https://wcc723.github.io/css/2013/10/07/css-chechbox/)
  * [\[CSS3\] 用 CSS3 做表單 - 自訂單 / 多選框樣式 (一) | 男丁格爾's 脫殼玩](http://abgne.tw/css/apply-css3/css3-custom-radio-and-checkbox-button-style.html)
* 其他
  * [css input checkbox 和 radio 樣式美化](http://www.haorooms.com/post/css_mh_ck_radio)
  * [如何用 CSS 自定義 checkbox 以及 radio 按鈕樣式 « 關於網路那些事...](http://adon988.logdown.com/posts/1217632-css-checkbox-radio-style)
  * [【CSS】默認的 checkbox、input、radio 太醜了？我來教你改變使用純 css3 改寫的帶動畫的默認樣式 | Cherry's Blog](http://cherryblog.site/css-checkbox-input-radio.html)
  * [(6) CSS3 自訂 type='checkbox'樣式範例可直接套用](https://www.facebook.com/notes/%E5%BE%90%E5%98%89%E8%A3%95/css3%E8%87%AA%E8%A8%82-typecheckbox%E6%A8%A3%E5%BC%8F%E7%AF%84%E4%BE%8B%E5%8F%AF%E7%9B%B4%E6%8E%A5%E5%A5%97%E7%94%A8/10154726590978609/)

能搜尋的下拉選單

* [How to create HTML select box with searching support using jQuery | PHPGang.com](https://www.phpgang.com/how-to-create-html-select-box-with-searching-support-using-jquery_648.html)
* [HTML5 CSS JS Search / Select Filter](https://codepen.io/tipdub/pen/AXJpKj)
* [13 jQuery SelectBox/Drop-down Plugins — SitePoint](https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/)
* [javascript - Creating a select box with a search option - Stack Overflow](https://stackoverflow.com/questions/18796221/creating-a-select-box-with-a-search-option)
* [How To Create a Filter/Search List](https://www.w3schools.com/howto/howto_js_filter_lists.asp)
* [javascript - HTML select field with filter - Stack Overflow](https://stackoverflow.com/questions/15013559/html-select-field-with-filter)
* [How to filter select list options - Lessan Vaezi](http://www.lessanvaezi.com/filter-select-list-options/)
* [Filter dropdown - FooTable](https://fooplugins.github.io/FooTable/docs/examples/advanced/filter-dropdown.html)

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>

## 第七章測驗

![第七章測驗](https://i.imgur.com/7DIC4iR.png)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ayugioh2003.gitbook.io/html-css-learning/ba-3001-biao-ge-yu-biao-dan-she-ji-ji-qiao.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.