【html5】html5學習筆記2--表單

html5 新增輸入類型

html5新增了 email、number、Date pickers (date, month, week, time, datetime, datetime-local)

、url、search、color、range輸入類型

1 <form action="" method="post" accept-charset="utf-8">
2  搜索<input type="search" name="" value=""><br>
3  色盤 <input type="color" name="" value=""><br>
4  url <input type="url" name="" value=""><br>
5  郵箱 <input type="email" name="" value=""><br>
6  日期 <input type="date" name="" value=""><br>
7  滑動 <input type="range" name="" value="1"  min='1' max ='10' placeholder=""><br>
8  <input type="submit" name="" value="提交" placeholder="">
9 </form>

在瀏覽器中的效果

 

 

html5新增表單元素

datalist keygen output

keygen output目前只有opear支持

 

datalist 元素規定輸入域的選項列表。

列表是經過 datalist 內的 option 元素建立的。

如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：

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>　　

html5新增表單屬性

新的 form 屬性：

• autocomplete
• novalidate (不驗證表單元素)

新的 input 屬性：

• autocomplete(當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項)
• autofocus(屬性規定在頁面加載時，域自動地得到焦點。)
• form 適用於全部的input類型 當form標籤訂義了id屬性  input標籤只要指定form屬性等於id的值 就沒必要包含在form標籤內 佈局更加靈活

• <form action="" method="post"  id="myform">
   name<input type="text" name="" value=""><br>
   passwd <input type="passwd" name="" value="1"  min='1' max ='10' placeholder=""><br>
   <input type="submit" name="" value="提交" placeholder="">
  </form>
  <input type="password" name="" value="" placeholder="" form="myform">

   

• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height 和 width
• list
• min, max 和 step ( range 和number 類型的表單元素的屬性 min 最小，max 最大值 step 表示步長)
• multiple( 文件能夠多個上傳)
• pattern (regexp)( 使用正則表達式對錶達驗證)
• placeholder (爲空的時候提示的文字)
• required(必填的值 )