国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

form表單那點事兒(上) 基礎篇

Forest10 / 670人閱讀

摘要：用于或元素時，將提交指定的表單示例代碼只能上傳圖片只能上傳視頻使用的屬性，是一個類型的值，或文件后綴名。在以前，要想改變表單元素外觀，需要通過其他標簽來模擬。以下點到名的表單元素，還是可以照常使用的。

做為html中最為常見，應用最廣泛的標簽之一，form常伴隨前端左右。了解更深，用的更順。

表單屬性

這個表單展示了form表單常用的屬性

屬性名 屬性值 描述
action 一個url地址 指定表單提交到的地址
method GET , POST 表單將以此種方法提交到服務器
target * _self 當前頁面 * _blank 每次在新窗口打開 * blank 每次在同一個新窗口打開 * _parent 父級frame * _top 頂級frame * iframename 指定的iframe 表單提交后，收到回復的頁面
name - 一個html文檔中，每個form的name應該是唯一的
enctype * application/x-www-form-urlencoded 默認值 * multipart/form-data 上傳file用 * text/plain html5默認 以 POST 方式提交form時的MIME類型。文件上傳必須使用 multipart/form-data
autocomplete on , off 是否自動完成表單字段
autocapitalize * none 完全禁用自動首字母大寫 * sentences 自動對每句話首字母大寫 * words 自動對每個單詞首字母大寫 * characters 自動大寫所有的字母 iOS 專用屬性，表單中文本域英文大小寫
accept-charset 字符編碼格式( utf-8 , gb-2312 等) 將會以此種編碼格式提交表單到服務器，默認值是UNKONWN，即html文檔所采用的編碼格式。
novalidate true , false 是否啟用表單校驗

下面舉例的表單將會以 post 方式將input的值以 utf-8 編碼格式提交到 /login 接口，并會打開一個新頁面顯示返回結果，由于 target="blank" ，所以就算提交多次該表單，都只會繼續刷新之前打開的窗口。
表單元素

常見的表單元素包括 input , select , textarea , button , progress 等，這些元素都有一些自己的屬性

屬性名 屬性值 描述
必須
type * text 單行文本框 * raido 單選框 * checkbox 多選框 * tel 電話號碼輸入框 * range 滑塊取值框 ... ... 更多 指定input標簽展示的樣式，忽略type屬性將默認使用 text
name 字符串 form提交時，該字段的key，忽略value屬性的元素將不會被提交
狀態
checked 任意值 或 忽略該屬性 有此屬性的radio和checkbox元素將被選中，同一name多個元素具有此屬性的，提交時取最后一個值
selected 任意值 或 忽略該屬性 有此屬性的option元素將被選中，同一name多個元素具有此屬性的，提交時取最后一個值
readonly 任意值 或 忽略該屬性 具有該屬性的表單元素將不可輸入或改變狀態，除非用JavaScript操作
disabled 任意值 或 忽略該屬性 除擁有readonly的特征外，表單提交時，將忽略此字段
限制
form 表單id 該元素將作為指定id表單字段被提交。用于 button 或 input type="submit" 元素時，將提交指定id的表單 示例代碼
accept * image/* 只能上傳圖片 * video/* 只能上傳視頻 input type="file" 使用的屬性，是一個MIME類型的值，或文件后綴名。 示例代碼
multiple 任意值 或 忽略該屬性 input type="file" 或 select 或 應用了 datalist 的表單元素才能應用該屬性示例代碼
maxlength 正整數或0 文本域可輸入字符的長度，浮點數將會向下取整，負數將被忽略，JavaScript可以繞過這一限制
required 任意值 或 忽略該屬性 該表單字段是否需要被驗證
pattern 一個正則表達式 d{4,6} 形式的正則表達式，作為required校驗規則
autocomplete on , off 同form的autocomplete屬性，在表單元素上應用，優先級將高于form上指定的
autofocus 任意值 或 忽略該屬性 頁面加載時，該元素自動聚焦，應用于多個表單元素時，聚焦到第一個
展示
placeholder 字符串 在元素沒有value時，用于占位顯示
value 字符串 或 數值 input 或 progress 展示的值,其中： * checkbox和radio的默認值是 "on" * range和progress的默認值是 0 * progress的是0的時候會播放循環動畫 示例代碼

注意：以下示例部分來自 w3.org


form示例

點擊預覽按鈕，將會把 username1 的值提交到 /preview，
點擊發布按鈕，將會把 username 的值提交給 /publish


accept示例


multiple示例

datalist 需要鍵入 "," 方可多選(需瀏覽器支持)

select 需要一直按下ctrl鍵才可多選

input 直接框選多文件即可


value示例

常識

下面是對于上面表格的一些總結，也加入了一些新的知識點

沒有 name 和有 disable 的字段不會被提交

同一個表單中，相同name的字段值會發生覆蓋，radio 和 checkbox 除外

在低版本瀏覽器中，name可以作為id使用

忽略或使用瀏覽器不支持的 type 會轉為 type=text

低版本瀏覽器不支持動態改變 type

點擊 button 會默認提交表單

低版本瀏覽器需要指定 button 的 type=submit 才會提交表單

文本域的光標顏色由字體顏色決定

form表單不能互相嵌套

表單元素可以不在表單的html結構內 示例代碼

在表單最后一個input元素中敲回車，會觸發表單提交

模擬外觀

有一千種瀏覽器，就有一千種表單元素外觀。在以前，要想改變表單元素外觀，需要通過其他標簽來模擬。
而在現代瀏覽器上，通過css3的appearance屬性( 兼容情況 )指定元素的渲染風格，再結合:after,:before偽元素，可以做出很酷炫的表單元素外觀。

作為可替換元素，input標簽無法使用偽元素。當然這只是W3標準。以下點到名的表單元素，還是可以照常使用:after,:before的: input type="radio" , input type="checkbox" , input type="file" , input type="range" , button , progress。

appearance是css3的標準屬性，面對現實，很多時候還是需要加上-webkit- ，-moz- 前綴，舉一個把checkbox做成開關的例子：不出意外，長成這樣 ,

示例代碼來自10個HTML5美化版復選框和單選框

參考資料

MDN

w3.org

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49890.html

相關文章

  • form表單那點事兒(下) 進階篇

    摘要：在表單提交時，瀏覽器會自動進行一系列的校驗工作，沒有通過校驗的表單是無法提交到服務器的。而方法提交表單，會在請求中發送表單字段鍵值對。表單提交事件表單提交到服務器時，會觸發事件。 上一篇主要溫習了一下form表單的屬性和表單元素，這一片主要講解用JavaScript如何操作form。 表單操作 取值 用JavaScript操作表單，免不了會有取值賦值操作，比如有以下表單： ...

    jerryloveemily 評論0 收藏0

  • Javascripit類型轉換比較那點事兒，雙等號（==）

    摘要：同理，若為，返回的結果若為或者，且為，返回的結果。同理，若為或者，且為，返回的結果是對象轉換基本類型的方法。看個例子根據上述規則來解析為，上式為第條上式為第條上式為，上式為第條上式為 前不久因為一個項目設計的問題，煩心了好幾天，為了不留坑擁抱強類型語言特點，還是選擇了===作為數據判斷是否相等，對于==今天來探究一下貓膩（弱類型的JavaScript的坑真的太多了，typescript...

    Steve_Wang_ 評論0 收藏0

  • 【C語言】玩轉結構體——結構體的那點事兒！

    摘要：一結構體的聲明與定義結構體的聲明結構是一些值的集合，這些值稱為成員變量。但是結構體變量的變量名并不是指向該結構體的地址，所以要使用取地址運算符才能獲取其地址。因此，結構體傳參的時候，要傳結構體的地址。 ...

    jeffrey_up 評論0 收藏0

發表評論

0條評論

Forest10

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<