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

時間 2021-01-30

標籤 css html 前端 git 服務器 ide 學習字體網站 spa 欄目無線简体版

原文原文鏈接

本教程案例在線演示

有路網PC端
 有路網移動端css

免費配套視頻教程

免費配套視頻教程html

教程配套源碼資源

教程配套源碼資源前端

表格

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

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

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

table 表格學習

caption 標題字體

thead 表頭（語義劃分）網站

tbody 表身（語義劃分）spa

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>