H5新增form控制項和表單屬性

2022-06-03 22:24:08 字數 1672 閱讀 8956

第乙個知識點:表單的屬性及總結

第二個知識點:h5新增的表單控制項和屬性以及總結

第乙個知識點:

我們常見的表單驗證有哪些呢

text  文字框標籤

password 密碼框

checkbox 多選框

radio  單選框

button  按鈕

submit  提交按鈕

以上是我們常用的一些form屬性

第二個知識點:h5新的輸入型控制項

(一)email:電子郵箱文字框,跟普通的沒什麼區別

1.當輸入不是郵箱的時候,驗證不通過

2.移動端鍵盤會有變化

(二)tel:**號碼

1.主要在移動端,乙個鍵盤的切換

(三)url:網頁的url

輸入正確的**

(四)sear:搜尋引擎

1.chrome下輸入文字後,會多出乙個關閉的x

(五)range:特定範圍內的數值選擇器

1.min、max、step(步數)

2.例子:用js來顯示當前數值

(六)number:只能包含數字的輸入框

(七)color:顏色選擇器

(八)detetime顯示完整日期

(九)autocomplete:是否儲存使用者輸入值

默人為on,關閉提示選擇off

(十):指定表單獲取輸入焦點

(十一):此項必填,不能為空

如果只寫第乙個輸入框,第二個輸入框就會彈出「請填寫此欄位」

(十二)parrern:正則驗證 pattrn="\d"

我設定的正則是1-5數字,如果不是就提交失敗

以上是本人的總結,後期如有更新會繼續完善,感謝每位朋友的到訪,希望此文章能對你學習h5有所幫。

希望本篇文章 能給正在學習 前端的朋友 或 以及工作的朋友 帶來收穫 不喜勿噴 如有建議 多多提議 謝謝!!!

H5新增表單屬性

一 form屬性 14 最後乙個input並不屬於form表單元素,在提交表單是,input不會隨著表單一起提交,但是在html5中我們只需要在input屬性中增加form屬性,並制定form的id,外部的input就屬於表單的提交範圍.二 formaction屬性 1 可以將表單元素提交到不同的頁...

h5新增表單控制項及其相關屬性

email 電子郵箱文字框,跟普通的沒什麼區別當輸入不是郵箱的時候,驗證通不過移動端的鍵盤會有變化 tel 號碼 url 網頁的url search 搜尋引擎 chrome下輸入文字後,會多出乙個關閉的x range 特定範圍內的數值選擇器 min 最小值 max 最大值 step 步數 例子 用j...

H5 新增表單屬性和事件

doctype html html lang en head meta charset utf 8 title title title head body form action 使用者名稱 input type text name username br br 密碼 input type pass...