HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第6章表格與表單

阿新 • • 發佈：2020-08-13

本教程案例線上演示

有路網PC端
 有路網移動端

免費配套視訊教程

教程配套原始碼資源

表格

table標籤（表格）、
tr標籤（行）、
td標籤（標準單元格）、
caption標籤（標題）、
th標籤（表頭單元格）。

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

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

table 表格

caption 標題

thead 表頭（語義劃分）

tbody 表身（語義劃分）

tfoot 表尾（語義劃分）

tr 行

th 表頭單元格

td 表格單元格

<table>
    <caption>考試成績表</caption>
    
    <thead>
    <tr>
        <th>姓名</th>
        
        <th>語文</th>
        
        <th>英語</th>
        
        <th>數學</th>
        
    <tr>
    </thead>
    
    <tbody>
    <tr>
        <td>小明</td>
        
        <td>80</td>
        
        <td>80</td>
        
        <td>80</td>
        
    </tr>
    <tr>
        <td>小紅</td>
        
        <td>90</td>
        
        <td>90</td>
        
        <td>90</td>
        
    </tr>
    
    <tr>
        <td>小杰</td>
        
        <td>100</td>
        
        <td>100</td>
        
        <td>100</td>
        
    </tr>
    
    </tbody>
    
    <tfoot>
    <tr>
        <td>平均</td>
        
        <td>90</td>
        
        <td>90</td>
        
        <td>90</td>
        
    </tr>
    
    </tfoot>
    
</table>

表格樣式美化

<style>
table, th, td {
     border: 1px solid black;
     border-collapse: collapse;
    
}


th, td {
     padding: 6px;
    color: blue;
    
}

</style>

給表格新增邊框，設定字型顏色，
以及給單元格設定一些padding

表單

表單就是收集使用者資訊的，就是讓使用者填寫的、選擇的。

<div> <h3>歡迎註冊本網站</h3>
    <form> 所有的表單內容，都要寫在form標籤裡面</form>
</div>

form是英語表單的意思，form中間可以新增文字框、密碼框、單選按鈕、複選框、下拉列表、按鈕、文字域等內容
1.文字框

<input type="text" value="預設值" />

2.密碼框

<input type="password"/>

3.單選按鈕

<input type="radio" name="命名" checked="checked"/>男 <input type="radio" name="命名"/>女

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

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

label標籤

<input type=“radio” name=“sex” id=“nan” /> 
<label for=“nan”>男</label> 
<input type=“radio” name=“sex” id=“nv” />
<label for=“nv”>女</label>

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

5.4.複選框

<input type="checkbox" name="aihao"/> 睡覺 
<input type="checkbox" name="aihao"/> 吃飯

複選框，最好也是有相同的name（便於伺服器端收集使用者選中的資訊）。

5.下拉列表

<select>
    <option>吃飯</option>
    <option>睡覺</option>
    <option>打豆豆</option>
</select>

select就是“選擇”，
select標籤和ul、ol、dl一樣，都是組標籤
option“選項”。

6.文字域

<textarea cols="20" rows="10"></textarea>

cols屬性表示columns“列”，

rows屬性表示rows“行”。

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

7.按鈕

普通按鈕

<input type="button" value="我是一個普通按鈕" />

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

提交按鈕

<input type="submit" />

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

重置按鈕

<input type="reset" />

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

只讀和禁用

<input name="name" type="text" value="張三"  readonly="readonly">

<input type="submit "  disabled="disabled"  value="儲存" >

專案實戰

製作商品搜尋表單

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="search-form.css">
</head>
<body>
  <div class="search">
    <form action="#">
      <input class="input" type="text" placeholder="書名">
      <input class="btn" type="button" value="搜尋">
    </form>
  </div>
</body>
</html>