---
disqus: HackMD_david
---
###### tags: `六角筆記王` `HTML` `表單` `表格`
# 表格與表單設計技巧
## 表格標籤table

如果想建立一個表格要先寫`<table></table>`

要建立一列(橫的)table row要寫`<tr></tr>`

標格的標題table h1要寫`<th></th>`

裡面的內容(表格欄位)table data要寫`<td></td>`

做一個2行3列的表格

<table>
        <tr>
            <th>標題一</th>
            <th>標題二</th>
            <th>標題三</th>
        </tr>
        <tr>
            <td>內容一</td>
            <td>內容二</td>
            <td>內容三</td>
        </tr>
    </table>

顯示


## 表格的css樣式
1.在`<table>`設定類選擇器

<table class="price">
        <tr>
            <th>標題一</th>
            <th>標題二</th>
            <th>標題三</th>
        </tr>
        <tr>
            <td>內容一</td>
            <td>內容二</td>
            <td>內容三</td>
        </tr>

.price th, .price td{
    border: 1px solid black;
}

結果顯示:


需要加上css reset裡面的語法

table {
	/*表格欄位邊框合併，collapse表示將邊框合併為單一邊框*/
	border-collapse: collapse;
	/*border-spacing: 表格欄位水平間的距離 表格欄位垂直間的距離;*/
	border-spacing: 0;
}

結果顯示:


2.如果只想顯示上下線條，不想要左右線條的話

.price th, .price td{
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

結果顯示:


## 表單Form、輸入欄位、Submit
### 表單

首先建立一個表單`<form>`

<form action=""></form>

action代表要把表單送到哪裡(資料庫、網址)去
### 輸入欄位input

input有很多種類`type` ，`<input>` 本身沒有內容是一個空元素，所以不需要 `closing tag`

1.如果要`文字`請選`type="text"` (文字屬性)，本例 `name` 是替這個input取個名字本題叫`email`

<input type="text" name="email">

2.如果要做`送出`按鈕要使用`type="submit"` ，按鈕名稱`value`為下一步

<input type="submit" value="下一步">

### 相關介紹：

[表單元件介紹](https://www.fooish.com/html/input-tag.html)

## label、placeholder 提升表單使用者體驗
### 1.placeholder 提示文字

語法

placeholder="＃"

是input的一個屬性 `placeholder="＃"` 用來當`提示文字`，當你輸入時就會自動消失，幫助使用者

<input type="text" placeholder="請輸入電子郵件" name="email">

### 2.label 幫助你輸入的說明文字

`label`用來給表單的控制元件一個說明標題

`label for` 的效果等於你直接點了 input 輸入框

語法

<label for="你要引導到哪邊輸入">提示文字</label>

利用label的`for` 屬性，`for` 的屬性值設定為某表單元件的 `id` 值，藉此來建立關聯。

引導的地方要搭配`input`用`id="＃"` 表示，通常名字會跟`name` 一樣

本例

<label for="mail">電子郵件</label>

<input id="mail" type="text" name="mail">

## 表單元素radio.checkbox.select.textarea
如果想做單選題使用radio

### radio單選項按鈕

語法:

<input type="radio" name="sex" value="male">男生
<input type="radio" name="sex" value="female">女生

顯示:


### checkbox多選項按鈕

語法

<input type="checkbox" name="hobby" value="movie">看電影
<input type="checkbox" name="hobby" value="music">聽音樂
<input type="checkbox" name="hobby" value="comic">看漫畫

顯示:


### select下拉式選單

語法:

選項用`option`來寫，一定要寫`value`才能把資料傳到後台

<select name="birth">
		<option value="1900">1900</option>
		<option value="1901">1901</option>
		<option value="1902">1902</option>
		<option value="1903">1903</option>
</select>

搭配之前的`label` 元素: 要記得`for`要對應`id`

<form action="index.html">
        <label for="birth">生日</label>
        <select id="birth" name="birth">
            <option value="1900">1900</option>
            <option value="1901">1901</option>
            <option value="1902">1902</option>
             <option value="1903">1903</option>
        </select>
        <input type="submit" value="送出">
 </form>

### textarea多行文字欄位

語法

<textarea name="content" cols="30" rows="10"></textarea>

`cols`: 一個數字，設定輸入框的寬度是多少文字 (characters)，預設是 30

`rows`: 一個數字，設定輸入框的高度是幾行文字 (lines)，預設是 10

顯示:


### 延伸閱讀:

[textarea](https://www.fooish.com/html/textarea-tag.html)
## 用css修改表單form樣式
### 修改的方式

1.直接在html裡面加`style`

<input type="text" style="border: 1px solid; color: aqua; background: yellow;">
<input type="text" class="style10" >

2.在`input`裡面寫`class` 再到css去寫

<input class="style10" type="text">

在css修改樣式

.style10{
	border: 1px solid; 
	color: aqua; 
	background: yellow;
}

結果相同


### 按鈕button介紹

單純就是一顆按鈕沒辦法像`submit` 傳送資料給後台，通常就是為了搭配JS而用

語法:

<input type="button" value="點選">

顯示:


### 改變滑鼠游標形狀cursor介紹

`cursor`屬性可以改變滑鼠游標的形狀， 設定在文字或圖片上面，當滑鼠移上去時，就可以看到滑鼠游標的形狀~

選用`pointer`會變成小手手

語法

cursor: pointer;

### 設計表單要注意不同瀏覽器的問題

[老師推薦的框架Pure.css](https://purecss.io/start/)

特別去看form、bottom、table三類

### 相關文獻：

[其他的滑鼠游標](http://www.flycan.com/article/css/css-cursor-209.html形狀)