前端随笔——Form的原生部件
前言
最近在学Chrome的扩展,在写单选框的时候突然忘了 radio 怎么合并成一个组。。。组件库用多了基本的HTML标签都忘了。
然后就去MDN上查。发现了两个个没见过的标签<fieldset>
<legend>
。
看了下文档,原来<fieldset>
用于对<form>
中的控制元素分组,<legend>
用于表示其父元素内容的标题。
用法如下
1<!-- 使用 fieldset, legend, and label 的表单 -->
2<form action="" method="post">
3 <fieldset form="options" name="selectArea">
4 <legend>选择区域</legend>
5 <label><input name="open" type="radio" checked value="1">开启</label>
6 <label><input name="open" type="radio" value="0">关闭</label>
7 </fieldset>
8</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>
标签进行检查,只允许输入浮点树,右侧有按钮用来控制增加/减少值。
1<fieldset form="options" name="Number">
2 <legend>Number</legend>
3 <label><input type="number" name="age" id="age" step="2"></label>
4</fieldset>
type=“range”
通过把type
设置为range
可以创建一个滑块。之后需要设置max
,min
,step
三个属性,分别控制最大最小值和步长。
1<fieldset form="options" name="Range">
2 <legend>Range</legend>
3 <label><input type="range" name="beans" id="beans" min="0" max="500" step="10"></label>
4</fieldset>
顺便看一下各个浏览器对range
的默认样式。
- 只有IE11提供了确切数字的显示。
- 微软的两款浏览器的默认样式明显好看一点
- Chrome对默认样式是最不上心的(所有部件的默认样式都这样。。。)
type=“datatime-local/month/time/week/data”
目前Chrome,Edge,Opera支持全部的日期选择器类型,FireFox 66.0.3
支持time
和date
,IE系列全部不支持。
EDGE正是微软亲儿子,几乎所有部件EDGE的默认样式是最好看。😂
1<fieldset form="options" name="DateTime">
2 <legend>DateTime</legend>
3 <label><input type="datetime-local" name="datetime" id="datetime"></label>
4 <label><input type="month" name="month" id="month"></label>
5 <label><input type="time" name="time" id="time"></label>
6 <label><input type="week" name="week" id="week"></label>
7 <label><input type="date" name="date" id="date"></label>
8</fieldset>
type=“color”
拾色器,这个除了IE其他浏览器都支持了,不用兼容IE的话可以用一下。
1<fieldset form="options" name="Color">
2 <legend>Color</legend>
3 <label><input type="color" name="color" id="color"></label>
4</fieldset>
附上EDGE美图一张,其他浏览器都是调用windows内置的拾色器,只有EDGE是内置在浏览器里的。
type=“file”
不多说,都用过吧。
type=“image”
这属性真的是看得我一脸懵逼。设置为image
并把src
设置为图片路径,然后点击图片会发送点击位置相对于左上角的坐标。我真的不知道这是做什么用的。
1<fieldset form="options" name="Image">
2 <legend>Image</legend>
3 <label><input type="image" alt="Click me!" src="images/icon.png" width="80" height="30" /></label>
4</fieldset>
select
关于select其实用的也是比较多的,就说一下<optgroup>
。
<optgroup>
用于给<select>
内的<option>
分组。
1<fieldset form="options" name="SelectGroups">
2 <legend>SelectGroups</legend>
3 <label for="groups"></label>
4 <select id="groups" name="groups">
5 <optgroup label="fruits">
6 <option>Banana</option>
7 <option selected>Cherry</option>
8 <option>Lemon</option>
9 </optgroup>
10 <optgroup label="vegetables">
11 <option>Carrot</option>
12 <option>Eggplant</option>
13 <option>Potato</option>
14 </optgroup>
15 </select>
16</fieldset>
datalist
<datalist>
这玩意根据MDN的介绍,作用应该类似浏览器的自动提示功能。比如在第一次登录网站之后浏览器会询问是否保存账号密码。之后再次登录的话,在点击输入框后,会出现下拉单,让你选择之前保存的账号密码。
<datalist>
是可以用于任何需要用户输入文本的部件,比如<input>
,<textarea>
等。
注意:IE10以下(不包括IE10),Safari 12.1以下(不包括12.1),不受支持
1<fieldset form="options" name="DataList">
2 <legend>DataList</legend>
3 <label><input type="text" name="myFruit" id="myFruit" list="mySuggestion"></label>
4 <datalist id="mySuggestion">
5 <option>Apple</option>
6 <option>Banana</option>
7 <option>Blackberry</option>
8 <option>Blueberry</option>
9 <option>Lemon</option>
10 <option>Lychee</option>
11 <option>Peach</option>
12 <option>Pear</option>
13 </datalist>
14</fieldset>
话说这跟单选框好像啊(挠头)。
checkbox/radio
不多说了,应该都用过吧。
button/input type=“button”
从技术上讲,使用<button>
元素或<input>
元素定义的按钮几乎没有区别。唯一的区别在于<button>
内部可以插入HTML内容而<input type="button">
只能通过设置value
属性插入纯文本内容。
1<fieldset>
2<legend>Button & type="button"</legend>
3<label for=“button”><label>
4<button id="button" type="button">
5 This an <br><strong>anonymous button</strong>
6</button>
7
8<label for=“typeButton”><label>
9<input id="typeButton" type="button" value="This is an anonymous button">
10</fieldset>
progress
进度条
1<fieldset form="options" name="Progress">
2 <legend>Progress</legend>
3 <progress max="100" value="75">75/100</progress>
4</fieldset>
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系列浏览器,其他浏览器都支持