## 本教程案例在線演示

## 教程配套源碼資源

### 表格

table標簽(表格)、

tr標簽(行)、

td標簽(標準單元格)、

caption標簽(標題)、

th標簽(表頭單元格)。

為了更深一層對表格進行語義化，HTML引入了thead、tbody和tfoot這三個標簽。

這三個標簽把表格分為三部分：表頭、表身、表腳。

table?? ?表格

caption?? ?標題

thead?? ?表頭(語義劃分)

tbody?? ?表身(語義劃分)

tfoot?? ?表尾(語義劃分)

tr?? ?行

th?? ?表頭單元格

td?? ?表格單元格

姓名語文英語數學

小明808080小紅909090小杰100100100平均909090

### 表格樣式美化

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 6px;

color: blue;

}

表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。

歡迎注冊本網站

所有的表單內容，都要寫在form標簽里面

form是英語表單的意思，form中間可以添加文本框、密碼框、單選按鈕、復選框、下拉列表、按鈕、文本域等內容

1.文本框

2.密碼框

3.單選按鈕

男 女

input的type的值如果是radio就是單選按鈕。

需要注意的是必須要有相同的name屬性，單選按鈕才能互斥。

label標簽

男

女

input元素要有一個id，然后label標簽就有一個for屬性，和id相同，就表示綁定了，這個label和input就有綁定關系了。點擊label標簽中的文字就可以選擇相應的單選框

5.4.復選框

睡覺

吃飯

復選框，最好也是有相同的name(便于服務器端收集用戶選中的信息)。

5.下拉列表

吃飯

睡覺

打豆豆

select就是“選擇”，

select標簽和ul、ol、dl一樣，都是組標簽

option“選項”。

6.文本域

cols屬性表示columns“列”，

rows屬性表示rows“行”。

值就是數字，表示行數和列數。標簽對兒中間的文字是默認出現在文本框的文字，一般不需要寫字。

7.按鈕

普通按鈕

button就是英語“按鈕”的意思。value的“值”就是按鈕上面顯示的文字。

提交按鈕

submit就是英語“提交”的意思。這個按鈕不需要寫value自動就有“提交”文字。這個按鈕點擊，表單會提交到服務器。

重置按鈕

reset就是“復位”“重置”的意思，可以重置前面各個表單元素中填寫的值。

### 只讀和禁用

### 項目實戰

制作商品搜索表單

search-form.css

.search{

height: 40px;

width: 420px;

margin: 0 auto;

margin-top: 60px;

}

.search .input{

border: 3px solid red;

width: 300px;

height: 36px;

font-size: 20px;

}

.search .btn{

height: 44px;

width: 100px;

border:0;

background-color: red;

color: white;

font-size: 18px;

font-weight: bold;

margin-left: -4px;

vertical-align: top;

letter-spacing: 6px;

}

youlu-search-form.html

Document

總結

以上是生活随笔為你收集整理的html5中单选按钮的互斥应该,HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。