,,

【WEB開發】HTML5新增input輸入框控件type屬性number、tel、email、date、time、color、url、week、month等介紹

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2025年5月12日 12:31 本文熱度 7847

瀏覽器支持

所有主流瀏覽器都支持 type 屬性。但是，并非所有主流瀏覽器都支持所有不同的 input 類型都能在所有主流瀏覽器中工作。

請看下面關于每種輸入類型的瀏覽器支持。

定義和用法

type 屬性規定要顯示的 <input> 元素的類型。

默認類型是：text。

提示：該屬性不是必需的，但是我們認為您應該始終使用它。

HTML 4.01 與 HTML5之間的差異

HTML5引入了多種新的輸入類型,讓表單變得更加智能和易用。想象一下,這些新的輸入類型就像是給你的表單增加了一些智能助手,它們能自動幫用戶完成一些任務。

以下 input 類型是 HTML5 中的新類型：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。

語法

<input type="value">?

屬性值

值	描述
button	定義可點擊的按鈕（通常與 JavaScript 一起使用來啟動腳本）。
checkbox	定義復選框。
colorNew	提供一個顏色選擇器。定義拾色器。
dateNew	提供一個日期選擇器，用戶可以方便地選擇日期。定義 date 控件（包括年、月、日，不包括時間）。注意有個大坑！如果需要顯示預置日期，必須嚴格使用此格式“2025-01-01”，而不能是“2025-1-1”或“2025/1/1”，否則會當成空值處理。
datetimeNew	定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，基于 UTC 時區）。
datetime-localNew	定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區）。
emailNew	用于輸入電子郵件地址，瀏覽器會自動驗證輸入是否符合電子郵件格式。定義用于 e-mail 地址的字段。
file	定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳。
hidden	定義隱藏輸入字段。
image	定義圖像作為提交按鈕。
monthNew	定義 month 和 year 控件（不帶時區）。
numberNew	用于輸入數字，通常會提供上下箭頭來調整數值。定義用于輸入數字的字段。
password	定義密碼字段（字段中的字符會被遮蔽）。
radio	定義單選按鈕。
rangeNew	提供一個滑動條，用于選擇一個范圍內的數值。定義用于精確值不重要的輸入數字的控件（比如 slider 控件）。
reset	定義重置按鈕（重置所有的表單值為默認值）。
searchNew	定義用于輸入搜索字符串的文本字段。
submit	定義提交按鈕。
telNew	用于輸入電話號碼。定義用于輸入電話號碼的字段。
text	默認，定義一個單行的文本字段（默認寬度為 20 個字符）。
timeNew	定義用于輸入時間的控件（不帶時區）。
urlNew	定義用于輸入 URL 的字段。
weekNew	定義 week 和 year 控件（不帶時區）。

input 的 type 類型：

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

示例：

<form>
  <label for="email">郵箱:</label>
  <input type="email" id="email" name="email">


  <label for="birthday">生日:</label>
  <input type="date" id="birthday" name="birthday">


  <label for="age">年齡:</label>
  <input type="number" id="age" name="age" min="0" max="120">
</form>

表單驗證

HTML5提供了內置的表單驗證功能,這就像是給你的表單配備了一個自動檢查員,幫你確保用戶輸入的數據是正確的。

一些常用的驗證屬性包括：

required: 指定一個輸入字段是必需的。

pattern: 使用正則表達式定義輸入模式。

min 和 max: 指定數字或日期的范圍。

minlength 和 maxlength: 指定文本長度的范圍。

示例：

<form>
  <label for="username">用戶名:</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="20">


  <label for="postcode">郵政編碼:</label>
  <input type="text" id="postcode" name="postcode" pattern="[0-9]{6}">


  <input type="submit" value="提交">
</form>

新的表單元素和屬性

HTML5還引入了一些新的表單元素和屬性,讓表單更加靈活和強大。

新的表單元素：

<datalist>: 與<input>元素配合使用,提供一個可選的預定義選項列表。

<output>: 用于顯示計算或用戶操作的結果。

新的屬性：

autocomplete: 控制瀏覽器的自動完成功能。

autofocus: 頁面加載時自動獲得焦點。

placeholder: 提供輸入字段的提示信息。

示例：

<form>
  <label for="browser">選擇你喜歡的瀏覽器:</label>
  <input list="browsers" id="browser" name="browser">
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
  </datalist>


  <label for="search">搜索:</label>
  <input type="search" id="search" name="search" placeholder="輸入搜索關鍵詞" autocomplete="off">


  <input type="submit" value="提交">
</form>