form表單有什么作用澡腾、有哪些常用的input 標(biāo)簽沸伏，分別有什么作用
- form標(biāo)簽是表單的外殼，用于把用戶輸入的數(shù)據(jù)提交到后臺(tái)
- 常見的input標(biāo)簽
| 標(biāo)簽 | 含義 |
|---|---|
| <input type="text" name="firstname"> | 創(chuàng)建文本域text |
| <input type="text" name="user"> | 創(chuàng)建password |
| <input type="checkbox" name="Bike"> | 復(fù)選框checkbox |
| <input type="radio" checked="checked" name="Sex" value="male" /> | 單選按鈕radio |
post 和 get 方式的區(qū)別
- 最直觀的區(qū)別就是GET把參數(shù)包含在URL中动分，POST通過request body傳遞參數(shù)毅糟。
- GET被強(qiáng)制服務(wù)器支持
- GET請(qǐng)求發(fā)送數(shù)據(jù)更小
- POST請(qǐng)求不能被緩存
- POST請(qǐng)求相對(duì)GET請(qǐng)求較安全
在input里，name 有什么作用
- 作為可與服務(wù)器交互數(shù)據(jù)的HTML元素的服務(wù)器端的標(biāo)示
- HTML元素Input type='radio'分組澜公，我們知道radio button控件在同一個(gè)分組類姆另，check操作是mutex的，同一時(shí)間只能選中一個(gè)radio，這個(gè)分組就是根據(jù)相同的Name屬性來實(shí)現(xiàn)的
- 建立頁面中的錨點(diǎn)迹辐，我們知道<a href="URL">link</a>是獲得一個(gè)頁面超級(jí)鏈接蝶防，如果不用href屬性，而改用Name
- 某些特定元素的屬性
radio 如何分組
- 設(shè)置name屬性明吩，相同的為一組
placeholder 屬性有什么作用
- placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息（hint）间学。
該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失印荔。
placeholder 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password
type=hidden隱藏域有什么作用低葫、 舉例說明
- 隱藏域在頁面中對(duì)于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息仍律，以利于被處理表單的程序所使用氮采。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器
- 舉例：獲取用戶當(dāng)前的瀏覽器版本/系統(tǒng)的版本等
HTML 表單的用法
-
所有的HTML表單都從一個(gè)<form>元素開始
<form action="/my-handling-form-page" method="post">
</form>
-
該action屬性定義了在提交表單時(shí)收集的數(shù)據(jù)應(yīng)發(fā)送的位置（URL）
-
該method屬性定義使用哪種HTTP方法發(fā)送數(shù)據(jù)（可以是“get”或“post”）
-
input 元素
| type屬性 | 類型描述 |
|---|---|
| text | 常規(guī)文本輸入染苛。可用value屬性定義默認(rèn)值主到〔栊校可用 placeholder屬性提示用戶輸入 |
| hidden | 隱藏字段，不會(huì)顯示 |
| submit | 提交表單時(shí)登钥，此提示不會(huì)被提交 |
| password | 密碼輸入畔师，字符輸入后自動(dòng)隱藏∧晾危可用 placeholder屬性提升用示輸入看锉，submit提交表單時(shí)，此提示不會(huì)被提交 |
| checkbox | 復(fù)選框輸入（多個(gè)選項(xiàng)中可選擇多個(gè)選項(xiàng)）塔鳍。同一組數(shù)據(jù)伯铣，對(duì)應(yīng)的name屬性相同，每個(gè)選項(xiàng)的值由value屬性定義 |
| radio | 單選按鈕輸入（多個(gè)選項(xiàng)中選擇一個(gè)選項(xiàng)）轮纫。同一組數(shù)據(jù)腔寡，對(duì)應(yīng)的name屬性相同，每個(gè)選項(xiàng)的值由value屬性定義 |
| file | 選擇文件掌唾》徘埃可選擇的文件類型由accept屬性定義 |
| reset | 重置用戶輸入 |
| button | 顯示按鈕，不能用于提交表單 |
| submit | 提交按鈕（提交表單） |
-
select元素
定義下拉列表糯彬，<option> 元素定義待選擇的選項(xiàng)凭语。
列表通常會(huì)把首個(gè)選項(xiàng)顯示為被選選項(xiàng)。也可以通過添加 selected 屬性來定義預(yù)定義選項(xiàng)
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
-
textarea元素
定義多行輸入字段（文本域）撩扒，通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸大小
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
-
label元素
<label>元素用來提示<input>似扔、<select>、<textarea>等輸入元素表頭，可用for屬性與屬入元素id相關(guān)聯(lián)虫几，幫助輸入元素聚焦鼠標(biāo)輸入
<input type="radio" name="sex" value="male" id="male"><label for="male">男</label>
<input type="radio" name="sex" value="female" id="female"><label for="female">女</label>
