html5中新增的表單控件和屬性有哪些

小編給大家分享一下html5中新增的表單控件和屬性有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式．被認為是互聯網的核心技術之一。

HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然技術人員在開發過程中可能不會將這些新技術投入應用，但是對于該種技術的新特性，網站開發技術人員是必須要有所了解的。

新的輸入性表單控件：

• email：電子郵箱文本框,跟普通的沒什么區別

• - 當輸入不是郵箱的時候,驗證不通過

• - 移動端的鍵盤會發生變化

• tel：電話號碼

• url：網頁的URL

• search：搜索引擎

• - chrome下輸入文字后，會多出一個關閉的X

• range：特定范圍內的數值選擇器

• - min、max、step(步數)

• - 例子： 用js來顯示當前數值

• number：只能包含數字的輸入框

• - 輸入框末尾有兩個箭頭 上為加 下為減

• color：顏色選擇器

• - 點擊顯示顏色版

• datetime：顯示完整日期

• - 類似select選擇樣式

• datetime-local：顯示完整日期， 不包含時區

• time：顯示時間，不含時區

• date：顯示日期{年月日}

• week：顯示周{年月日周}

• mouth：顯示月{年月}

<form>
  <input type="email" />
  <input type="tel" />
  <input type="url" />
  <input type="search" />
  <!--一個滑塊加一根長條 min最小表示數 max最大表示數 step 劃一格跳幾個數字-->
  <input type="range" min="1" max="10"  step="2"/>  <!---->  <input type="number" />  <input type="color" />
  <input type="submit" />
</form>

新的表單特性和函數

• placeholder：輸入框提示信息

• - 例子：微博的密碼框提示

• autocomplete

• - 默認為on，關閉提示選擇off

• autofocus：指定表單獲取輸入焦點

• list和datalist：為輸入框構造一個選擇列表

• - list值為datalist標簽的id

• required：此選項必填， 不能為空

• Pattern：正則驗證

• - pattern=“\d{1,5}”

• Formaction在submit里定義提交地址

<input type="text"
  placeholder="請輸入4-16個字符" // 輸入框內顯示
  autocomplete="off" // 是否記錄輸入的值
  autofocus // 聚焦
  required // 輸入框不能為空
  pattern="\d{1,5}" // 必須輸入1到5個數字
 />
//  required 和 pattern 具有安全隱患 如果在控制臺修改input的pattern和required 那么就可以破除校驗

// 如果用戶在某個頁面輸入相當多的數據，臨時有事需要離開一段時間，此時數據應該保存至草稿箱，那么同一個form表單下，將會有兩個不同地址的sumbit提交 ope瀏覽器已支持 其余瀏覽器可能不支持
<form action="https://www.baidu.com">
  <input type="text">
  <input type="submit" value="提交" />
  <input type="submit" value="保存至草稿箱" formaction="http://www.miaov.com"/>
</form>

以上是“html5中新增的表單控件和屬性有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！