溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“HTML5新的輸入類型有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“HTML5新的輸入類型有哪些”文章能幫助大家解決問題。
HTML 5擁有多個新的形成表單輸入側類型這些新特性提供了更好的輸入側控制狀語從句：驗證。
本章全面介紹這些新的輸入類型：電子郵件，網址，數量，范圍，日期選擇器（日，月，周，時間，日期時間，本地日期時間），搜索，顏色
輸入類型-電子郵件
電子郵件類型為應該包含電子郵件地址的輸入域。在提交表單時，會自動驗證電子郵件域的值。實例：
電子郵件：<input type =“ email” name =“ user_email” />
復制代碼
提示：iPhone中的Safari瀏覽器支持電子郵件輸入類型，并通過更改觸摸屏鍵盤來配合它（添加@和.com選項）。
輸入類型
-url url類型為應該包含URL地址的輸入域。在提交表單時，會自動驗證url域的值。實例：
主頁：<input type =“ url” name =“ user_url” />
復制代碼
提示：iPhone中的Safari瀏覽器支持url輸入類型，并通過更改觸摸屏鍵盤來配合它（添加.com選項）。
輸入類型-數字
number類型為應該包含數值的輸入域。接受的數字的限定：實例：
點數：<input type =“ number” name =“ points” min =“ 1” max =“ 10” />
復制代碼
我們通常使用下面的屬性來規定對數字類型的限定：
屬性 值 描述
最大限度 數字 規定允許的利率
分 數字 規定允許的預設
步 數字 規定合法的數字間隔（如果step =“ 3”，則合法的數是-3,0,3,6等）
價值 數字 規定預設值
讓我們試一下帶有所有限定屬性的例子：大家親自試一試吧，代碼如下：
<！DOCTYPE HTML>
<html>
<身體>
<form action =“ / example / HTML 5 / demo_form.asp” method =“ get”>
<input type =“ number” name =“ points” min =“ 0” max =“ 10” step =“ 3” value =“ 6” />
<input type =“ submit” />
</ form>
</ body>
</ html>
復制代碼
提示：iPhone中的Safari瀏覽器支持數字輸入類型，并通過更改觸摸屏鍵盤來配合它（顯示數字）。
輸入類型-范圍
范圍類型為應該包含一定范圍內數字值的輸入域。條。您還能夠設定對所接受的數字的限定。實例：
<input type =“ range” name =“ points” min =“ 1” max =“ 10” />
復制代碼
我們通常使用下面的屬性來規定對數字類型的限定：
屬性 值 描述
最大限度 數字 規定允許的利率
分 數字 規定允許的預設
步 數字 規定合法的數字間隔（如果step =“ 3”，則合法的數是-3,0,3,6等）
價值 數字 規定預設值
輸入類型-日期選擇器（數據檢出器）
HTML 5擁有多個可選選擇日期和時間的新輸入類型：日期-選取日，月，年月-選取月，年周-選取周和年時間-選取時間（小時和分鐘）的datetime -選取時間，日，月，年（UTC時間）日期時間本地-選取時間，日，月，年（本地時間）
下面的例子允許您從日歷中選取一個日期：實例：
日期：<input type =“ date” name =“ user_date” />
復制代碼
輸入輸入類型“月”：
月：<input type =“ month” name =“ user_date” />
復制代碼
輸入輸入類型“周”：
周：<input type =“ week” name =“ user_date” />
復制代碼
輸入輸入類型“時間”：
時間：<input type =“ time” name =“ user_date” />
復制代碼
輸入輸入類型“日期時間”：
日期和時間：<input type =“ datetime” name =“ user_date” />
復制代碼
輸入輸入類型“ datetime-local”：
日期和時間：<input type =“ datetime-local” name =“ user_date” />
復制代碼
輸入類型-搜索
搜索類型為搜索域，某些站點搜索或Google搜索。search域顯示為常規的文本域。
關于“HTML5新的輸入類型有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
