HTML新的表單屬性LOGIN

HTML新的表單屬性

HTML新的表單屬性

HTML5 的<form> 和<input>標籤新增了幾個新屬性.

<form>新屬性:

autocomplete

novalidate

<input>新屬性:

autocomplete

autofocus

form

# formaction

formenctype

formmethod

formnovalidate

formtarget

##height and width

# #min and max

multiple

pattern (regexp)

#placeholder

required

step

#<form> / <input> autocomplete 屬性

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

當使用者在自動完成網域中開始輸入時,瀏覽器應該會在該網域中顯示填寫的選項。

提示: autocomplete 屬性有可能在 form元素中是開啟的,而在input元素中是關閉的。

注意: autocomplete 適用於 <form> 標籤,以及以下類型的 <input> 標籤:text, search, url, telephone, email, password, datepickers, range 以及 color。

<form> novalidate 屬性

novalidate 屬性的一個boolean 屬性.

novalidate 屬性規定在提交表單時不應該驗證form 或input 網域。

<input> autofocus 屬性

autofocus 屬性是一個boolean 屬性.

#autofocus 屬性規定在頁面載入時,域自動地獲得焦點。

<input> form 屬性

#form 屬性規定輸入網域所屬的一個或多個表單。

提示:如需引用一個以上的表單,請使用空格分隔的清單。

<input> formaction 屬性

#The formaction 屬性用於描述表單提交的URL位址.

#The formaction屬性會覆寫<form> 元素中的action屬性.

#注意: The formaction 屬性用於type="submit" 和type="image".

<input> formenctype 屬性

formenctype 屬性描述了表單提交到伺服器的資料編碼(只對form表單中method="post" 表單)

formenctype 屬性覆寫form 元素的enctype 屬性。

主要: 該屬性與 type="submit" 和 type="image" 配合使用。

<input> formmethod 屬性

#formmethod 屬性定義了表單提交的方式。

formmethod 屬性覆寫了 <form> 元素的的method 屬性。

注意: 該屬性可以與 type="submit" 和 type="image" 配合使用。

<input> formnovalidate 屬性

novalidate 屬性是一個boolean 屬性.

novalidate屬性描述了<input> ; 元素在表單提交時無需被驗證。

formnovalidate 屬性會覆寫 <form> 元素的novalidate屬性.

注意: formnovalidate 屬性與type="submit一起使用

<input> formtarget 屬性

#formtarget 屬性指定一個名稱或關鍵字來指明表單提交資料接收後的展示。

The formtarget 屬性覆寫<form>元素的target屬性.

注意: formtarget 屬性與type="submit" 和type="image"配合使用.

<input> height 和width 屬性

#height 和width 屬性規定用於image 類型的<input> 標籤的圖片高度和寬度。

注意: height 和 width 屬性只適用於 image 類型的<input> 標籤。

提示:圖像通常會同時指定高度和寬度屬性。如果圖像設定高度和寬度,圖像所需的空間 在載入頁時會被保留。如果沒有這些屬性, 瀏覽器不知道圖像的大小,並不能預留 適當的空間。圖片在載入過程中會使頁面佈局效果改變 (儘管圖片已載入)。

<input> list 屬性

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

<input> min 和max 屬性

#min、max 和step 屬性用於為包含數字或日期的input 類型規定限定(約束)。

注意: min、max 和 step 屬性適用於下列類型的 <input> 標籤:date pickers、number 以及 range。

<input> multiple 屬性

multiple 屬性是一個boolean 屬性.

multiple 屬性規定<input> 元素中可選擇多個值。

注意: multiple 屬性適用於下列類型的 <input> 標籤:email 和 file。 : email, and file.

<input> pattern 屬性

pattern 屬性描述了一個正規表示式用於驗證<input> ; 元素的值。

注意:pattern 屬性適用於以下類型的<input> 標籤: text, search, url, tel, email, 和password.

提示: 是用來全域 title 屬性描述了模式.

<input> placeholder 屬性

placeholder 屬性提供一個提示(hint),描述輸入域所預期的值。

簡短的提示在使用者輸入值前會顯示在輸入域上。

注意: placeholder 屬性適用於下列類型的 <input> 標籤:text, search, url, telephone, email 以及 password。

<input> required 屬性

required 屬性是一個boolean 屬性.

required 屬性規定必須在提交之前填寫輸入域(不能為空)。

注意:required 屬性適用於以下類型的 <input> 標籤:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<input> step 屬性

#step 屬性為輸入域規定合法的數字間隔。

如果step="3",則合法的數是-3,0,3,6 等

提示: step 屬性可以與max 和min 屬性建立一個區域值.

注意: step 屬性與以下type類型一起使用: number, range, date, datetime, datetime-local, month, time 和week.


#在下面的案例中,我們對一些常用的屬性做了解釋,大家直接看程式碼和程式碼旁邊的註釋,然後對照瀏覽器的運行結果就理解其意義了

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> </head>

<body>
<!--
placeholder:用于在文本框未输入时提示作用
autofocus:用于控件自动获取焦点
-->
<input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true">
<input type="button" name="" value="搜索">
<!--
novalidate:在控件中加入了required、emial、url等验证后,如果想让这些验证失效,可以在表单中将novalidate设置为tyue
-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
<br/><br/>
    <!--
required:必填
autocomplete:在网页的文本框中输入部分内容或者双节时,经常会看到在下面显示输入过的内容,
这就是html5的新特性:自动完成,如果不想使用此功能,将其设置为off即可
-->
    <input type="text" name="UserName" value="" required autocomplete="off">
   <br/><br/>
    <!--
multiple:在选择文件时,默认只能单选,加上这个属性后,则可以使用鼠标选中多个文件进行上传
   -->
    选择文件
    <input type="file" name="upload" value="" multiple="multiple">
    <br/><br/>
    <!--
list:这个属性要和datalist元素一起使用,指定此文本框的可选择项,另外其相较于select的优点在于还可以输入
   -->
    区号:
    <input type="text" name="age" value="" list="list1">
    <br/><br/>
    <datalist id="list1">
        <option value="0312">保定</option>
        <option value="0311">石家庄</option>
        <option value="010">北京</option>
        <option value="0313">唐山</option>
    </datalist>
<br/><br/>
    <!--
formaction:可以更改点击此按钮式提交到服务器的处理程序
formmethod:可以更改向服务器提交数据的方式
   -->
    <input type="submit" name="subsave" value="提交"><br/><br/>
    <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>
</html>


下一節
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> </head> <body> <!-- placeholder:用于在文本框未输入时提示作用 autofocus:用于控件自动获取焦点 --> <input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true"> <input type="button" name="" value="搜索"> <!-- novalidate:在控件中加入了required、emial、url等验证后,如果想让这些验证失效,可以在表单中将novalidate设置为tyue --> <form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true"> <br/><br/> <!-- required:必填 autocomplete:在网页的文本框中输入部分内容或者双节时,经常会看到在下面显示输入过的内容, 这就是html5的新特性:自动完成,如果不想使用此功能,将其设置为off即可 --> <input type="text" name="UserName" value="" required autocomplete="off"> <br/><br/> <!-- multiple:在选择文件时,默认只能单选,加上这个属性后,则可以使用鼠标选中多个文件进行上传 --> 选择文件 <input type="file" name="upload" value="" multiple="multiple"> <br/><br/> <!-- list:这个属性要和datalist元素一起使用,指定此文本框的可选择项,另外其相较于select的优点在于还可以输入 --> 区号: <input type="text" name="age" value="" list="list1"> <br/><br/> <datalist id="list1"> <option value="0312">保定</option> <option value="0311">石家庄</option> <option value="010">北京</option> <option value="0313">唐山</option> </datalist> <br/><br/> <!-- formaction:可以更改点击此按钮式提交到服务器的处理程序 formmethod:可以更改向服务器提交数据的方式 --> <input type="submit" name="subsave" value="提交"><br/><br/> <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get"> </form> </body> </html>
章節課件