瀏覽器支持

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

請(qǐng)看下面關(guān)于每種輸入類(lèi)型的瀏覽器支持。

定義和用法

type 屬性規(guī)定要顯示的 <input> 元素的類(lèi)型。

默認(rèn)類(lèi)型是：text。

提示：該屬性不是必需的，但是我們認(rèn)為您應(yīng)該始終使用它。

HTML 4.01 與 HTML5之間的差異

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

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

語(yǔ)法

<input type="value">?

屬性值

input 的 type 類(lèi)型：

<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>

表單驗(yàn)證

HTML5提供了內(nèi)置的表單驗(yàn)證功能,這就像是給你的表單配備了一個(gè)自動(dòng)檢查員,幫你確保用戶(hù)輸入的數(shù)據(jù)是正確的。

一些常用的驗(yàn)證屬性包括：

required: 指定一個(gè)輸入字段是必需的。

pattern: 使用正則表達(dá)式定義輸入模式。

min 和 max: 指定數(shù)字或日期的范圍。

minlength 和 maxlength: 指定文本長(zhǎng)度的范圍。

示例：

<form>
  <label for="username">用戶(hù)名:</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還引入了一些新的表單元素和屬性,讓表單更加靈活和強(qiáng)大。

新的表單元素：

<datalist>: 與<input>元素配合使用,提供一個(gè)可選的預(yù)定義選項(xiàng)列表。

<output>: 用于顯示計(jì)算或用戶(hù)操作的結(jié)果。

新的屬性：

autocomplete: 控制瀏覽器的自動(dòng)完成功能。

autofocus: 頁(yè)面加載時(shí)自動(dòng)獲得焦點(diǎn)。

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="輸入搜索關(guān)鍵詞" autocomplete="off">


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

這些新特性大大增強(qiáng)了HTML表單的功能,使得創(chuàng)建用戶(hù)友好的表單變得更加容易。它們不僅提高了用戶(hù)體驗(yàn),也減少了開(kāi)發(fā)者需要編寫(xiě)的JavaScript代碼量。

一些效果截圖：

?