H5 新增表單屬性和事件

2022-06-27 14:12:12 字數 4311 閱讀 3390

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

="password"

name

="userpwd"

>

<

br><

br>

<

input

type

="email"

>

<

br><

br>

<

input

type

="tel"

>

<

br><

br>

**:<

input

type

="url"

>

<

br><

br>

數量:<

input

type

="number"

value

="60"

max="100"

min="0"

>

<

br><

br>

請輸入商品名稱:

<

input

type

="search"

>

<

br><

br>

範圍:<

input

type

="range"

max="100"

min="0"

value

="5"

>

<

br><

br>

顏色:<

input

type

="color"

>

<

br><

br>

<

input

type

="time"

>

<

br><

br>

日期:<

input

type

="date"

>

<

br><

br>

<

input

type

="datetime"

><

br><

br>

<

input

type

="datetime-local"

>

<

br><

br>

月份:<

input

type

="month"

>

<

br><

br>

星期:<

input

type

="week"

>

<

input

type

="submit"

>

<

form

action

=""id

="myform"

><

br><

br>

使用者名稱:

<

input

type

="text"

name

="username"

placeholder

="請輸入使用者名稱"

autofocus autocomplete

="on"

>

<

br><

br>

手機號:

<

input

type

="tel"

name

="userphone"

required pattern

="^(\+86)?1\d$"

>

<

br><

br>

檔案:<

input

type

="file"

name

="photo"

multiple

>

<

br><

br>

<

input

type

="email"

name

="email"

multiple

><

br><

br>

<

input

type

="submit"

>

<

br><

br>

form

>

<

input

type

="text"

name

="address"

form

="myform"

>

form

>

body

>

html

>

h5新新增的事件

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>title

title

>

head

>

<

body

>

<

form

action

="">

使用者名稱:

<

input

type

="text"

name

="username"

id="username"

><

br>

<

input

type

="tel"

name

="userphone"

id="userphone"

pattern

="^1\d$"

>

<

br>

<

input

type

="submit"

>

form

>

<

script

>

/*1.oninput:監聽當前指定元素內容的改變:只要內容改變(新增內容,刪除內容),就會觸發這個事件

*/document.getelementbyid(

"username

").oninput

=function

()

/*onkeyup:鍵盤彈起的時候觸發:每乙個鍵的彈起都會觸發一次

*/document.getelementbyid(

"username

").onkeyup

=function

()

/*oninvalid:當驗證不通過時觸發

*/document.getelementbyid(

"userphone

").oninvalid

=function

()script

>

body

>

html

>

H5新增表單屬性

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

H5新增input表單 表單屬性

新增表單 屬性值說明 type email 郵箱格式 type url url型別 type date 日期格式 type time 時間格式 type month 月type week 周type number 數字type tel 手機號type seach 搜尋框type color 顏色選擇...

H5新增input表單 表單屬性

新增表單 表單屬性 required required,必填,內容不能為空 placeholder 提示文字 佔位符 更改提示文字顏色 input placeholder autofocus autofocus,自動聚焦到指定表單 multiple multiple,可以多選檔案提交 多用於上傳檔案...