資訊專欄INFORMATION COLUMN
摘要：用于或元素時(shí)，將提交指定的表單示例代碼只能上傳圖片只能上傳視頻使用的屬性，是一個(gè)類型的值，或文件后綴名。在以前，要想改變表單元素外觀，需要通過其他標(biāo)簽來模擬。以下點(diǎn)到名的表單元素，還是可以照常使用的。
做為html中最為常見，應(yīng)用最廣泛的標(biāo)簽之一，form常伴隨前端左右。了解更深，用的更順。
表單屬性這個(gè)表單展示了form表單常用的屬性
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| action | 一個(gè)url地址 | 指定表單提交到的地址 |
| method | GET , POST | 表單將以此種方法提交到服務(wù)器 |
| target | * _self 當(dāng)前頁面 * _blank 每次在新窗口打開 * blank 每次在同一個(gè)新窗口打開 * _parent 父級frame * _top 頂級frame * iframename 指定的iframe | 表單提交后，收到回復(fù)的頁面 |
| name | - | 一個(gè)html文檔中，每個(gè)form的name應(yīng)該是唯一的 |
| enctype | * application/x-www-form-urlencoded 默認(rèn)值 * multipart/form-data 上傳file用 * text/plain html5默認(rèn) | 以 POST 方式提交form時(shí)的MIME類型。文件上傳必須使用 multipart/form-data |
| autocomplete | on , off | 是否自動(dòng)完成表單字段 |
| autocapitalize | * none 完全禁用自動(dòng)首字母大寫 * sentences 自動(dòng)對每句話首字母大寫 * words 自動(dòng)對每個(gè)單詞首字母大寫 * characters 自動(dòng)大寫所有的字母 | iOS 專用屬性，表單中文本域英文大小寫 |
| accept-charset | 字符編碼格式( utf-8 , gb-2312 等) | 將會以此種編碼格式提交表單到服務(wù)器，默認(rèn)值是UNKONWN，即html文檔所采用的編碼格式。 |
| novalidate | true , false | 是否啟用表單校驗(yàn) |
下面舉例的表單將會以 post 方式將input的值以 utf-8 編碼格式提交到 /login 接口，并會打開一個(gè)新頁面顯示返回結(jié)果，由于 target="blank" ，所以就算提交多次該表單，都只會繼續(xù)刷新之前打開的窗口。
表單元素
常見的表單元素包括 input , select , textarea , button , progress 等，這些元素都有一些自己的屬性
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| 必須 | ||
| type | * text 單行文本框 * raido 單選框 * checkbox 多選框 * tel 電話號碼輸入框 * range 滑塊取值框 ... ... 更多 | 指定input標(biāo)簽展示的樣式，忽略type屬性將默認(rèn)使用 text |
| name | 字符串 | form提交時(shí)，該字段的key，忽略value屬性的元素將不會被提交 |
| 狀態(tài) | ||
| checked | 任意值 或 忽略該屬性 | 有此屬性的radio和checkbox元素將被選中，同一name多個(gè)元素具有此屬性的，提交時(shí)取最后一個(gè)值 |
| selected | 任意值 或 忽略該屬性 | 有此屬性的option元素將被選中，同一name多個(gè)元素具有此屬性的，提交時(shí)取最后一個(gè)值 |
| readonly | 任意值 或 忽略該屬性 | 具有該屬性的表單元素將不可輸入或改變狀態(tài)，除非用JavaScript操作 |
| disabled | 任意值 或 忽略該屬性 | 除擁有readonly的特征外，表單提交時(shí)，將忽略此字段 |
| 限制 | ||
| form | 表單id | 該元素將作為指定id表單字段被提交。用于 button 或 input type="submit" 元素時(shí)，將提交指定id的表單 示例代碼 |
| accept | * image/* 只能上傳圖片 * video/* 只能上傳視頻 | input type="file" 使用的屬性，是一個(gè)MIME類型的值，或文件后綴名。 示例代碼 |
| multiple | 任意值 或 忽略該屬性 | input type="file" 或 select 或 應(yīng)用了 datalist 的表單元素才能應(yīng)用該屬性示例代碼 |
| maxlength | 正整數(shù)或0 | 文本域可輸入字符的長度，浮點(diǎn)數(shù)將會向下取整，負(fù)數(shù)將被忽略，JavaScript可以繞過這一限制 |
| required | 任意值 或 忽略該屬性 | 該表單字段是否需要被驗(yàn)證 |
| pattern | 一個(gè)正則表達(dá)式 | d{4,6} 形式的正則表達(dá)式，作為required校驗(yàn)規(guī)則 |
| autocomplete | on , off | 同form的autocomplete屬性，在表單元素上應(yīng)用，優(yōu)先級將高于form上指定的 |
| autofocus | 任意值 或 忽略該屬性 | 頁面加載時(shí)，該元素自動(dòng)聚焦，應(yīng)用于多個(gè)表單元素時(shí)，聚焦到第一個(gè) |
| 展示 | ||
| placeholder | 字符串 | 在元素沒有value時(shí)，用于占位顯示 |
| value | 字符串 或 數(shù)值 | input 或 progress 展示的值,其中： * checkbox和radio的默認(rèn)值是 "on" * range和progress的默認(rèn)值是 0 * progress的是0的時(shí)候會播放循環(huán)動(dòng)畫 示例代碼 |
注意：以下示例部分來自 w3.org
form示例
點(diǎn)擊預(yù)覽按鈕，將會把 username1 的值提交到 /preview，
點(diǎn)擊發(fā)布按鈕，將會把 username 的值提交給 /publish
accept示例
multiple示例
datalist 需要鍵入 "," 方可多選(需瀏覽器支持)
select 需要一直按下ctrl鍵才可多選
input 直接框選多文件即可
value示例
常識
下面是對于上面表格的一些總結(jié)，也加入了一些新的知識點(diǎn)
沒有 name 和有 disable 的字段不會被提交
同一個(gè)表單中，相同name的字段值會發(fā)生覆蓋，radio 和 checkbox 除外
在低版本瀏覽器中，name可以作為id使用
忽略或使用瀏覽器不支持的 type 會轉(zhuǎn)為 type=text
低版本瀏覽器不支持動(dòng)態(tài)改變 type
點(diǎn)擊 button 會默認(rèn)提交表單
低版本瀏覽器需要指定 button 的 type=submit 才會提交表單
文本域的光標(biāo)顏色由字體顏色決定
form表單不能互相嵌套
表單元素可以不在表單的html結(jié)構(gòu)內(nèi) 示例代碼
在表單最后一個(gè)input元素中敲回車，會觸發(fā)表單提交
模擬外觀有一千種瀏覽器，就有一千種表單元素外觀。在以前，要想改變表單元素外觀，需要通過其他標(biāo)簽來模擬。
而在現(xiàn)代瀏覽器上，通過css3的appearance屬性( 兼容情況 )指定元素的渲染風(fēng)格，再結(jié)合:after,:before偽元素，可以做出很酷炫的表單元素外觀。
作為可替換元素，input標(biāo)簽無法使用偽元素。當(dāng)然這只是W3標(biāo)準(zhǔn)。以下點(diǎn)到名的表單元素，還是可以照常使用:after,:before的: input type="radio" , input type="checkbox" , input type="file" , input type="range" , button , progress。
appearance是css3的標(biāo)準(zhǔn)屬性，面對現(xiàn)實(shí)，很多時(shí)候還是需要加上-webkit- ，-moz- 前綴，舉一個(gè)把checkbox做成開關(guān)的例子：不出意外，長成這樣 ,
示例代碼來自10個(gè)HTML5美化版復(fù)選框和單選框
參考資料MDN
w3.org
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49890.html
摘要：在表單提交時(shí)，瀏覽器會自動(dòng)進(jìn)行一系列的校驗(yàn)工作，沒有通過校驗(yàn)的表單是無法提交到服務(wù)器的。而方法提交表單，會在請求中發(fā)送表單字段鍵值對。表單提交事件表單提交到服務(wù)器時(shí)，會觸發(fā)事件。 上一篇主要溫習(xí)了一下form表單的屬性和表單元素，這一片主要講解用JavaScript如何操作form。 表單操作 取值 用JavaScript操作表單，免不了會有取值賦值操作，比如有以下表單： ...
摘要：同理，若為，返回的結(jié)果若為或者，且為，返回的結(jié)果。同理，若為或者，且為，返回的結(jié)果是對象轉(zhuǎn)換基本類型的方法?？磦€(gè)例子根據(jù)上述規(guī)則來解析為，上式為第條上式為第條上式為，上式為第條上式為 前不久因?yàn)橐粋€(gè)項(xiàng)目設(shè)計(jì)的問題，煩心了好幾天，為了不留坑擁抱強(qiáng)類型語言特點(diǎn)，還是選擇了===作為數(shù)據(jù)判斷是否相等，對于==今天來探究一下貓膩（弱類型的JavaScript的坑真的太多了，typescript...
摘要：一結(jié)構(gòu)體的聲明與定義結(jié)構(gòu)體的聲明結(jié)構(gòu)是一些值的集合，這些值稱為成員變量。但是結(jié)構(gòu)體變量的變量名并不是指向該結(jié)構(gòu)體的地址，所以要使用取地址運(yùn)算符才能獲取其地址。因此，結(jié)構(gòu)體傳參的時(shí)候，要傳結(jié)構(gòu)體的地址。 ...
閱讀 1668·2019-08-30 15:44
閱讀 2589·2019-08-30 11:19
閱讀 426·2019-08-30 11:06
閱讀 1590·2019-08-29 15:27
閱讀 3103·2019-08-29 13:44
閱讀 1648·2019-08-28 18:28
閱讀 2378·2019-08-28 18:17
閱讀 2035·2019-08-26 10:41
