###### tags: `六角筆記王` `HTML` `表單` `表格`
# 表格與表單設計技巧
## 表格標籤table
如果想建立一個表格要先寫`<table></table>`
要建立一列(橫的)table row要寫`<tr></tr>`
標格的標題table h1要寫`<th></th>`
裡面的內容(表格欄位)table data要寫`<td></td>`
做一個2行3列的表格
```html
<table>
<tr>
<th>標題一</th>
<th>標題二</th>
<th>標題三</th>
</tr>
<tr>
<td>內容一</td>
<td>內容二</td>
<td>內容三</td>
</tr>
</table>
```
顯示
## 表格的css樣式
1.在`<table>`設定類選擇器
```html
<table class="price">
<tr>
<th>標題一</th>
<th>標題二</th>
<th>標題三</th>
</tr>
<tr>
<td>內容一</td>
<td>內容二</td>
<td>內容三</td>
</tr>
```
```css
.price th, .price td{
border: 1px solid black;
}
```
結果顯示:
需要加上css reset裡面的語法
```css
table {
/*表格欄位邊框合併，collapse表示將邊框合併為單一邊框*/
border-collapse: collapse;
/*border-spacing: 表格欄位水平間的距離 表格欄位垂直間的距離;*/
border-spacing: 0;
}
```
結果顯示:
2.如果只想顯示上下線條，不想要左右線條的話
```css
.price th, .price td{
border-top: 1px solid black;
border-bottom: 1px solid black;
}
```
結果顯示:
## 表單Form、輸入欄位、Submit
### 表單
首先建立一個表單`<form>`
```html
<form action=""></form>
```
action代表要把表單送到哪裡(資料庫、網址)去
### 輸入欄位input
input有很多種類`type` ，`<input>` 本身沒有內容是一個空元素，所以不需要 `closing tag`
1.如果要`文字`請選`type="text"` (文字屬性)，本例 `name` 是替這個input取個名字本題叫`email`
```css
<input type="text" name="email">
```
2.如果要做`送出`按鈕要使用`type="submit"` ，按鈕名稱`value`為下一步
```css
<input type="submit" value="下一步">
```
### 相關介紹：
[表單元件介紹](https://www.fooish.com/html/input-tag.html)
## label、placeholder 提升表單使用者體驗
### 1.placeholder 提示文字
語法
```html
placeholder="＃"
```
是input的一個屬性 `placeholder="＃"` 用來當`提示文字`，當你輸入時就會自動消失，幫助使用者
```html
<input type="text" placeholder="請輸入電子郵件" name="email">
```
### 2.label 幫助你輸入的說明文字
`label`用來給表單的控制元件一個說明標題
`label for` 的效果等於你直接點了 input 輸入框
語法
```html
<label for="你要引導到哪邊輸入">提示文字</label>
```
利用label的`for` 屬性，`for` 的屬性值設定為某表單元件的 `id` 值，藉此來建立關聯。
引導的地方要搭配`input`用`id="＃"` 表示，通常名字會跟`name` 一樣
本例
```html
<label for="mail">電子郵件</label>
```
```html
<input id="mail" type="text" name="mail">
```
## 表單元素radio.checkbox.select.textarea
如果想做單選題使用radio
### radio單選項按鈕
語法:
```html
<input type="radio" name="sex" value="male">男生
<input type="radio" name="sex" value="female">女生
```
顯示:
### checkbox多選項按鈕
語法
```html
<input type="checkbox" name="hobby" value="movie">看電影
<input type="checkbox" name="hobby" value="music">聽音樂
<input type="checkbox" name="hobby" value="comic">看漫畫
```
顯示:
### select下拉式選單
語法:
選項用`option`來寫，一定要寫`value`才能把資料傳到後台
```html
<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`
```html
<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多行文字欄位
語法
```html
<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`
```html
<input type="text" style="border: 1px solid; color: aqua; background: yellow;">
<input type="text" class="style10" >
```
2.在`input`裡面寫`class` 再到css去寫
```html
<input class="style10" type="text">
```
在css修改樣式
```css
.style10{
border: 1px solid;
color: aqua;
background: yellow;
}
```
結果相同
### 按鈕button介紹
單純就是一顆按鈕沒辦法像`submit` 傳送資料給後台，通常就是為了搭配JS而用
語法:
```html
<input type="button" value="點選">
```
顯示:
### 改變滑鼠游標形狀cursor介紹
`cursor`屬性可以改變滑鼠游標的形狀， 設定在文字或圖片上面，當滑鼠移上去時，就可以看到滑鼠游標的形狀~
選用`pointer`會變成小手手
語法
```html
cursor: pointer;
```
### 設計表單要注意不同瀏覽器的問題
[老師推薦的框架Pure.css](https://purecss.io/start/)
特別去看form、bottom、table三類
### 相關文獻：
[其他的滑鼠游標](http://www.flycan.com/article/css/css-cursor-209.html形狀)
{"metaMigratedAt":"2023-06-16T05:44:14.658Z","metaMigratedFrom":"YAML","title":"表格與表單設計技巧","breaks":true,"disqus":"HackMD_david","contributors":"[{\"id\":\"98398d19-b920-46a7-bfb8-0572346c0714\",\"add\":7078,\"del\":306}]"}