> For the complete documentation index, see [llms.txt](https://ayugioh2003.gitbook.io/html-css-learning/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ayugioh2003.gitbook.io/html-css-learning/ba-3001-biao-ge-yu-biao-dan-she-ji-ji-qiao.md).

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

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