###### 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>
```
顯示
![圖片](https://i.imgur.com/9uqtjO7.png)
## 表格的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;
}
```
結果顯示:
![img](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F80c20338-e594-4dda-b4d7-47a561e0ea78%2F_2021-05-18_9.39.51.png?table=block&id=d80b1163-13bb-4ea3-a400-55d87b9c2102&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=740&userId=&cache=v2)
需要加上css reset裡面的語法
```css
table {
/*表格欄位邊框合併,collapse表示將邊框合併為單一邊框*/
border-collapse: collapse;
/*border-spacing: 表格欄位水平間的距離 表格欄位垂直間的距離;*/
border-spacing: 0;
}
```
結果顯示:
![img](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6daf1c47-0ed9-4481-ad25-9912bd17aa1f%2F_2021-05-18_10.11.10.png?table=block&id=9f2951c7-0fcf-4287-8148-978052da3129&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=620&userId=&cache=v2)
2.如果只想顯示上下線條,不想要左右線條的話
```css
.price th, .price td{
border-top: 1px solid black;
border-bottom: 1px solid black;
}
```
結果顯示:
![img](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F863ec6b7-6050-47b0-97e9-bfea92b5787b%2F_2021-05-18_10.13.51.png?table=block&id=255f0fe7-8036-45aa-bac5-6982b4e70e34&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=610&userId=&cache=v2)
## 表單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">女生
```
顯示:
![img](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2e5a969d-6c00-41ef-9bd1-6aa1e824d385%2F_2021-05-20_11.08.18.png?table=block&id=017c3912-7e82-4c66-a329-d79efcf9c06a&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=460&userId=&cache=v2)
### checkbox多選項按鈕
語法
```html
<input type="checkbox" name="hobby" value="movie">看電影
<input type="checkbox" name="hobby" value="music">聽音樂
<input type="checkbox" name="hobby" value="comic">看漫畫
```
顯示:
![img](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1749d279-0cef-4a80-817b-31e9af24ba44%2F_2021-05-20_11.10.00.png?table=block&id=4484e737-97b6-47b4-874d-05468f67e82f&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=930&userId=&cache=v2)
### 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
顯示:
![img](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fac2e2791-07e4-4c4d-a7f9-eb77e733bbab%2F_2021-05-20_2.15.54.png?table=block&id=2d8e69b2-a835-4c14-8a61-8d035434732c&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=1080&userId=&cache=v2)
### 延伸閱讀:
[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;
}
```
結果相同
![img](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2a31ee94-1f5c-486a-8abf-d8ca519ab34d%2F_2021-05-20_3.11.59.png?table=block&id=468524c2-df5b-4a7a-a73f-3cc18ac1d10d&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=1270&userId=&cache=v2)
### 按鈕button介紹
單純就是一顆按鈕沒辦法像`submit` 傳送資料給後台,通常就是為了搭配JS而用
語法:
```html
<input type="button" value="點選">
```
顯示:
![img](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fef4284ff-af3c-4f2e-9820-24770b8ddb20%2F_2021-05-20_3.37.03.png?table=block&id=f5fc4017-21d3-4f9d-8754-74f05d7de2f7&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=220&userId=&cache=v2)
### 改變滑鼠游標形狀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}]"}