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

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

html5 form標(biāo)簽

作用：form標(biāo)簽用于創(chuàng)建供用戶輸入的HTML表單（表單域），以實(shí)現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會(huì)被提交給服務(wù)器。

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

<form>標(biāo)簽語法格式

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

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

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

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

method提交方式常用的4種：

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

post和get區(qū)別：

• 數(shù)據(jù)提交方式，get把提交的數(shù)據(jù)url可以看到，post看不到

• get一般用于提交少量數(shù)據(jù)，post用來提交大量數(shù)據(jù)

• get最多提交1K數(shù)據(jù)，post理論上沒有限制

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

一個(gè)完整的表單包含三個(gè)基本組成部分：表單標(biāo)簽、表單域、表單按鈕。

1、表單標(biāo)簽

是指form標(biāo)簽本身，它是一個(gè)包含表單元素的區(qū)域，使用定義

2、表單域

是標(biāo)簽中用來收集用戶輸入的每一項(xiàng)，通常用input標(biāo)簽來定義，input標(biāo)簽有不同的類型，對(duì)應(yīng)用戶不同的數(shù)據(jù)。（比如：文本域、下拉列表、單選框、復(fù)選框等等）

3、表單按鈕

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

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

單行文本框<input type="text" >默認(rèn)值是type="text"

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

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

復(fù)選框<input type="checkbox"/>

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

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

下拉框<select>標(biāo)簽

多行文本<textarea></textarea>

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

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

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

控件標(biāo)簽：

input標(biāo)簽

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

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

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

input標(biāo)簽的一些屬性:

checked屬性只有單選框和復(fù)選框才有

密碼框

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

單選框

name相同的單選框智能選擇一個(gè)

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

復(fù)選框

多選框可以選取多個(gè)

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

按鈕

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

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

重置按鈕會(huì)把表單信息重置為默認(rèn)

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

下拉框標(biāo)簽

下拉框標(biāo)簽有點(diǎn)特殊，不是input的屬性而是一個(gè)單獨(dú)的標(biāo)簽

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

（學(xué)習(xí)視頻分享：web前端入門）