【譯】原生表單組件

時間  2019-11-08
標籤 原生 表單 組件 欄目 HTML 简体版
原文   原文鏈接

HTML表單是由組件構成的，這些組件是各類瀏覽器都支持的內置控件。本文中咱們將深刻探討它們、瞭解它們的做用、學習如何讓各類瀏覽器更好地支持它們。web

雖然這裏咱們只探討內建表單組件，但因爲HTML表單有諸多限制、以及不一樣瀏覽器間的實現有不少的不一樣，故web開發者有時也得構建自定義的表單組件。這部份內容將會在[怎樣建立定製表單組件]()一文中詳細討論。正則表達式

文本輸入框

文本輸入框是最基本的表單組件，它便於用戶輸入各類數據。然而一些文本框也能夠專門用來實現一些特定需求。segmentfault

值得注意的是，HTML文本框只是個純文本輸入控件。這就意味着你不能用它來進行富文本編輯（如加粗、斜體等）。所謂的富文本編輯器其實都是自定義的組件。瀏覽器

全部文本框都共享一些公共行爲：服務器

  • 它們能夠被標記爲只讀（用戶不可修改輸入的值）或者禁用（輸入的值不會隨着表單的其餘部分一塊兒提交）。編輯器

  • 它們可擁有一個佔位符；這是一小段在文本輸入框內的、用於簡明描述文本框做用的文本。ide

  • 它們都受size（輸入框的物理尺寸）和length（文本框能輸入的最大字符數）的約束。學習

  • 它們能夠有拼寫檢查，若是瀏覽器支持的話。

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<input>.readonly 1.0 1.0 (1.7 or earlier) 6 1.0 1.0
<input>.disabled 1.0 1.0 (1.7 or earlier) 6 1.0 1.0
<input>.placeholder 10.0 Unknown (4.0) 10 11.10 4.0
<textarea>.placeholder 10.0 Unknown (4.0) 10 11.50 5.0
<input>.size 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
<input>.maxlength 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
<input>.spellcheck 10.0 Unknown (3.6) 10 11.0 4.0
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<input>.readonly (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)
<input>.disabled (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)
<input>.placeholder 2.3 4.0 (4.0) ? 11.10 4
<textarea>.placeholder ? 4.0 (4.0) ? 11.50 4
<input>.size (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)
<input>.maxlength (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)
<input>.spellcheck ? 4.0 (4.0) ? 11.0 ?

單行文本框

單行文本框是用type屬性值爲text的<input>元素建立的（若未提供type屬性值，text也是個默認屬性）。此外，若是你指定給type屬性的值不被瀏覽器支持，也會使用text做爲回退值。

<input type="text">

單行文本框只有一個約束：若你輸入的文本中有換行，瀏覽器會在發送數據前將這個換行給移除。

可是，咱們也能夠給單行文本框「按需」添加一些約束。這得用到pattern屬性；該屬性會告訴瀏覽器根據你選擇的一個正則表達式來驗證值的有效性。

<input type="text" pattern="^cherry|banana$">

HTML5添加了幾個type屬性的值來加強基本的單行文本框。雖然這些值仍會把<input>元素呈現爲一個單行文本框，但實際上它們還給文本框添加了幾個額外的約束和特性。

E-mail輸入框

該類型的輸入框設置了type值爲email：

<input type="email" multiple>

它給輸入框添加了這樣的驗證約束：用戶須要輸入一個有效的e-mail地址；其餘任何輸入都會致使輸入框報錯。而經過設置multiple屬性，這種輸入框也可讓用戶輸入多個e-mail地址。

密碼輸入框

該類型的輸入框設置了type值爲password：

<input type="password">

它並未給輸入文本添加任何特殊的約束，只是把輸入框的裏值作了隱藏以防止被讀取。

注：注意這只是個用戶界面的特性；瀏覽器仍是會發送純文本，除非你用Javascript給文本進行編碼。

搜索框

該類型的輸入框設置了type值爲search：

<input type="search" autosave>

文本框和搜索框的主要區別在於外觀和體驗上（一般，搜索框會以圓角呈現）。但其實搜索框還增長了一個特性：輸入的值可被自動保存，以實如今同一站點的不一樣頁面中給出自動補全。

電話號碼輸入框

該類型的輸入框設置了type值爲tel：

<input type="tel">

因爲世界上有多種電話號碼制式，因此此類型的的文本框不會給用戶輸入的值強制使用任何約束，主要是一個語義上的區別而已。雖然在某些設備上（尤爲是手機）點擊該輸入框，會出現一個不一樣的虛擬鍵盤。

URL輸入框

該類型的輸入框設置了type值爲url：

<input type="url">

爲確保只輸入有效的URL，它爲輸入框添加了些特殊的驗證約束；若輸入的值不是個符合格式的URL，表單將會呈現錯誤狀態。

注：URL符合格式並不意味着它指向確切存在的地址。

有特殊約束並處於錯誤狀態的輸入框會阻止表單提交；此外，爲讓錯誤提示更明顯，也能夠爲它們加些樣式，咱們將在[表單數據驗證]()一文中詳細討論這點。

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<input>.type="text" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
<input>.type="email" 10.0 Unknown (4.0) 10 10.62 ?
<input>.type="password" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
<input>.type="search" 5.0 Unknown (4.0) 10 11.01 5.0
<input>.type="tel" 5.0 Unknown (4.0) 10 11.01 5.0
<input>.type="url" 10.0 Unknown (4.0) 10 10.62 ?
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<input>.type="text" (Yes) 4.0 (4.0) (Yes) (Yes) 1.0
<input>.type="email" Not supported 4.0 (4.0) Not supported (Yes) ?
<input>.type="password" ? 4.0 (4.0) ? ? ?
<input>.type="search" Not supported 4.0 (4.0) ? (Yes) 4.0
<input>.type="tel" 2.3 4.0 (4.0) ? (Yes) 3.1
<input>.type="url" Not supported 4.0 (4.0) ? (Yes) 3.1

多行文本框

多行文本框使用了<textarea>元素而非<input>元素。

<textarea cols="20" rows="10"></textarea>

多行文本框與普通的單行文本框間的主要不一樣在於，用戶能夠輸入帶有顯式換行（即支持回車[CR]和換行[LF]字符）的文本。

值得注意的是，使用CSS屬性resize，用戶能夠直接改變多行文本框大小，若是你想讓他們這麼作的話。

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<textarea> (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<textarea> (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)

下拉組件

下拉組件能讓用戶很方便地從衆多選項中做選擇。HTML有兩種下拉組件：選擇框和自動補全組件。這二者的交互方式是同樣的，一旦控件被激活，瀏覽器會展現一列表的值讓用戶從中選擇，這個值列表會覆蓋在頁面內容之上。

選擇框

選擇框是經過<select>元素建立的，並使用一或多個<option>元素做爲其子元素，每一個<option>都指定了一個可能的值。

<select>
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>

如有須要，選擇框的默認值可經過爲相應的<option>元素設置selected屬性進行指定。爲了給值建立分組，<option>元素亦可嵌套於<optgroup>元素中：

<select>
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potatoe</option>
  </optgroup>
</select>

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<select> 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
<option> 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
<optgroup> 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<select> 1.0 4.0 (4.0) (Yes) (Yes) (Yes)
<option> 1.0 4.0 (4.0) (Yes) (Yes) (Yes)
<optgroup> 1.0 4.0 (4.0) (Yes) (Yes) (Yes)

多選下拉框

默認的，選擇框只容許用戶選擇一個值。要讓用戶能選擇多個值，可經過給<select>元素添加multiple屬性實現。但此時，選擇框就再也不呈現爲一個下拉組件了，反而呈現爲一個普通的列表框。

<select multiple>
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>

注：全部支持<select>元素的瀏覽器也都支持它的multiple屬性。

自動補全組件

經過使用<datalist>元素，你能夠給表單組件提供說明、自動補全的值，並經過子元素<option>來指定要呈現的值。設置好後，這份數據列表就能綁定到其餘使用了list屬性的組件上了。

一旦數據列表附加到一個表單組件上，它的選項就能被用於自動補全用戶輸入的文本；典型的狀況是，選項被呈現爲一個帶有可能匹配的值的下拉框。

<label for="myFruit">What's your favorite fruit?</label>
<input type="text" id="myFruit" list="mySuggestion" />
<datalist id="mySuggestion">
  <option>Apple</option>
  <option>Banana</option>
  <option>Blackberry</option>
  <option>Blueberry</option>
  <option>Lemon</option>
  <option>Lychee</option>
  <option>Peach</option>
  <option>Pear</option>
</datalist>

注：根據HTML規範，list屬性和<datalist>元素可被用於任何須要用戶輸入的組件上。然而，其並未清楚指明如何在非文本控件上使用，同時不一樣瀏覽器的實現也是各有不一樣。因此，要在非文本控件使用該特性得多加當心。

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<datalist> 20.0 Unknown (4.0) 10 9.6 Not supported
<input>.list 20.0 Unknown (4.0) 10 9.6 Not supported
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<datalist> Not supported 4.0 (4.0) Not supported (Yes) Not supported
<input>.list Not supported 4.0 (4.0) Not supported (Yes) Not supported

可勾選組件

可勾選組件指的是能夠經過點擊改變其狀態的組件。有兩種可勾選組件：複選框和單選框，它們均可以經過checked屬性來指示該組件是否默認被勾選。

值得注意的是，這些組件的行爲和其餘表單組件不太同樣。對大多數表單組件而言，表單提交後全部具備name屬性的組件都會被提交，即便它們沒有獲值。但對於可勾選組件，它們的值卻只有在它們被勾選以後纔會提交，若是沒有勾選，則不會提交東西，包括其name屬性。

複選框

複選框由設置了type值爲checkbox的<input>元素建立：

<input type="checkbox" checked>

上面的HTML建立的複選框是默認勾選的。

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<input>.type="checkbox" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<input>.type="checkbox" 1.0 1.0 (1.0) (Yes) (Yes) (Yes)

單選框

單選框由設置了type值爲radio的<input>元素建立：

<input type="radio" checked>

幾個單選框能夠被綁定在一塊兒，只要它們使用相同的name屬性值，它們就被視爲同一組選框。而在同一組中，只有一個選框能被勾選；這意味着其中一個勾選以後，其餘全部選框會自動不勾選。

到了表單提交時，也只有被勾選的值會被提交；若是沒有勾選，整組單選框會被認爲處於未知狀態且不會隨表單提交。

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<input>.type="radio" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<input>.type="radio" 1.0 1.0 (1.0) (Yes) (Yes) (Yes)

按鈕

HTML表單中，有三種按鈕：

提交按鈕
用於發送表單數據給服務器。
重置按鈕
用於重置全部表單組件爲默認值。
匿名按鈕
這種按鈕不自帶特效，但也能夠經過Javascript代碼進行自定義。

按鈕能夠由<button>元素或<input>元素建立。type屬性的值會指定將呈現何種按鈕。

提交按鈕

<button type="submit">
    This a <br><strong>submit button</strong>
</button>
<input type="submit" value="This is a submit button">

重置按鈕

<button type="reset">
    This a <br><strong>reset button</strong>
</button>
<input type="reset" value="This is a reset button">

匿名按鈕

<button type="button">
    This a <br><strong>anonymous button</strong>
</button>
<input type="button" value="This is a anonymous button">

一般使用<button>或<input>建立的按鈕行爲都是同樣的。然而也存在幾點不一樣：

  • 就如先前的例子所示，<button>元素容許你使用HTML內容做爲其標記內容，但<input>元素只接受純文本內容。

  • 使用<button>元素是，能夠採用和按鈕中內容不同的值。（但在IE8如下的瀏覽器中這是不可行的）

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<input>.type="number" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
<input>.type="reset" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
<input>.type="button" 1.0 1.0 (1.7 or earlier) 3 1.0 1.0
<button> 1.0 1.0 (1.7 or earlier) (Yes)(Buggy before IE8) (Yes) (Yes)
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<input>.type="number" 1.0 1.0 (1.0) (Yes) (Yes) (Yes)
<input>.type="reset" 1.0 1.0 (1.0) (Yes) (Yes) (Yes)
<input>.type="button" 1.0 1.0 (1.0) (Yes) (Yes) (Yes)
<button> 1.0 1.0 (1.0) (Yes) (Yes) (Yes)

高級表單組件

這一系列的組件能讓用戶輸入一些複雜或高度結構化的數據，包括精確或近似數字、日期和時間、顏色。

數字

數字組件是經過type設置爲number的<input>元素建立的。該控件看起來像文本框，但卻只容許輸入浮點數，並且一般還會帶有幾個按鈕來增長或減小組件的值。

咱們能夠經過設置min和max屬性來約束該組件的值。也能夠經過step屬性來指定該組件的增長和減小按鈕的改變量。

<input type="number" min="1" max="10" step="2">

上述代碼建立了一個取值被限制在1到10之間的數字組件，其增長和減小按鈕的改變量爲2。

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<input>.type="number" 11.0 Not supported 10(recognized but no UI) (Yes) 5.2
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<input>.type="number" 2.3 Not supported Not supported (Yes) 4.0

滑塊

另外一種選取數字的方法是使用滑塊。因爲操做滑塊看起來不及文本框輸入數字精確，因此滑塊經常使用於選取對值的要求不是很精確的數字。

滑塊組件是經過type設置爲range的<input>元素建立的。適當配置滑塊是很重要的，強烈推薦你設置其min, max, step屬性。

<input type="range" min="1" max="5" step="1">

示例中建立了一個取值被限制在1到5之間的滑塊組件，其增長和減小按鈕的改變量分別爲+1和-1。

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<input>.type="range" 5.0 23.0 10 10.62 4.0
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<input>.type="range" Not supported 23.0 Not supported 10.62 5.0

日期和時間選擇器

收集日期和時間的值在以前每每是web開發者的噩夢。如今HTML5經過引入一個特殊的控件用於處理這類特定的數據，帶來了一些新改進。

日期和時間控件是經過type設置爲特定值的<input>元素建立的。由於你可能但願能收集日期、時間或者二者兼有，因此它提供了幾個不一樣的type屬性值：

date

建立展現和選取日期、但不含具體時間的組件。

<input type="date">

datetime

建立展現和選取日期、並帶有UTC時區時間的組件。

<input type="datetime">

datetime-local

建立展現和選取日期、並帶有任何指定時區時間的組件。

<input type="datetime-local">

month

建立展現和選取月份、並帶有年份的組件。

<input type="month">

time

建立展現和選取一個時間值的組件。

<input type="time">

week

建立展現和選取週數、並帶其年份的組件。

<input type="week">

全部的日期與時間控件均可以使用max和min屬性進行約束：

<label for="myDate">When are you available this summer?</label>
<input type="date" min="2013-06-01" max="2013-08-31" id="myDate">

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<input>.type="date" Not supported Not supported Not supported 10.62 (Yes)
<input>.type="datetime" Not supported Not supported Not supported 10.62 (Yes)
<input>.type="datetime-local" Not supported Not supported Not supported 10.62 (Yes)
<input>.type="month" Not supported Not supported Not supported 10.62 (Yes)
<input>.type="time" Not supported Not supported Not supported 10.62 (Yes)
<input>.type="week" Not supported Not supported Not supported 10.62 (Yes)
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<input>.type="date" Not supported Not supported Not supported 10.62 5.0
<input>.type="datetime" Not supported Not supported Not supported 10.62 (Yes)
<input>.type="datetime-local" Not supported Not supported Not supported 10.62 (Yes)
<input>.type="month" Not supported Not supported Not supported 10.62 (Yes)
<input>.type="time" Not supported Not supported Not supported 10.62 (Yes)
<input>.type="week" Not supported Not supported Not supported 10.62 (Yes)

警告：日期和時間組件都是很新的組件，甚至那些聲稱支持它們的瀏覽器也常有重大的用戶界面問題，這讓這些組件很難被使用。因此在發佈你的內容以前，請先完全地在不一樣的瀏覽器上測試一遍！

顏色選擇器

一般顏色都有點難於處理，由於有許多種方式來表示它們：RGB值（十進制或十六進制）、HSL值、關鍵字等等。而顏色選擇器能方便用戶以文本或圖形的形式選擇顏色。

顏色組件是經過type設置爲color的<input>元素建立的。

<input type="color">

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<input>.type="color" 21.0 Not supported Not supported 11.01 Not supported
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<input>.type="color" Not supported Not supported Not supported ? Not supported

其餘組件

還有一些組件難以被歸類，由於它們擁有一些很是特殊的行爲；但其實它們也是頗有用的。

文件選擇器

HTML表單能夠向服務器發送文件，關於這點，在[發送表單數據]()一文中有詳細的討論。文件選擇器組件是讓用戶選擇一或多個文件進行發送的一種方式。

文件選擇器組件是經過type設置爲file的<input>元素建立的。被接收的文件類型可經過使用accept屬性進行指定；此外，若你想讓用戶選擇不止一個文件，能夠添加multiple屬性。

在下面的例子中，咱們建立了一個接收圖像圖形文件的文件選擇器，它也容許用戶選擇多個文件。

<input type="file" accept="image/*" multiple>

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<input>.type="file" 1.0 1.0 (1.7 or earlier) 3.02 1.0 1.0
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<input>.type="file" ? ? ? ? ?

隱藏內容

有時由於技術緣由，咱們得讓一些隨表單發送的數據對用戶不可見。要這樣作，你能夠在你的表單中添加一個隱藏元素，只需使用type設置爲hidden的<input>元素。

若你建立了這種元素，還必須設置其name和value屬性：

<input type="hidden" name="timestamp" value="1286705410">

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<input>.type="hidden" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<input>.type="hidden" (Yes) (Yes) (Yes) (Yes) (Yes)

圖像按鈕

圖像按鈕控件表面看起來就像是<img>元素，除非被用戶點擊，它纔會具備提交按鈕的行爲（參見上文）。

圖像按鈕是經過type設置爲image的<input>元素建立的。該元素支持與<img>元素相同的屬性集，且還加上了表單按鈕支持的那些屬性。

<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

若圖像按鈕被用於提交表單，它不會提交它的值，而是提交在圖片上點擊的X和Y座標（座標是相對圖像而言的，取左上角爲(0, 0)座標）。座標以兩個鍵/值對的形式發送，X值的鍵名是name屬性的值加上字符串".x"，Y值的鍵名是name屬性的值加上字符串".y"。這樣就提供了一種便於建立「熱點地圖」的方式。

舉個例子：

<form action="http://foo.com" method="get">
  <!-- 譯註：原文是value="pos"，明顯是錯的，下面已改正 -->
  <input type="image" name="pos" alt="" src="map.png" />
</form>

當你點擊這個表單的圖像時，你會發送出以下URL：

http://foo.com?pos.x=123&pos.y=456

pos.x和pos.y參數的值取決於你點擊了圖片上哪一個地方。這些數據的發送和檢索將在[發送表單數據]()一文中討論。

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<input>.type="image" 1.0 1.0 2 1.0 1.0
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<input>.type="image" (Yes) (Yes) (Yes) (Yes) (Yes)

度量和進度條

度量和進度條是數字值的可視化表示。

進度條表明一個隨時間變化、直至達到由max屬性指定的最大值的值。進度條使用<progress>元素進行建立，<progress>元素的內容用於讓不支持該元素的瀏覽器做降級處理、也讓無障礙設備能讀出來。

<progress max="100" value="75">75/100</progress>

度量條表示一個處於由min和max值劃分的範圍的固定值。該值被渲染爲一個長條，長條使用<meter>元素進行建立，<meter>元素的內容用於讓不支持該元素的瀏覽器做降級處理、也讓無障礙設備能讀出來。

<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

而要知道該長條長什麼樣子，咱們還得比較它的value值與另外幾個值：

  • low和high值將一個長條的範圍劃分了三個部分：

    • 範圍較低的那部分位於min和low之間（含這兩個值）。

    • 範圍的中間部分位於low和high之間（不含這兩個值）。

    • 範圍較高的那部分位於high和max之間（含這兩個值）。

  • optimum值定義了<meter>元素的最佳值。結合low和high值，就能肯定一個長條範圍的哪一個部分是最佳的：

    • 若optimum值位於範圍較低的那部分，則較低的那部分是最佳的部分，中間部分是平均的部分，較高的那部分則是最差的部分。

    • 若optimum值位於範圍的中間部分，則較低的那部分是平均的部分，中間部分是最佳的部分，較高的那部分也仍是平均的部分。

    • 若optimum值位於範圍較高的那部分，則較低的那部分是最差的部分，中間部分是平均的部分，較高的那部分是最佳的部分。

全部實現了<meter>元素的瀏覽器都會使用上述的值來改變度量長條的顏色：

  • 若如今的值位於範圍最佳的部分，則長條顯示爲綠色。

  • 若如今的值位於範圍平均的部分，則長條顯示爲黃色。

  • 若如今的值位於範圍最差的部分，則長條顯示爲紅色。

兼容性表

屬性（桌面端） Chrome Firefox (Gecko) IE Opera Safari
<progress> 6.0 6.0(6.0) 10 10.6 5.2
<meter> 6.0 16.0(16.0) Not supported 11.0 5.2
屬性（移動端） Android Firefox (Gecko) IE Opera Safari
<progress> Not supported 6.0(6.0) Not supported 11.0 ?
<meter> Not supported 16.0(16.0) Not supported 11.0 ?

參見

若要深刻了解表單組件的不一樣，這裏還提供了一些你應該看看的有用資源：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程