HTML5新增屬性學習筆記

2021-09-29 01:14:53 字數 4386 閱讀 9905

1、form屬性

表單內的從屬元素,可以寫在表單外部。可以通過指定元素的form屬性來宣告元素所屬表單。form的屬性值為表單的id。

1

<

form

id="testform"

>

2<

input

type

="text"

>

3form

>

4<

textarea

form

="testform"

>

textarea

>

詳細學習內容可參看:html5新增的form屬性簡介

2、formaction屬性

給所有的提交按鈕增加formaction屬性,可以通過不同的按鈕將表單提交到不同的頁面。

1

<

form

id="testform"

action

="serve.jsp"

>

2<

input

type

="submit"

name

="s1"

value

="v1"

formaciton

="s1.jsp"

>

提交到s1

3<

input

type

="submit"

name

="s2"

value

="v2"

formaciton

="s2.jsp"

>

提交到s2

4<

input

type

="submit"

>

5form

>

瀏覽器支援:internet explorer 10, firefox, opera, chrome, 和 safari 支援 formaction 屬性。

3、formmethod屬性

formmethod 屬性定義傳送表單資料到 action url 的 http 方法。

<

form

id="testform"

action

="serve.jsp"

>

<

input

type

="submit"

name

="s1"

value

="v1"

formaciton

="s1.jsp"

formmethod

="post"

>

提交到s1

<

input

type

="submit"

name

="s2"

value

="v2"

formaciton

="s2.jsp"

formmethod

="get"

>

提交到s2

form

>

4、placeholder屬性

用於未輸入文字框顯示輸入提示。

1

<

input

type

="text"

placeholder

="請輸入使用者名稱"

>

5、autofocus屬性

給文字框、選擇框或者按鈕新增autofocus屬性,可在頁面開啟時自動獲得游標焦點。乙個頁面上只能有乙個具有autofocus屬性的控制項。

1

<

input

type

="text"

autoforcus

>

瀏覽器支援:internet explorer 10、firefox、opera、chrome 和 safari 支援 autofocus 屬性。

6、list屬性

為單行文字框特有屬性,配合datalist標籤使用。屬性值為datalist標籤的id。

1 text:<

input

type

="text"

list

="testlist"

>

2<

datalist

id="testlist"

style

="display:none;"

>

3<

option

value

="good morning"

>good morning

option

>

4<

option

value

="hello"

>hello

option

>

5<

option

value

="good afternoon"

>good afternoon

option

>

6datalist

>

瀏覽器支援:internet explorer 10、firefox、opera 和 chrome 支援 list 屬性。

7、autocomplete屬性

規定輸入字段是否應該啟用自動完成功能。自動完成允許瀏覽器**對字段的輸入。當使用者在字段開始鍵入時,瀏覽器基於之前鍵入過的值,應該顯示出在字段中填寫的選項。

text:<

input

type

="text"

name

="textinput"

list

="testlist"

placeholder

="輸入一句英文問候語"

autocomplete

="on"

>

<

datalist

id="testlist"

style

="display:none;"

>

<

option

value

="good morning"

>good morning

option

>

<

option

value

="hello"

>hello

option

>

<

option

value

="good afternoon"

>good afternoon

option

>

datalist

>

詳細學習內容可參看:html5 autocomplete屬性、表單自動完成

8、input的新增type屬性種類

描述

url定義用於輸入 url 的字段。

time

定義用於輸入時間的控制項(不帶時區)。

search

定義用於輸入搜尋字串的文字字段。

number

定義用於輸入數字的字段。

email

定義用於 e-mail 位址的字段。

date

定義 date 控制項(包括年、月、日,不包括時間)。

datetime

定義 date 和 time 控制項(包括年、月、日、時、分、秒、幾分之一秒,基於 utc 時區)。

datetime-local

定義 date 和 time 控制項(包括年、月、日、時、分、秒、幾分之一秒,不帶時區)。

month

定義 month 和 year 控制項(不帶時區)。

week

定義 week 和 year 控制項(不帶時區)。

range

定義用於精確值不重要的輸入數字的控制項(比如 slider 控制項)。

tel定義用於輸入**號碼的字段。

color

定義拾色器。

詳細學習內容可參看:html type 屬性

更多專業前端知識,請上

【猿2048】www.mk2048.com

HTML5新增屬性

html5的input標籤新增了很多屬性,也是讓大家非常興奮的一件事,用簡單的乙個屬性搞定以前複雜的js驗證。input新增的這些屬性,使得html和js的分工更明確了,使用起來十分舒暢。size medium 新增屬性一 size autoconmplete autoconmplete可以賦值為 ...

HTML5新增的屬性列表

序號 屬性型別 新增屬性 屬性說明與表 單的相關 屬性對 type text 與 指定autofocus屬性 以指定屬性的方式讓元素在頁面開啟時自動獲取焦點 對 type text 與 指定placeholder屬性 對使用者輸入進行提示,提示使用者可以輸入的內容 對與指定 form屬性 宣告屬於哪...

HTML5新增屬性詳細講解

新增的input type屬性值 1.email,使用方法 輸入郵箱格式 2.tel,使用方法 輸入手機號碼格式 3.urll,使用方法 輸入url格式 4.numberl,使用方法 輸入數字格式 5.search,使用方法 搜尋框 體現語義化 6。range,使用方法 自由拖動滑塊 7.time,...