前端隨筆 —— Form 的原生部件

前言

最近在學Chrome的擴展，在寫單選框的時候忽然忘了radio怎麼合併成一個組。。。組件庫用多了基本的HTML標籤都忘了。 而後就去MDN上查。發現了兩個個沒見過的標籤<fieldset> <legend>。

看了下文檔，原來<fieldset>用於對<form>中的控制元素分組，<legend>用於表示其父元素內容的標題。

用法以下

<!-- 使用 fieldset, legend, and label 的表單 -->
<form action="" method="post">
  <fieldset form="options" name="selectArea">
        <legend>選擇區域</legend>
            <label><input name="open" type="radio" checked value="1">開啓</label>
            <label><input name="open" type="radio" value="0">關閉</label>
        </fieldset>
</form>
複製代碼

效果以下

選擇區域

開啓 關閉

mmp，看得我十分鬱悶。想當年要實現這樣的邊框效果，得在外面套個<div>再搞個<span>設置絕對定位.這一個<fieldset>套一個<legend>還不用css。

正文

原生部件

input

type="text"

這個和type="password"應該是最經常使用到的，就不用多說了.

type="email"

瀏覽器會對type設置爲email的<input>標籤進行檢查，是否符合郵件地址的格式，在顯示上於type="text"的input標籤沒有什麼區別。

type="search"

type設置爲search的<input>標籤在輸入值後會在右邊顯示一個X號用於清空內容。除此以外，在顯示上於type="text"的input標籤沒有什麼區別。

tips: 在IE11, Chrome, EDGE會顯示X號。而FireFox始終不會顯示

type="tel"

MDN的文檔說由於世界範圍內存在各類各樣的電話號碼格式，因此對type爲tel的<input>不會作任何限制。在顯示上於type="text"的input標籤沒有什麼區別。

建議最好在須要的地方設置爲tel，由於在移動設備上可能會出現專門用於輸入電話號碼的虛擬鍵盤，我的感受能顯著提高用戶體驗（九宮格的數字鍵盤好方便😂）。

type="url"

瀏覽器會對type設置爲url的<input>標籤進行檢查，是否符合url的格式，在顯示上於type="text"的input標籤沒有什麼區別。

type="number"

瀏覽器會對type設置爲number的<input>標籤進行檢查，只容許輸入浮點樹，右側有按鈕用來控制增長/減小值。

<fieldset form="options" name="Number">
    <legend>Number</legend>
    <label><input type="number" name="age" id="age" step="2"></label>
</fieldset>
複製代碼

Number

type="range"

經過把type設置爲range能夠建立一個滑塊。以後須要設置max，min，step三個屬性，分別控制最大最小值和步長。

<fieldset form="options" name="Range">
    <legend>Range</legend>
    <label><input type="range" name="beans" id="beans" min="0" max="500" step="10"></label>
</fieldset>
複製代碼

Range

順便看一下各個瀏覽器對range的默認樣式。

• 只有IE11提供了確切數字的顯示。
• 微軟的兩款瀏覽器的默認樣式明顯好看一點
• Chrome對默認樣式是最不上心的（全部部件的默認樣式都這樣。。。）

  

type="datatime-local/month/time/week/data"

目前Chrome，Edge，Opera支持所有的日期選擇器類型，FireFox 66.0.3支持time和date,IE系列所有不支持。

EDGE正是微軟親兒子，幾乎全部部件EDGE的默認樣式是最好看。😂

<fieldset form="options" name="DateTime">
    <legend>DateTime</legend>
    <label><input type="datetime-local" name="datetime" id="datetime"></label>
    <label><input type="month" name="month" id="month"></label>
    <label><input type="time" name="time" id="time"></label>
    <label><input type="week" name="week" id="week"></label>
    <label><input type="date" name="date" id="date"></label>
</fieldset>
複製代碼

DateTime

type="color"

拾色器，這個除了IE其餘瀏覽器都支持了，不用兼容IE的話能夠用一下。

<fieldset form="options" name="Color">
    <legend>Color</legend>
    <label><input type="color" name="color" id="color"></label>
</fieldset>
複製代碼

Color

附上EDGE美圖一張，其餘瀏覽器都是調用windows內置的拾色器，只有EDGE是內置在瀏覽器裏的。

type="file"

很少說，都用過吧。

type="image"

這屬性真的是看得我一臉懵逼。設置爲image並把src設置爲圖片路徑，而後點擊圖片會發送點擊位置相對於左上角的座標。我真的不知道這是作什麼用的。

<fieldset form="options" name="Image">
    <legend>Image</legend>
    <label><input type="image" alt="Click me!" src="images/icon.png" width="80" height="30" /></label>
</fieldset>
複製代碼

Image

select

關於select其實用的也是比較多的，就說一下<optgroup>。

<optgroup>用於給<select>內的<option>分組。

<fieldset form="options" name="SelectGroups">
    <legend>SelectGroups</legend>
    <label for="groups"></label>
    <select id="groups" name="groups">
        <optgroup label="fruits">
            <option>Banana</option>
            <option selected>Cherry</option>
            <option>Lemon</option>
        </optgroup>
        <optgroup label="vegetables">
            <option>Carrot</option>
            <option>Eggplant</option>
            <option>Potato</option>
        </optgroup>
    </select>
</fieldset>
複製代碼

SelectGroups

Banana Cherry Lemon Carrot Eggplant Potato

datalist

<datalist>這玩意根據MDN的介紹，做用應該相似瀏覽器的自動提示功能。好比在第一次登陸網站以後瀏覽器會詢問是否保存帳號密碼。以後再次登陸的話，在點擊輸入框後，會出現下拉單，讓你選擇以前保存的帳號密碼。

<datalist>是能夠用於任何須要用戶輸入文本的部件，好比<input>，<textarea>等。

注意：IE10如下（不包括IE10），Safari 12.1如下（不包括12.1），不受支持

<fieldset form="options" name="DataList">
    <legend>DataList</legend>
    <label><input type="text" name="myFruit" id="myFruit" list="mySuggestion"></label>
    <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>
</fieldset>
複製代碼

DataList

話說這跟單選框好像啊（撓頭）。

checkbox/radio

很少說了，應該都用過吧。

button/input type="button"

從技術上講，使用<button>元素或<input>元素定義的按鈕幾乎沒有區別。惟一的區別在於<button>內部能夠插入HTML內容而<input type="button">只能經過設置value屬性插入純文本內容。

<fieldset>
<legend>Button & type="button"</legend>
<label for=「button」><label>
<button id="button" type="button">
    This an <br><strong>anonymous button</strong>
</button>

<label for=「typeButton」><label>
<input id="typeButton" type="button" value="This is an anonymous button">
</fieldset>
複製代碼

Button & type="button"

This an anonymous button

progress

進度條

<fieldset form="options" name="Progress">
    <legend>Progress</legend>
    <progress max="100" value="75">75/100</progress>
</fieldset>
複製代碼

Progress

75/100

meter

儀表，大概做用相似於壓力錶之類的東西，能夠經過設置最優值，而後於當前值比較，高於當前值就是紅色報警什麼的。

須要先設置min，max，low，high，optimun，min，max就是最大最小值，主要是low，high這兩個值，他們把範圍劃分紅三部分。較低範圍，中等範圍，較高範圍。

當optimum的值分別在這三個範圍內的狀況以下，

min < value && value < low顏色爲綠色，low < value && value < high顏色爲黃色，high < value && value < max顏色爲紅色。 後面兩張圖展現了optimun在中等範圍和較高範圍時的策略。

除了IE系列瀏覽器，其餘瀏覽器都支持