前端随笔 —— 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系列浏览器，其余浏览器都支持