<form><p><input type="reset"></p></form>

<form><p><input type="button" value="按鈕"/></p></form>

<form action="/index/" method="post"><p><input type="file"/></p></form>

<form action="/index/" method="post">

<form action="/index/" method="post">

<form action="/index/" method="get">

. 打開一個頁面，通過效果圖來引入今天的內容：從效果圖上看出，網頁右側有一個登錄區域，里面包含文本框，密碼框，下拉菜單、復選框、按鈕等，當點擊按鈕時，該頁面會自動將用戶輸入的內容發送到服務器，這個時候就需要用到表單了

2. 什么是表單

(1) 通俗說表單是一個將用戶輸入的信息組織起來的容器，需要將用戶輸入信息填寫到表單容器中，當點擊按鈕時，表單會將數據統一發送到服務器

(2) 典型的應用場景：登錄注冊 網上訂單 網上搜索 在網頁中應用非常廣泛，例如申請郵箱，需要先填寫注冊信息，然后才能申請提交，同時如果希望登錄郵箱，也必須在登錄郵箱才能進入到郵箱里，這就是表單典型應用

(3) 為了方便操作，表單提供了多種表單元素：文本框 密碼框單選按鈕 復選框 下拉列表多行文本等等。在接下來的學習中，逐步掌握在網頁中創建表單的方法以及常用的表單元素

3. 表單怎么使用呢

(1) 在代碼視圖下，光標移動到需要放置表單的位置上，點擊--插入---表單----表單，可以在工作區插入一個表單。由于表單僅僅是一個容器，不會在瀏覽器顯示。

(2) 可以看到 表單使用<form></form>標簽表示，在開始和結束標簽之間存放表單元素等內容。

(3) 表單屬性

① 為了能夠實現信息提交目的，還需要為表單指定要提交的頁面地址，并指定提交方式

② 光標停留在表單任意位置，單擊屬性面板會自動顯示表單相關的屬性

③ Id:設置表單的id。相當于現實中身份證，處理表單，一般都要表單設置id id=””

④ 動作：當提交表單時，如何向發送表單數據，處理表單數據的目標地址 action=””

⑤ 方法：規定提交方式 取值 get或者post method =””

⑥ 咱們前期學網頁的時候，先不考慮這些元素，簡單了解就好，后期跟程序在進行整合

(4) 表單屬性

① 最常用的輸入元素是單行文本框，提供給用戶輸入單行文本信息，比如用戶名的輸入。步驟如下，光標停留到表單里 插入---表單---文本域

② 插入單行文本框之后，鼠標單擊選中文本框

1) 元素名稱：對應于屬性面板中name， 用來指定表單元素的名稱，提交的時候，填寫的數據是隨著表單名稱一起提交的

2) 字符寬度:單行文本框的寬度 屬性面板中 size

3) 最多字符：允許用戶輸入的最多字符數.超過該數值，將無法繼續輸入 屬性面板中 Max Length

4) 初始值：打開網頁的時候，文本默認的顯示文本.一般用于提示用戶輸入信息 屬性面板中 value

5) Type: 表單元素的類型 name:表單元素的名稱 size:表單元素的寬度 maxlength:允許輸入的最大字符 value文本框的初始值

③ 密碼框

1) 用戶登錄的表單，為了保障賬戶的安全，在需要密碼的地方使用*代替。防止密碼被竊取的風險，只不過是文本顯示輸入的文本，密碼框將用戶輸入文本為 *來顯示。

2) 代碼顯示-- 除了type屬性值不一樣之外，其他屬性和單行文本框是一樣的

④ 單選按鈕

1) 也是網頁中應用非常廣泛，主要作用是 來限制用戶選中一組數據中的其中一個，以確保數據的準確性。 例如用戶的性別的時候，正確的是 男或者女，如果是單行文本，可以隨意填寫，往往提交的信息不準確

2) 插入---表單----單選按鈕：插入一個單選按鈕，如果需要多個話，在重復上述步驟即可

3) 選中插入的單選按鈕，發現效果不是我們期待的，兩個單選按鈕可以同時選中。那咱們如何能選中一個呢

4) 可以根據單選按鈕名稱進行分組，相同名稱的一組按鈕才能相互排斥。只需要在多個單選框設置為相同的名稱就可以了， 被選中的單選按鈕連同該項的值會一起提交

5) 是否是默認選中，checked:表示按鈕的默認選中的狀態

⑤ 復選框

1) 在一些特殊情況下，并不強調要求用戶選擇其中的一項，例如選擇自己興趣愛好的，愛好可能會有多項，就需要用到復選框，允許用戶選擇其中多項內容

2) 插入---表單---復選框，如果想添加多個，重復上述步驟

3) 同單選按鈕一樣，同一組的復選框應當設置統一名稱，便于提交數據，同時也可以為復選框設置默認選中，可以設置多個默認選中狀態

⑥ 下拉列表

1) 主要用在多個項目中選中其中一個場景，可以使用單選或者多選按鈕來定義，如果備選選項較多是，會占用較大空間， 用戶選擇自己所在的省份和城市變得不太現實，下拉列表能解決這一問題而出現的。占用極少空間顯示較多內容

2) 插入----表單---選擇,可以向表單中插入一個下拉列表，剛創建的列表的時候，是沒有內容的，給列表添加 列表值

3) 單擊列表值，會彈出列表設置面板，設置下拉備選框

4) 下拉列表：select標簽 列表項使用option標簽

5) Select name:下拉列表的名稱，option是放入到select標簽內的，使用value屬性表示當前項的值，selected 該選項默認是選中的 option開始標簽和結束標簽之間的內容是 顯示在用戶面前的文本

⑦ 按鈕

1) 是表單中是不可缺少的部分，寫好表單元素之后，需要添加按鈕，用來響應用戶的操作。

2) 常見按鈕：提交、重置、普通、圖片

a. 提交按鈕：整個表單提交的內容發送到服務器

b. 重置按鈕：整個表單還原初始狀態

c. 普通按鈕：沒有任何反應，通常和javascript特效方面，后面課程繼續學習

d. 圖片：主要是為了彌補普通按鈕在外觀上不足，允許我們使用一張圖片來代替

3) 插入---表單---按鈕， 功能通過屬性面板中

4. 表單在實際項目中怎么使用，看一下綜合案例

(1) 制作 網易郵箱登錄頁面

(2) 演示內容------只寫 表單 案例，其他內容，寫好。

們在瀏覽網頁的時候，可以看到頁面上有導航欄，逛商城的時候會看到商品的詳情頁里有商品的簡介，以及在注冊或者申請一個網站會員的時候會讓我們填寫各種各樣的信息，這些分別由列表、表格、表單來完成的，今天我學習了這些知識，下面我把我學到的知識梳理一下，以及在學習中遇到的坑總結一下，希望能給其他初學者一些幫助，同時，如有不足之處，也請各位大神指出來，我也好學習學習，提升自我。

HTML列表在網站頁面中使用的是相當廣泛。如上圖的網站導航欄，就是使用了列表實現的，再比如說，一個欄目的文章列表等等，都是使用了列表功能，根據我今天學到的內容，我總結了一下，總共三大知識點：

一、HTML列表分為三種：

1.無序列表：

1. 無序列表是由標簽<ul>和<li>組成的；
2. <ul>標簽是聲明無序列表的，<li>標簽作為列表中每一項的起始項。

可以在<ul>標簽中使用type屬性來控制每一項前面的圓點的樣式:

• 1.disc 默認值，每一項前面的圓點為黑色實心圓。
• 2.square 每一項前面的圓點為實體方心。
• 3.circle 每一項前面的圓點為空心圓。

<h3>商品列表</h3>
<ul start="2">
    <li>iPhone 12</li>
    <li>MacBook Air</li>
    <li>AirPods Pro</li>
</ul>

• 效果如圖：

2.有序列表：

1. 與無序列表有區別的是有序列表，他的每一項都是由它是有先后順序進行排列的，并且會用數字依次進行標記；
2. 有序列表由標簽<ol>和<li>組成。

<h3>商品列表</h3>
<ol>
    <li>iPhone 12</li>
    <li>MacBook Air</li>
    <li>AirPods Pro</li>
</ol>

• 效果如圖：

可以在<ol>標簽中使用start屬性來控制第一項數字起始值：

<h3>商品列表</h3>
<ol start="2">
    <li>iPhone 12</li>
    <li>MacBook Air</li>
    <li>AirPods Pro</li>
</ol>

效果如圖：

可以使用type規定在列表中使用的標記類型，type值有五種：

• 1 默認值，以數字樣式標記；
• A 以大寫字母作為每一項前面的標記；
• a 以小寫字母作為每一項前面的標記；
• I 以大寫的羅馬數字作為標記；
• i 以小寫的羅馬數字作為標記。

不過我個人感覺，這個type屬性的作用貌似不多大，基本上都是以默認值，就是數字來作為每一項的標記了吧。

3.自定義列表：

<dl>
    <dt>名稱：</dt>
    <dd>小白學編程</dd>
    <dt>地址：</dt>
    <dd>河南省鄭州市二七區</dd>
    <dt>聯系</dt>
    <dd>電話：<a href="tel:189****1122">189****1122</a></dd>
    <dd>郵箱：<a href="mailto:admin@admin.com">admin@admin.com</a></dd>
</dl>

• 效果如圖：

備注：根據本小白查的文檔，a標簽的href屬性，不僅可以填寫鏈接，還可以用：

【tel:電話號碼】的格式點擊進行撥號，只不過是在電腦上需要有能撥號的軟件；

【mailto:郵箱地址】的格式可以快速拉起發送郵件的軟件。

不過我不知道這個的兼容性怎么樣，如果有知道的大佬，可以在評論區指導一下，跪謝！

二、HTML表格：

• <table>標簽定義一個HTML表格；
• 一個HTML表格由table以及一個或多個tr、th或者td組成
• tr元素定義表格行，th元素定義表頭，td元素定義表格單元格。

一個表格的基本結構：

<table class="table">
    <!-- caption：表格標題 -->
    <caption>
        商品信息表
    </caption>
    <!-- 表頭 -->
    <thead>
        <!-- 添加表格數據的時候必須先添加一行 -->
        <tr>
            <td>ID</td>
            <td>商品名稱</td>
            <td>單價</td>
            <td>單位</td>
            <td>數量</td>
            <td>金額</td>
        </tr>
    </thead>
    <!-- 一個表格可以有多個tbody，但是只能有一個thead -->
    <tbody>
        <tr>
            <td>1</td>
            <td>iPhone 12 mini</td>
            <td>5499</td>
            <td>部</td>
            <td>100</td>
            <td>549900</td>
        </tr>
    </tbody>
</table>

• 總結：
  1.一個表格允許有多個<tbody>，但是有且只能有一個<thead>；
  2.添加表格數據的時候必須先添加一行；
  3.所有的數據必須填充到<td>或者<th>標簽中；
  4.th是td元素的一個加強版，<th>比<td>多了個加粗和居中的效果。

Excel里的表格可以進行行與列的合并，單元格直接也能合并，那么HTML表格也是可以的，可以使用colspan進行列合并，rowspan進行行的合并。利用這兩個屬性，我們可以使用<table>標簽寫一個課程表。

三、HTML表單與常用控件

HTML表單是用于搜集用戶輸入的不同類型數據的，它包含了不同類型的<input>元素，如:文本框、單選框、復選框、提交按鈕等等。因此可以看出，<input>元素是表單中最重要的元素。

表單的基本格式：

<form action="" method="POST" class="register">
    <!-- 這里面可以放input元素 -->
</form>

• action：處理表單的程序，通知表單往何處發送數據；
• method：表單數據提交類型，有兩個值：
  - GET：數據直接顯示在url地址中；
  - POST：表單數據在請求頭體中。

根據我學習的成果，我總結出了input元素的七種type類型并一一做了記錄：

1.type="text" 單行文本框

<label for="username">賬號：</label>
<input type="text" name="username" id="username" value="admin" required>

2.type="email" 郵箱型文本框

<label for="email">郵箱：</label>
<input type="email" name="email" id="email" value="html@html.cn" required>

郵箱型文本框還會對輸入的內容進行校驗，如果不符合郵件地址的格式會彈出如上圖提示。

3.type="password" 密碼型文本框/非明文

<label for="password">密碼：</label>
<input type="password" name="password" id="password" value="" placeholder="密碼不少于6位" required>

值得注意的是，密碼型文本框在輸入密碼的時候都是以小黑點進行替換的，并不會顯示我們輸入的內容。

4.type="radio" 單選框

<label for="">性別：</label>
<div>
    <input type="radio" name="gender" value="male" id="male">
    <label for="male">男</label>
    <input type="radio" name="gender" value="male" id="male">
    <label for="female">女</label>
    <input type="radio" name="gender" value="male" id="male" checked>
    <label for="secret">保密</label>
</div>

單選框（radio）的name值必須都相同才能保證值的唯一性，默認選中使用checked屬性。

5.type="checkbox" 復選框

<label for="#">興趣：</label>
<div>
    <input type="checkbox" name="hobby[]" value="basketball" id="basketball">
    <label for="basketball">籃球</label>
    <input type="checkbox" name="hobby[]" value="game" id="game">
    <label for="game">游戲</label>
    <input type="checkbox" name="hobby[]" value="travel" id="travel">
    <label for="travel">旅游</label>
    <input type="checkbox" name="hobby[]" value="program" id="program">
    <label for="program">編程</label>
</div>

復選框的name值一定要用數組表示，否則，服務器在接收數據的時候不能獲取所有選中的值。

6.type="file" 文件域

<label for="user-pic">頭像：</label>
<input type="file" name="user_pic" id="user-pic" />

7.type="hidden" 隱藏域

<input type="hidden" name="MAX_FILE_ZIE" value="80000" />

隱藏域在頁面是看不到的，是服務器端進行處理的一項數據。

通過上述的七種<input>元素類型，我得出一個結論就是一個<input>元素至少包含有三個屬性：

1. type 控件的類型；
2. name 相當于變量名稱，用于后端服務器接收時使用；
3. value 控件的值。

除了上述的<input>元素的7種標簽類型，還有下拉列表、文本域這些常用的控件。

下拉列表/下拉框

<label for="">學歷：</label>
<select name="edu" id="eud">
    <option value="1">初中</option>
    <option value="2">高中</option>
    <option value="3" selected>本科</option>
    <option value="4">研究生</option>
    <option value="5" label="老司機">博士</option>
</select

• 注意：
  如果option里有label值，label屬性的優先級于option里的內容。因此，上述列表第5項應該顯示“老司機”。
• HTML5中新屬性：
  multiple multiple可以選擇多個選項
  size 數值，如：3，下拉框里可見的選項數量

<label for="">學歷：</label>
<select name="edu" id="eud">
    <option value="1">初中</option>
    <option value="2">高中</option>
    <option value="3" selected>本科</option>
    <option value="4">研究生</option>
    <option value="5" label="老司機">博士</option>
</select>

文本域（多行文本框）

<label for="comment">備注：</label>
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>

文件域與隱藏域

上傳文件需要注意兩點：

1. 請求類型必須為POST類型；
2. form表單必須有enctype屬性，并且數據編碼設置為：enctype=”multipart/form-data”；

<form action="" method="POST" class="register" enctype="multipart/form-data">
    <label for="user-pic">頭像：</label>
    <!-- 隱藏域在頁面是看不到的，是服務器端進行處理的一項數據。 -->
    <input type="hidden" name="MAX_FILE_ZIE" value="80000" />
    <input type="file" name="user_pic" id="user-pic" />
    <div class="user-pic" style="grid-column: 2;"></div>
    <button>提交</button>
</form>

enctype有3個值：

1. application/x-www-form-urlencoded 默認值，在發送前對所有字符進行編碼；
2. multipart/form-data 使用上傳文件空間時必須用該值；
3. text/plain 將空格轉換為“+”，但不對特殊字符編碼。

四、表單的form屬性

<form action="check.php" method="get" id="register">
  <div class="box">
  	<label for="email">郵箱:</label>
		<input type="email" form="register" name="email" id="email" placeholder="demo@email.com" />
  	<label for="password">密碼:</label>
		<input type="password" form="register" name="password" id="password" placeholder="至少8位" />
  	<button form="register">提交</button>
	</div>
</form>
<label for="username">帳號:</label>
<input type="text" name="username" id="username" placeholder="不能為空" />

• 如果某個控件寫在form表單的外部，則該控件需要使用form屬性：form=”表單的id值”，才可以在表單提交時傳該控件的值，否則無法進行傳值。

例如：以下情況就是沒有在空間中寫form屬性的情況，我們可以看到，在瀏覽器里沒有獲取到密碼password的值，只獲取到了username和email的值：

我個人的理解是：如果不把表單控件寫到form內部，這樣會方便js獲取表單元素的值，但是這樣寫會容易影響布局，造成布局混亂，建議還是按照標準的寫法，把所有的控件都寫到form表單內部。

至于什么時候使用GET方法，什么時候使用POST方法呢？通過今天的學習，我做了如下總結：

1. GET方法傳輸的數據相對于POST要小的很多，并且是明文傳輸的，是直接將參數放在應用程序的URL中傳輸的，一眼就能看見，因此對于小一些的表單，對安全性要求不高的，可以使用GET方法。
2. POST方法可以發送大文件，并且在請求的URL中看不到發送的數據，安全性高，因此建議使用POST方法。當然這個安全性也是相對來說的，對于一些網絡黑客高手，還是有辦法獲取這些傳輸內容，至于怎么獲取的，我也不清楚，畢竟咱還是小白。
3. 還有一點就是在上傳文件的時候必須使用POST方法，因為文件一般都比較大，GET方法最大大概只能發送32K的數據，POST方法可以達到1G。

作業：用表格寫一個課程表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/table.css">
    <title>表格：行與列的合并</title>
</head>
<body>
    <table class="lesson">
        <caption>
            xxxx小學課程表
        </caption>
        <thead>
            <tr>
                <th colspan="2"></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">上午</td>
                <td>1</td>
                <td>語文</td>
                <td>數學</td>
                <td>音樂</td>
                <td>社會</td>
                <td>科學</td>
            </tr>
            <tr>
                <td>2</td>
                <td>數學</td>
                <td>語文</td>
                <td>音樂</td>
                <td>語文</td>
                <td>數學</td>
            </tr>
            <tr>
                <td>3</td>
                <td>美術</td>
                <td>音樂</td>
                <td>音樂</td>
                <td>數學</td>
                <td>音樂</td>
            </tr>
            <tr>
                <td>4</td>
                <td>社會</td>
                <td>體育</td>
                <td>音樂</td>
                <td>體育</td>
                <td>語文</td>
            </tr>

            <tr class="rest">
                <td colspan="7">中午休息</td>
            </tr>

            <tr>
                <td rowspan="4">下午</td>
                <td>5</td>
                <td>語文</td>
                <td>數學</td>
                <td>音樂</td>
                <td>社會</td>
                <td>科學</td>
            </tr>
            <tr>
                <td>6</td>
                <td>數學</td>
                <td>語文</td>
                <td>音樂</td>
                <td>語文</td>
                <td>數學</td>
            </tr>
            <tr>
                <td>7</td>
                <td>課外活動：</td>
                <td colspan="4">各班自行組織，自愿參加</td>
                <td>數學</td>
                <td>音樂</td> -->
            </tr>
        </tbody>
    </table>
</body>
</html>

效果：

個人總結：為了學習這些表單知識，真真的是看了一天，頭都懵了，還有不少內容沒有記住，還是需要多寫多練，其中我認為比較坑的幾個地方是：

1. 表格的行與列的合并，colspan、rowspan，如果能熟練的用好這兩個屬性，相信寫出上面課程表實例也不難；
2. 表單的屬性太多了，一時半會真的是記不住；
3. 上傳文件需要注意的兩點：請求類型必須為POST；form表單加上enctype=”multipart/form-data”；
4. 表單控件的form屬性，這個可能是因為我還是個小白，才接觸這些東西，不知道這些知識點，不知道今后的工作中用到這個屬性的情況多不多。

在看視頻教程的過程中，我看到好多大佬在用VS Code的時候都是使用了快捷鍵，后來網上搜了一下，原來官方給的就有一個PDF文檔，從VS里就可以進去，在工具的頂部導航欄幫助里，如下圖：

為了方便大家快速找到，我把官方地址貼出來吧，VS Code快捷鍵PDF文檔：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf