HTML 表單用于搜集不同類型的用戶輸入
一姚建、<form>元素
定義 HTML 表單
<form action='' mehtod=''>
/* form elements */
</form>
表單屬性
- action：提交表單時，向何處發(fā)送數(shù)據(jù)巷挥，取值有
（1）絕對或相對url烹卒，一般指向服務(wù)器的一個處理程序
（2）使用mailto協(xié)議的url地址，表單會以電子郵件形式發(fā)送倦西，比較少見
（3）空值能真，提交給當前頁面
- method：提交數(shù)據(jù)的處理方式，常用是GET扰柠，POST
（1）GET提交：瀏覽器會將表單數(shù)據(jù)以?name=value&name=value格式附在action指定的url后粉铐。由于url長度限制，通常get傳送的數(shù)據(jù)量在1kb以下
（2）POST提交：瀏覽器將數(shù)據(jù)作為http請求的一部分發(fā)送給服務(wù)器耻矮，數(shù)據(jù)量不受限制
target：規(guī)定在何處顯示返回結(jié)果秦躯，取值有_blank（在新窗口打開）， _self（當前框架下打開裆装，默認）踱承， _parent（父級框架中打開）， _top（頂級窗口中打開）
title：鼠標停留時浮現(xiàn)文本
enctype：對表單數(shù)據(jù)進行編碼哨免，默認為“application/x-www-form-urlencoded”
name：name屬性是與服務(wù)器通信時使用的名稱茎活，而id屬性是瀏覽器使用的名稱
二、表單內(nèi)部元素
-
單行輸入
<input type='text' value='文本信息'>主要屬性
- size：文本框?qū)挾茸镣伲宰址麨閱挝辉乩螅笔≈凳?0
- value：文本框的值
- maxlength：用戶輸入的最大字符長度
- readonly：只讀，用戶將不可改變文本框的值
- disabled：禁用采桃，將不能獲得文本框焦點懒熙，也不能改變值丘损，且提交時此內(nèi)容不會發(fā)送
- 密碼輸入
<input type='password' value='123'>
- 單選按鈕
<input type='radio'>
通過使用相同name來確定一組單選按鈕，添加checked屬性可使其默認選中
<input type='radio' name='sex' value='男' checked>男
<input type='radio' name='sex' value='女'>女
- 復(fù)選按鈕
<input type='checkbox'>
通過相同name確定一組復(fù)選按鈕工扎，添加checked屬性可使其默認選中
<input type='checkbox' name='hobby' value='sing' checked>唱歌
<input type='checkbox' name='hobby' value='read'>讀書
<input type='checkbox' name='hobby' value='run'>跑步
- 隱藏域
<input type='hidden' value='123'>
主要用來隱藏不需要顯示的信息徘钥，提交時也會被發(fā)送給服務(wù)器
- 文件上傳
<input type='file' accept='image/png' multiple='multiple'>
使用此元素，form的enctype必須為multipart/form-data肢娘，method為POST呈础。accept屬性用來選擇可上傳文件的類型，multiple屬性可選擇多個文件
常見MIME類型
| 后綴名 | MIME名 |
|---|---|
| css | text/css |
| js | text/javascript, application/javascript |
| doc | application/msword |
| xls | application/vnd.ms-excel |
| gif | image/gif |
| html | text/html |
| jpeg | image/jpeg |
| jpg | image/jpeg |
| png | image/png |
| svg | image/vnd.svf |
| json | application/json |
| mp3 | audio/mpeg |
| mp4 | audio/mp4, video/mp4 |
| ogg | application/ogg, audio/ogg |
| txt | text/plain |
| zip | aplication/zip |
- 下拉列表
<select></select>
嵌套<option></option>標簽使用橱健，默認顯示第一個option的值而钞，添加size屬性可顯示多個
<select size='2'>
<option value='shanghai'>上海</option>
<option value='beijing'>北京</option>
<option value='hangzhou'>杭州</option>
</select>
- 多行文本輸入
<textarea></textarea>
rows，cols屬性分別表示高拘荡，寬
<textarea cols='30' rows='10'>內(nèi)容</textarea>
- 區(qū)域標簽
<fieldset></fieldset>
將內(nèi)容劃分為一個區(qū)域臼节，legend標簽是他的標題
<fieldset>
<legend>xx表單</legend>
<input type="text">
</fieldset>
- 提交按鈕
<input type='submit' value='提交'>
點擊后會將表單數(shù)據(jù)提交給action指向的地址。提交按鈕的name和value不會提交給服務(wù)器
- 重置按鈕
<input type='reset' value='重置'>
點擊后清空表單內(nèi)容俱病，重置為初始值官疲。重置按鈕的name和value不會提交給服務(wù)器
普通按鈕
<input type='button'>,<button></button>圖片按鈕
<input type='image'>
<input type='image' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515269851725&di=96e2bab5a507a4a19f9fd54c2a1a4f5f&imgtype=0&src=http%3A%2F%2Fimgs.technews.cn%2Fwp-content%2Fuploads%2F2014%2F10%2FBaidu.jpg' alt='圖片按鈕'>
以下是HTML5新增元素
- type=number
<input type='number'>
包含數(shù)值的輸入域，min亮隙，max可控制范圍途凫，value是初始值
<input type='number' value='0' min='0' max='10'>
- type=range
<input type='range'>
包含一定范圍內(nèi)數(shù)字值的輸入域，滑動條溢吻，默認情況下的value范圍是0~100
<input type="range" value="5" min="1" max="10"/>
- type=date维费，type=time
<input type='date'><input type='time'>
日期，時間選擇器控件
<input type="date" value="2018-01-07" />
<input type="time" value="22:52" />
所有時間選擇器類型
| type類型 | 值 |
|---|---|
| date | 年月日 |
| month | 年月 |
| week | 年周 |
| time | 小時分 |
| datetime | 時間促王、日犀盟、月、年（UTC時間） |
| datetime-local | 時間蝇狼、日阅畴、月、年（本地時間） |
- type=color
<input type='color'>
顏色選擇器控件
<input type='color' value="#15d86a">
- type=search
<input type='search'>
搜索域迅耘，顯示為常規(guī)的文本域
- type=email
<input type='email'>
包含 e-mail 地址的輸入域贱枣，提交時會自動驗證格式
- type=url
<input type='url'>
包含 url 地址的輸入域，提交時會自動驗證格式
- datalist
<datalist></datalist>
實現(xiàn)數(shù)據(jù)列表下拉效果颤专，列表是通過 datalist 內(nèi)的 option 元素創(chuàng)建的纽哥。把 datalist 綁定到輸入域，用輸入域的 list 屬性必須與 datalist 的 id相同
列表：<input type="text" list="mydata" placeholder="熱門電影排行" />
<datalist id="mydata">
<option label="Top1" value="讓子彈飛">
<option label="Top2" value="非誠勿擾2">
<option label="Top3" value="大笑江湖">
<option label="Top4" value="趙氏孤兒">
<option label="Top5" value="初戀這件小事">
</datalist>
