HTML5新增表單元素和表單屬性

  • 新表單元素
    <datalist> 選項列表。與 input 元素配合使用，定義 input 可能的值
    <keygen> 用于表單的密鑰對生成器字段
    <output> 不同類型的輸出，比如腳本的輸出。
  1. <datalist>
    Safari和IE9以下不支持<datalist>,
    <datalist>規(guī)定了輸入域的選項內(nèi)容 ，與input元素配合使用，定義input輸入域的選項內(nèi)容。
<form action="" method="">
<input list="browsers"><!-- 通過使用input里面的一個屬性list，跟datalist的id相聯(lián)系-->
<datalist id="browsers">
  <option value = "Internet Explorer">
  <option value = "Firefox">
  <option value = "Chrome">
  <option value = "Safari">
  <option value = "Opero">
</datalist>
</form>
  1. <keygen>
    IE完全不支持
    作用：提供一種驗證用戶的可靠方法
    用于表單的密鑰對生成器字段,當(dāng)提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
    私鑰（private key）存儲于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后驗證用戶的客戶端證書（client certificate）。
<form action="" method="get">
  用戶名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>
  1. <output>
    IE完全不支持
    用于不同類型的輸出，比如計算或腳本輸出：
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>
  • 新表單屬性
  1. <form>新屬性：
  • autocomplete 自動完成
    當(dāng)用戶在自動完成域中開始輸入時，瀏覽器應(yīng)該在該域中顯示填寫的選項。
    autocomplete 適用于 <form> 標(biāo)簽，以及以下類型的 <input> 標(biāo)簽：text, search, url, telephone, email, password, datepickers, range 以及 color。
    注：Opero不支持
<form action="" method="" autocomplete="on">
    FirstName:<input type="text" name="fname"><br>
    LastName:<input type="text" name="lname"><br>
    E-mail:<input type="email" name="email" autocomplete="off"><br>
    <input type="submit" name="">
</form>
image.png
  • novalidate不驗證數(shù)據(jù)
    在提交表單時，不驗證 form 或 input 里的東西。
    如，在一般情況下，input的類型是email，會有驗證：
    image.png

    如果設(shè)置novalidate
<form action="" method="" novalidate="novalidate">
    E-mail:<input type="email" name="email">
    <input type="submit" name="">
</form>
如果設(shè)置了novalidate，可以不驗證，直接提交了

注：Safari不支持

  1. <input>新屬性：
  • autocomplete 自動完成
  • autofocus 自動獲得焦點
FirstName:<input type = "text" name = "fname" autofocus/>
在頁面加載時，自動地獲得焦點。
  • form 所屬哪個form 表單
    一般表單外的input字段使用form屬性，來表示此input是哪個表單的一部分：
    注意：IE不支持
<form action="" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>

<p> "Last name" 字段沒有在form表單之內(nèi)，但它也是form表單的一部分。當(dāng)表當(dāng)提交的時候會一起提交</p>

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

<p><b>注意:</b> IE不支持form屬性</p>
  • formaction 用于描述表單提交的URL地址，會覆蓋<form> 元素中的action屬性.
    用于input的type="submit" 和 type="image"的元素
    以下表單包含了兩個不同地址的提交按鈕：
<form action="demo-form.php"> 
 First name: <input type="text" name="fname"><br> 
 Last name: <input type="text" name="lname"><br> 
 <input type="submit" value="Submit"><br> 
 <input type="submit" formaction="demo-admin.php" 
  value="Submit as admin"> 
</form>
  • formenctype 表單提交到服務(wù)器的數(shù)據(jù)編碼 (只對form表單中 method="post" 表單)
    會覆蓋 form 元素的 enctype 屬性。
    注意: 該屬性與input的type="submit" 和 type="image" 配合使用。
    如：
<form action="demo-post_enctype.php" method="post"> 
 First name: <input type="text" name="fname"><br> 
 <input type="submit" value="Submit"> 
 <input type="submit" formenctype="multipart/form-data" 
  value="Submit as Multipart/form-data"> 
</form>

第一個提交按鈕已默認編碼發(fā)送表單數(shù)據(jù)，第二個提交按鈕以 "multipart/form-data" 編碼格式發(fā)送表單數(shù)據(jù)

  • formmethod 表單提交方式，會覆蓋 <form> 的method 屬性。
    注意: 該屬性可以與 type="submit" 和 type="image" 配合使用。
    如：重新定義表單提交方式:
<form action="demo-form.php" method="get"> 
 First name: <input type="text" name="fname"><br> 
 Last name: <input type="text" name="lname"><br> 
 <input type="submit" value="Submit"> 
 <input type="submit" formmethod="post" formaction="demo-post.php" 
  value="Submit using POST"> 
</form>
  • formnovalidate 表單提交無需被驗證，會覆蓋 <form> 元素的novalidate屬性.
    注意: formnovalidate 屬性與type="submit"一起使用
<form action=""> 
 E-mail: <input type="email" name="userid"><br> 
 <input type="submit" value="Submit"><br> 
 <input type="submit" formnovalidate value="Submit without validation"> <!-- 提交的時候不驗證 -->
</form>
  • formtarget 表單提交數(shù)據(jù)接收后，怎么的展示。
    會覆蓋 <form>元素的target屬性.
    注意: formtarget 屬性與type="submit" 和 type="image"配合使用.
<form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="正常提交">
  <input type="submit" formtarget="_blank" value="提交到一個新的頁面上">
</form>
  • <input> height 和 width 屬性， 僅用于<input> 標(biāo)簽type="image"的圖像高度和寬度
    注意: height 和 width 屬性只適用于 image 類型的<input> 標(biāo)簽。
    提示:圖像通常會同時指定高度和寬度屬性。如果圖像設(shè)置高度和寬度，圖像所需的空間 在加載頁時會被保留。如果沒有這些屬性， 瀏覽器不知道圖像的大小，并不能預(yù)留 適當(dāng)?shù)目臻g。圖片在加載過程中會使頁面布局效果改變 （盡管圖片已加載）。
<form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="image" src="/statics/images/submit.gif"  alt="Submit" width="48" height="48">
</form>
  • list 表示input輸入域的 datalist（datalist 是輸入域的選項列表）
<input list="browsers"> 

<datalist id="browsers"> 
  <option value="Internet Explorer"> 
  <option value="Firefox"> 
  <option value="Chrome"> 
  <option value="Opera"> 
  <option value="Safari"> 
</datalist>
  • **min max step ** 用來給input 類型為數(shù)字或日期的添加限定約束的，最大最下值；
    注意: min、max 和 step 屬性適用于以下類型的 <input> 標(biāo)簽：date pickers、number 以及 range。
<!--Enter a date before 1980-01-01: -->
<input type="date" name="bday" max="1979-12-31"> 

<!--Enter a date after 2000-01-01: -->
<input type="date" name="bday" min="2000-01-02"> 

<!--Quantity (between 1 and 5): -->
<input type="number" name="quantity" min="1" max="5">
  • multiple 多種多樣表示<input> 元素中可選擇多個值。
    注意: multiple 屬性適用于以下類型的<input> 標(biāo)簽type="email" 和 type="file"
<form action="/statics/demosource/demo-form.php">
  選擇圖片: <input type="file" name="img" multiple>
  <input type="submit">
</form>

<p>嘗試選取一張或者多種圖片。</p>
  • pattern 正則表達式用于驗證<input> 元素的值。
    注意:pattern 屬性適用于以下類型的<input> 標(biāo)簽: text, search, url, tel, email, 和 password.
<!--一個只能包含三個字母的文本域（不含數(shù)字及特殊字符）：-->
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  • placeholder 占位提供一種提示（hint），描述輸入域所期待的值。
    注意: placeholder 屬性適用于以下類型的<input> 標(biāo)簽：text, search, url, telephone, email 以及 password。
<input type="text" name="fname" placeholder="First name">
  • required 被要求的，必須的， 規(guī)定必須在提交之前填寫輸入域（不能為空）。
    注意:required 屬性適用于以下類型的<input> 標(biāo)簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
<!--不能為空的input字段:-->
Username: <input type="text" name="usrname" required>
  • step 步伐、一步、步長，規(guī)定輸入域合法的數(shù)字間隔
    提示： step 屬性可以與 max 和 min 屬性創(chuàng)建一個區(qū)域值.
    注意: step 屬性與以下type類型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
<input type="number" name="points" step="3">
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • HTML5 新的表單元素 HTML5 有以下新的表單元素: < datalist> 注意:不是所有的瀏覽器都支持H...
    鹿守心畔光閱讀 668評論 0贊 2
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的，因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,983評論 0贊 0
  • html5新增了許多表單屬性。這里主要分為 屬性和 屬性，當(dāng)然還有關(guān)于checkbox的和label標(biāo)簽的屬性我們...
    便U_Life閱讀 2,193評論 0贊 8
  • 1、HTML5 新的表單屬性 HTML5 的 和 標(biāo)簽添加了幾個新屬性. 新屬性：autocompleten...
    maskerII閱讀 355評論 0贊 0
  • HTML5 新的表單屬性HTML5的 和 標(biāo)簽添加了幾個新的屬性<from>新屬性：1.autocomplete2...
    龍飝閱讀 641評論 0贊 1

友情鏈接更多精彩內(nèi)容