H5表單相關筆記整理

2021-09-01 23:45:42 字數 2073 閱讀 1636

input的type屬性新增的值

① 概述

email 用於應該包含「e-mail"位址的輸入框

url 用於應該包含「url"位址的輸入框

search 用於應該「搜尋內容"的輸入框

number 用於應該包含「數值"的輸入控制項

tel 規定顯示的型別為「**號碼"的輸入框

range 規定顯示的型別為「數值選擇範圍"選擇控制項

color規定顯示的型別為「顏色"選擇控制項

日期相關

date規定顯示的型別為「日期"選擇控制項

month規定顯示的型別為「月份"選擇控制項

week規定顯示的型別為「周"選擇控制項

time規定顯示的型別為「時間"選擇控制項

datetime規定顯示的型別為「日期時間"選擇控制項

datetime-local規定顯示的型別為「本地日期時間"選擇控制項

由於在制定html5標準時,無論移動端的web瀏覽還是移動端的應用都已經開始逐漸的成為一種新的主流瀏覽方式了,所以以上這些屬性大多在移動端有比在pc端更好的表現。

input上新增的屬性

① required

required 要求input的值為必填

1、 placeholder能用於text,password,eamil,url,number,search等型別

2. placeholder不能用於range,color,date等非文字框型別

② pattern

pattern 用於驗證 input輸入值是否合法

③ form

規定輸入域所屬的表單,適用於所有 input標籤的型別

④ width & height

height 和 width 、規定用於 image 型別的 input 標籤的影象高度和寬度

⑤ 重寫屬性

formaction - 重寫表單的 action 屬性

formmethod - 重寫表單的 method 屬性

formtarget - 重寫表單的 target 屬性

還能重寫enctype與novalidate等

form上新增的屬性

① autocomplete

規定是否啟用表單的自動完成功能,其值如下:

on //開啟自動完成功能【預設為on,開啟狀態】

off //關閉自動完成功能

② novalidate

如果使用該屬性,則提交表單時不進行html5自帶的驗證。

表單新增標籤

① datalist 標籤

datalist規定輸入域的選項列表,類似於select標籤.

注意:datalist的一定要有id屬性,並且此屬性還必須要和某乙個文字域input的list屬性值一樣才能渲染出來。

② output 標籤

output 元素用於不同型別的輸出,比如計算或指令碼輸出

注意:就現在的瀏覽器支援程度而言,如果我們要獲取input的實時改變,我們需要通過oninput屬性獲取。oninput屬性既可以寫在form表單上也可以寫在input的輸入域上。

h5實用標籤

1.mark標籤

該標籤是乙個「行內元素」,它的作用是像乙隻螢光筆一樣突出你標記的文字。

2.meter標籤

該標籤是乙個「行內塊級元素」,它是用於度量屬性「value」的值的乙個標籤

meter標籤具有以下屬性值:

max規定度量的最大值

min規定度量的最小值

value 當前值

high規定高範圍的度量值(大於該值)

low規定低範圍的度量值(小於該值)

optimum規定最佳的度量值

progress標籤

該標籤是乙個「行內塊級元素」,它是乙個用於顯示「進度資訊」的標籤。

progress標籤具有以下屬性值:

max規定總進度量的值

value規定當前進度量的值

audio標籤

H5表單屬性

form formaction formmethod placeholder autofocus list autocomplete list 指定文字框提供建議值的datalist元素,其值為datalist元素的id值。maxlength 設定文字框最大字元長度。pattern 用於輸入印證的正...

H5新增表單

新增表單型別如下 屬性值說明type email 限制使用者輸入必須為email型別 type url 限制使用者輸入必須為url型別 type date 限制使用者輸入必須為日期型別 type time 限制使用者輸入必須為時間型別 type month 限制使用者輸入必須為月型別 type we...

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

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