天天看點
傳回

HTML5表單_表單屬性

HTML5新的表單屬性

本章講解涉及 和 元素的新屬性。

新的 form 屬性：

  • autocomplete
  • novalidate

新的 input 屬性：

  • autocomplete
  • autofocus
  • form
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
  • height 和 width
  • list
  • min, max 和 step
  • multiple
  • pattern (regexp)
  • placeholder
  • required

autocomplete屬性

autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。

注釋：autocomplete 适用于 标簽，以及以下類型的 标簽：text, search, url, telephone, email, password, datepickers, range 以及 color。

<!DOCTYPE HTML>
<html>
<body>

<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get" autocomplete="on">

First name: <input type="text" name="fname" /><br />
Last name:  <input type="text" name="lname" /><br />
E-mail:     <input type="email" name="email" autocomplete="off" /><br />
            <input type="submit" />

</form>

<p>請填寫并送出此表單，然後重載頁面，來檢視自動完成功能是如何工作的。</p>
<p>請注意，表單的自動完成功能是打開的，而 e-mail 域是關閉的。</p>

</body>
</html>

autofocus屬性

autofocus 屬性規定在頁面加載時，域自動地獲得焦點。

<!DOCTYPE HTML>
<html>
<body>

<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get">

User name:  <input type="text" name="user_name" autofocus="autofocus" />
            <input type="submit" />

</form>

</body>
</html>

form屬性

form 屬性适用于所有 标簽的類型。

form屬性必須引用所屬表單的 id，如需引用一個以上的表單，請使用空格分隔的清單。

<!DOCTYPE HTML>
<html>
<body>

<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get" id="user_form">

First name: <input type="text" name="fname" />
            <input type="submit" />

</form>

<p>下面的輸入域在 form 元素之外，但仍然是表單的一部分。</p>

Last name: <input type="text" name="lname" form="user_form" />

</body>
</html>

表單重寫屬性

表單重寫屬性有：

  • formaction - 重寫表單的 action 屬性
  • formenctype - 重寫表單的 enctype 屬性
  • formmethod - 重寫表單的 method 屬性
  • formnovalidate - 重寫表單的 novalidate 屬性
  • formtarget - 重寫表單的 target 屬性

注釋：表單重寫屬性适用于以下類型的 标簽：submit 和 image。

<!DOCTYPE HTML>
<html>
<body>

<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get" id="user_form">

E-mail: <input type="email" name="userid" /><br />
        <input type="submit" value="Submit" /><br />
        <input type="submit" formaction="http://www.w3school.com.cn/example/html5/demo_admin.asp" value="Submit as admin" /><br />
        <input type="submit" formnovalidate="true" value="Submit without validation" /><br />

</form>

</body>
</html>

注釋：這些屬性對于建立不同的送出按鈕很有幫助。

height和width屬性

height 和 width 屬性隻适用于 image 類型的 标簽。

<!DOCTYPE HTML>
<html>
<body>

<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get">

User name:  <input type="text" name="user_name" /><br />
            <input type="image" src="http://www.w3school.com.cn
/i/eg_submit.jpg" width="99" height="99" />

</form>

</body>
</html>

list屬性

list 屬性規定輸入域的 datalist。datalist 是輸入域的選項清單。

注釋：list 屬性适用于以下類型的 标簽：text, search, url, telephone, email, date pickers, number, range 以及 color。

  • 為一個url框綁定一個可選清單 
<!DOCTYPE HTML>
<html>
<body>

<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get">

Webpage:    <input type="url" list="url_list" name="link" />
            <datalist id="url_list">
                <option label="W3School" value="http://www.w3school.com.cn" />
                <option label="Google" value="http://www.google.com" />
                <option label="Microsoft" value="http://www.microsoft.com" />
            </datalist>
            <input type="submit" />

</form>

</body>
</html>

multiple屬性

multiple 屬性規定輸入域中可選擇多個值。

注釋：multiple 屬性适用于以下類型的 标簽：email 和 file。

  • 讓使用者一次可選擇多個檔案 
<!DOCTYPE HTML>
<html>
<body>

<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get">

Select images:  <input type="file" name="img" multiple="multiple" />
                <input type="submit" />

</form>

<p>當您浏覽檔案時，請試着選擇多個檔案。</p>

</body>
</html>

novalidate屬性

novalidate 屬性規定在送出表單時不應該驗證 form 或 input 域。

注釋：novalidate 屬性适用于 以及以下類型的 标簽：text, search, url, telephone, email, password, date pickers, range 以及 color.

  • 允許使用者輸入一個非法的email的位址 
<!DOCTYPE HTML>
<html>
<body>

<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get" novalidate="novalidate">

E-mail: <input type="email" name="user_email" />
        <input type="submit" />

</form>

</body>
</html>

pattern屬性

模式（pattern） 是正規表達式，規定用于驗證 input 域的模式。

注釋：pattern 屬性适用于以下類型的 标簽：text, search, url, telephone, email 以及 password。

  • 限定一個文本框隻能輸入3個字母 
<!DOCTYPE HTML>
<html>
<body>

<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get">

Country code:   <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
                <input type="submit" />

</form>

</body>
</html>

placeholder屬性

placeholder屬性提供一種提示（hint），描述輸入域所期待的值。提示會在輸入域為空時顯示出現，會在輸入域獲得焦點時消失：

注釋：placeholder 屬性适用于以下類型的 标簽：text, search, url, telephone, email 以及 password。

  • 在搜尋框中提示使用者輸入的内容 
<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">

    <input type="search" name="user_search" placeholder="Search W3School" />
    <input type="submit" />

</form>

</body>
</html>

required屬性

required 屬性規定必須在送出之前填寫輸入域 不能為空。

注釋：required 屬性适用于以下類型的 标簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

  • 限定使用者在一個輸入框中必須輸入内容 
<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">

Name:   <input type="text" name="usr_name" required="required" />
        <input type="submit" />

</form>

</body>
</html>

更多請參考：W3School

html autofocus formaction Multiple novalidate pattern
上一篇: php中autofocus,HTML5中的autofocus（自動聚焦）屬性介紹
下一篇: 1、進入鵝，不要直接點首頁的展示進入播放，要在搜尋欄搜“肖戰夢中的那片海”打開新界面播放2、播放量很重要，沒事就一直放着

繼續閱讀