在html中，from標簽用于創建供用戶輸入的HTML表單（表單域），以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器；語法“<form action="提交地址" method="提交方式" name="表單名稱">表單控件</form>”。form表單中可包含一個或多個表單元素，比如input、select、textarea。

前端（vue）入門到精通課程：進入學習

本教程操作環境：windows7系統、HTML5版、Dell G3電腦。

html5 form標簽

作用：form標簽用于創建供用戶輸入的HTML表單（表單域），以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。

form表單域中可以包含各種交互控件–控件標簽（文本字段、復選框、單選框、提交按鈕等等），比如< input>、< button>、< select>、< textarea>等標簽。

<form>標簽語法格式

<form action="提交地址" method="提交方式" name="表單名稱">   各種表單控件 </form>

• name：只是給該表單命名，用于js技術使用。

• action：設定表單數據提交給哪個文件，用于后端技術（比如php）來接受并處理數據

• method: 設定數據提交方式，用于根據不同的數據需求來選擇合適的提交（傳送）方式

method提交方式常用的4種：

get    		一般用來查詢信息 post		一般用來新增信息 put      	一般用來修改信息 delete		一般用來刪除信息

post和get區別：

• 數據提交方式，get把提交的數據url可以看到，post看不到

• get一般用于提交少量數據，post用來提交大量數據

• get最多提交1K數據，post理論上沒有限制

• get提交的數據在瀏覽器歷史記錄中，安全性不好

一個完整的表單包含三個基本組成部分：表單標簽、表單域、表單按鈕。

1、表單標簽

是指form標簽本身，它是一個包含表單元素的區域，使用定義

2、表單域

是標簽中用來收集用戶輸入的每一項，通常用input標簽來定義，input標簽有不同的類型，對應用戶不同的數據。（比如：文本域、下拉列表、單選框、復選框等等）

3、表單按鈕

用來提交表單中的所有信息到服務器

*表單域和表單按鈕都屬于表單元素。

單行文本框<input type="text" >默認值是type="text"

密碼框<input type="password"/>　

單選按鈕<input type="radio" name=""/>

復選框<input type="checkbox"/>

隱藏域<input type="hidden"/>

文件上傳<input type="file"/>

下拉框<select>標簽

多行文本<textarea></textarea>

提交按鈕<input type="submit"/>

普通按鈕<input type="button"/>

重置按鈕<input type="reset"/>

控件標簽：

input標簽

• input 輸入的意思
• <input />標簽為單標簽
• type屬性設置不同的屬性值用來指定不同的控件類型
• 除了type屬性還有別的屬性

type="text"為普通輸入框 value為里面的值 name和id會在寫js的時候用

    <form action="url地址" method="提交方式" name="表單名稱">         <input type="text" name="" id="" value="你好">     </form>

input標簽的一些屬性:

checked屬性只有單選框和復選框才有

密碼框

<input type="password" name="" id="" value="">

單選框

name相同的單選框智能選擇一個

        男 <input type="radio" name="gender" id="" value="">          女 <input type="radio" name="gender" id="" value="">

復選框

多選框可以選取多個

        愛好： <br>          抽煙<input type="checkbox" name="hobby" id="" value="">          喝酒<input type="checkbox" name="hobby" id="" value="">          燙頭<input type="checkbox" name="hobby" id="" value="">

按鈕

普通按鈕可以根據需求來用js添加功能

提交按鈕會把輸入的表單信息提交到form表單的action地址

重置按鈕會把表單信息重置為默認

    <form action="url地址" method="提交方式" name="表單名稱">         <input type="button" name="" id="" value="我是一個普通按鈕">         <input type="submit" name="" id="" value="我是一個提交按鈕">         <input type="reset" name="" id="" value="我是一個重置按鈕">     </form>

下拉框標簽

下拉框標簽有點特殊，不是input的屬性而是一個單獨的標簽

        <select name="省市區" id="">             <option value="">山東</option>             <option value="">北京</option>             <option value="">江蘇</option>             <option value="">深圳</option>             <option value="">上海</option>         </select>

（學習視頻分享：web前端入門）