摘要:文本输入框文本输入框是最基本的表单组件,它便于用户输入各种数据。对大多数表单组件而言,表单提交后所有具有属性的组件都会被提交,即使它们没有获值。重置按钮用于重置所有表单组件为默认值。
系列文章说明
原文
HTML表单是由组件构成的,这些组件是各种浏览器都支持的内置控件。本文中我们将深入探讨它们、了解它们的作用、学习如何让各种浏览器更好地支持它们。
虽然这里我们只探讨内建表单组件,但由于HTML表单有诸多限制、以及不同浏览器间的实现有很多的不同,故web开发者有时也得构建自定义的表单组件。这部分内容将会在[怎样创建定制表单组件]()一文中详细讨论。
文本输入框文本输入框是最基本的表单组件,它便于用户输入各种数据。然而一些文本框也可以专门用来实现一些特定需求。
值得注意的是,HTML文本框只是个纯文本输入控件。这就意味着你不能用它来进行富文本编辑(如加粗、斜体等)。所谓的富文本编辑器其实都是自定义的组件。
所有文本框都共享一些公共行为:
它们可以被标记为只读(用户不可修改输入的值)或者禁用(输入的值不会随着表单的其他部分一起提交)。
它们可拥有一个占位符;这是一小段在文本输入框内的、用于简明描述文本框作用的文本。
它们都受size(输入框的物理尺寸)和length(文本框能输入的最大字符数)的约束。
它们可以有拼写检查,如果浏览器支持的话。
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.readonly | 1.0 | 1.0 (1.7 or earlier) | 6 | 1.0 | 1.0 |
.disabled | 1.0 | 1.0 (1.7 or earlier) | 6 | 1.0 | 1.0 |
.placeholder | 10.0 | Unknown (4.0) | 10 | 11.10 | 4.0 |
.placeholder | 10.0 | Unknown (4.0) | 10 | 11.50 | 5.0 |
.size | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
.maxlength | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
.spellcheck | 10.0 | Unknown (3.6) | 10 | 11.0 | 4.0 |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.readonly | (Yes) | 4.0 (4.0) | (Yes) | (Yes) | (Yes) |
.disabled | (Yes) | 4.0 (4.0) | (Yes) | (Yes) | (Yes) |
.placeholder | 2.3 | 4.0 (4.0) | ? | 11.10 | 4 |
.placeholder | ? | 4.0 (4.0) | ? | 11.50 | 4 |
.size | (Yes) | 4.0 (4.0) | (Yes) | (Yes) | (Yes) |
.maxlength | (Yes) | 4.0 (4.0) | (Yes) | (Yes) | (Yes) |
.spellcheck | ? | 4.0 (4.0) | ? | 11.0 | ? |
单行文本框是用type属性值为text的元素创建的(若未提供type属性值,text也是个默认属性)。此外,如果你指定给type属性的值不被浏览器支持,也会使用text作为回退值。
单行文本框只有一个约束:若你输入的文本中有换行,浏览器会在发送数据前将这个换行给移除。
但是,我们也可以给单行文本框“按需”添加一些约束。这得用到pattern属性;该属性会告诉浏览器根据你选择的一个正则表达式来验证值的有效性。
HTML5添加了几个type属性的值来增强基本的单行文本框。虽然这些值仍会把元素呈现为一个单行文本框,但实际上它们还给文本框添加了几个额外的约束和特性。
E-mail输入框该类型的输入框设置了type值为email:
它给输入框添加了这样的验证约束:用户需要输入一个有效的e-mail地址;其他任何输入都会导致输入框报错。而通过设置multiple属性,这种输入框也可以让用户输入多个e-mail地址。
密码输入框该类型的输入框设置了type值为password:
它并未给输入文本添加任何特殊的约束,只是把输入框的里值做了隐藏以防止被读取。
搜索框注:注意这只是个用户界面的特性;浏览器还是会发送纯文本,除非你用Javascript给文本进行编码。
该类型的输入框设置了type值为search:
文本框和搜索框的主要区别在于外观和体验上(通常,搜索框会以圆角呈现)。但其实搜索框还增加了一个特性:输入的值可被自动保存,以实现在同一站点的不同页面中给出自动补全。
电话号码输入框该类型的输入框设置了type值为tel:
由于世界上有多种电话号码制式,所以此类型的的文本框不会给用户输入的值强制使用任何约束,主要是一个语义上的区别而已。虽然在某些设备上(尤其是手机)点击该输入框,会出现一个不同的虚拟键盘。
URL输入框该类型的输入框设置了type值为url:
为确保只输入有效的URL,它为输入框添加了些特殊的验证约束;若输入的值不是个符合格式的URL,表单将会呈现错误状态。
注:URL符合格式并不意味着它指向确切存在的地址。
有特殊约束并处于错误状态的输入框会阻止表单提交;此外,为让错误提示更明显,也可以为它们加些样式,我们将在[表单数据验证]()一文中详细讨论这点。
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="text" | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
.type="email" | 10.0 | Unknown (4.0) | 10 | 10.62 | ? |
.type="password" | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
.type="search" | 5.0 | Unknown (4.0) | 10 | 11.01 | 5.0 |
.type="tel" | 5.0 | Unknown (4.0) | 10 | 11.01 | 5.0 |
.type="url" | 10.0 | Unknown (4.0) | 10 | 10.62 | ? |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="text" | (Yes) | 4.0 (4.0) | (Yes) | (Yes) | 1.0 |
.type="email" | Not supported | 4.0 (4.0) | Not supported | (Yes) | ? |
.type="password" | ? | 4.0 (4.0) | ? | ? | ? |
.type="search" | Not supported | 4.0 (4.0) | ? | (Yes) | 4.0 |
.type="tel" | 2.3 | 4.0 (4.0) | ? | (Yes) | 3.1 |
.type="url" | Not supported | 4.0 (4.0) | ? | (Yes) | 3.1 |
多行文本框使用了元素而非元素。
多行文本框与普通的单行文本框间的主要不同在于,用户可以输入带有显式换行(即支持回车[CR]和换行[LF]字符)的文本。
值得注意的是,使用CSS属性resize,用户可以直接改变多行文本框大小,如果你想让他们这么做的话。
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
(Yes) | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
(Yes) | 4.0 (4.0) | (Yes) | (Yes) | (Yes) |
下拉组件能让用户很方便地从众多选项中作选择。HTML有两种下拉组件:选择框和自动补全组件。这两者的交互方式是一样的,一旦控件被激活,浏览器会展示一列表的值让用户从中选择,这个值列表会覆盖在页面内容之上。
选择框选择框是通过元素创建的,并使用一或多个元素作为其子元素,每个都指定了一个可能的值。
若有需要,选择框的默认值可通过为相应的元素设置selected属性进行指定。为了给值创建分组,元素亦可嵌套于元素中:
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
1.0 | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) | |
1.0 | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) | |
1.0 | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
1.0 | 4.0 (4.0) | (Yes) | (Yes) | (Yes) | |
1.0 | 4.0 (4.0) | (Yes) | (Yes) | (Yes) | |
1.0 | 4.0 (4.0) | (Yes) | (Yes) | (Yes) |
默认的,选择框只允许用户选择一个值。要让用户能选择多个值,可通过给元素添加multiple属性实现。但此时,选择框就不再呈现为一个下拉组件了,反而呈现为一个普通的列表框。
自动补全组件注:所有支持元素的浏览器也都支持它的multiple属性。
通过使用元素,你可以给表单组件提供说明、自动补全的值,并通过子元素来指定要呈现的值。设置好后,这份数据列表就能绑定到其他使用了list属性的组件上了。
一旦数据列表附加到一个表单组件上,它的选项就能被用于自动补全用户输入的文本;典型的情况是,选项被呈现为一个带有可能匹配的值的下拉框。
注:根据HTML规范,list属性和元素可被用于任何需要用户输入的组件上。然而,其并未清楚指明如何在非文本控件上使用,同时不同浏览器的实现也是各有不同。所以,要在非文本控件使用该特性得多加小心。
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
20.0 | Unknown (4.0) | 10 | 9.6 | Not supported | |
.list | 20.0 | Unknown (4.0) | 10 | 9.6 | Not supported |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
Not supported | 4.0 (4.0) | Not supported | (Yes) | Not supported | |
.list | Not supported | 4.0 (4.0) | Not supported | (Yes) | Not supported |
可勾选组件指的是可以通过点击改变其状态的组件。有两种可勾选组件:复选框和单选框,它们都可以通过checked属性来指示该组件是否默认被勾选。
值得注意的是,这些组件的行为和其他表单组件不太一样。对大多数表单组件而言,表单提交后所有具有name属性的组件都会被提交,即使它们没有获值。但对于可勾选组件,它们的值却只有在它们被勾选之后才会提交,如果没有勾选,则不会提交东西,包括其name属性。
复选框复选框由设置了type值为checkbox的元素创建:
上面的HTML创建的复选框是默认勾选的。
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="checkbox" | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="checkbox" | 1.0 | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
单选框由设置了type值为radio的元素创建:
几个单选框可以被绑定在一起,只要它们使用相同的name属性值,它们就被视为同一组选框。而在同一组中,只有一个选框能被勾选;这意味着其中一个勾选之后,其他所有选框会自动不勾选。
到了表单提交时,也只有被勾选的值会被提交;如果没有勾选,整组单选框会被认为处于未知状态且不会随表单提交。
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="radio" | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="radio" | 1.0 | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
HTML表单中,有三种按钮:
提交按钮
用于发送表单数据给服务器。
重置按钮
用于重置所有表单组件为默认值。
匿名按钮
这种按钮不自带特效,但也可以通过Javascript代码进行自定义。
按钮可以由元素或元素创建。type属性的值会指定将呈现何种按钮。
提交按钮重置按钮
匿名按钮
通常使用或创建的按钮行为都是一样的。然而也存在几点不同:
就如先前的例子所示,元素允许你使用HTML内容作为其标记内容,但元素只接受纯文本内容。
使用元素是,可以采用和按钮中内容不一样的值。(但在IE8以下的浏览器中这是不可行的)
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="number" | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
.type="reset" | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
.type="button" | 1.0 | 1.0 (1.7 or earlier) | 3 | 1.0 | 1.0 |
1.0 | 1.0 (1.7 or earlier) | (Yes)(Buggy before IE8) | (Yes) | (Yes) |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="number" | 1.0 | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
.type="reset" | 1.0 | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
.type="button" | 1.0 | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
1.0 | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
这一系列的组件能让用户输入一些复杂或高度结构化的数据,包括精确或近似数字、日期和时间、颜色。
数字数字组件是通过type设置为number的元素创建的。该控件看起来像文本框,但却只允许输入浮点数,而且通常还会带有几个按钮来增加或减少组件的值。
我们可以通过设置min和max属性来约束该组件的值。也可以通过step属性来指定该组件的增加和减少按钮的改变量。
上述代码创建了一个取值被限制在1到10之间的数字组件,其增加和减少按钮的改变量为2。
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="number" | 11.0 | Not supported | 10(recognized but no UI) | (Yes) | 5.2 |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="number" | 2.3 | Not supported | Not supported | (Yes) | 4.0 |
另一种选取数字的方法是使用滑块。由于操作滑块看起来不及文本框输入数字精确,所以滑块常用于选取对值的要求不是很精确的数字。
滑块组件是通过type设置为range的元素创建的。适当配置滑块是很重要的,强烈推荐你设置其min, max, step属性。
示例中创建了一个取值被限制在1到5之间的滑块组件,其增加和减少按钮的改变量分别为+1和-1。
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="range" | 5.0 | 23.0 | 10 | 10.62 | 4.0 |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="range" | Not supported | 23.0 | Not supported | 10.62 | 5.0 |
收集日期和时间的值在之前往往是web开发者的噩梦。现在HTML5通过引入一个特殊的控件用于处理这类特定的数据,带来了一些新改进。
日期和时间控件是通过type设置为特定值的元素创建的。因为你可能希望能收集日期、时间或者两者兼有,所以它提供了几个不同的type属性值:
date创建展示和选取日期、但不含具体时间的组件。
datetime创建展示和选取日期、并带有UTC时区时间的组件。
datetime-local创建展示和选取日期、并带有任何指定时区时间的组件。
month创建展示和选取月份、并带有年份的组件。
time创建展示和选取一个时间值的组件。
week创建展示和选取周数、并带其年份的组件。
所有的日期与时间控件都可以使用max和min属性进行约束:
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="date" | Not supported | Not supported | Not supported | 10.62 | (Yes) |
.type="datetime" | Not supported | Not supported | Not supported | 10.62 | (Yes) |
.type="datetime-local" | Not supported | Not supported | Not supported | 10.62 | (Yes) |
.type="month" | Not supported | Not supported | Not supported | 10.62 | (Yes) |
.type="time" | Not supported | Not supported | Not supported | 10.62 | (Yes) |
.type="week" | Not supported | Not supported | Not supported | 10.62 | (Yes) |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="date" | Not supported | Not supported | Not supported | 10.62 | 5.0 |
.type="datetime" | Not supported | Not supported | Not supported | 10.62 | (Yes) |
.type="datetime-local" | Not supported | Not supported | Not supported | 10.62 | (Yes) |
.type="month" | Not supported | Not supported | Not supported | 10.62 | (Yes) |
.type="time" | Not supported | Not supported | Not supported | 10.62 | (Yes) |
.type="week" | Not supported | Not supported | Not supported | 10.62 | (Yes) |
颜色选择器警告:日期和时间组件都是很新的组件,甚至那些声称支持它们的浏览器也常有重大的用户界面问题,这让这些组件很难被使用。所以在发布你的内容之前,请先彻底地在不同的浏览器上测试一遍!
通常颜色都有点难于处理,因为有许多种方式来表示它们:RGB值(十进制或十六进制)、HSL值、关键字等等。而颜色选择器能方便用户以文本或图形的形式选择颜色。
颜色组件是通过type设置为color的元素创建的。
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="color" | 21.0 | Not supported | Not supported | 11.01 | Not supported |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="color" | Not supported | Not supported | Not supported | ? | Not supported |
还有一些组件难以被归类,因为它们拥有一些非常特殊的行为;但其实它们也是很有用的。
文件选择器HTML表单可以向服务器发送文件,关于这点,在[发送表单数据]()一文中有详细的讨论。文件选择器组件是让用户选择一或多个文件进行发送的一种方式。
文件选择器组件是通过type设置为file的元素创建的。被接收的文件类型可通过使用accept属性进行指定;此外,若你想让用户选择不止一个文件,可以添加multiple属性。
在下面的例子中,我们创建了一个接收图像图形文件的文件选择器,它也允许用户选择多个文件。
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="file" | 1.0 | 1.0 (1.7 or earlier) | 3.02 | 1.0 | 1.0 |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="file" | ? | ? | ? | ? | ? |
有时因为技术原因,我们得让一些随表单发送的数据对用户不可见。要这样做,你可以在你的表单中添加一个隐藏元素,只需使用type设置为hidden的元素。
若你创建了这种元素,还必须设置其name和value属性:
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="hidden" | 1.0 | 1.0 (1.7 or earlier) | 2 | 1.0 | 1.0 |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="hidden" | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
图像按钮控件表面看起来就像是
若图像按钮被用于提交表单,它不会提交它的值,而是提交在图片上点击的X和Y坐标(坐标是相对图像而言的,取左上角为(0, 0)坐标)。坐标以两个键/值对的形式发送,X值的键名是name属性的值加上字符串".x",Y值的键名是name属性的值加上字符串".y"。这样就提供了一种便于创建“热点地图”的方式。
举个例子:
当你点击这个表单的图像时,你会发送出如下URL:
http://foo.com?pos.x=123&pos.y=456
pos.x和pos.y参数的值取决于你点击了图片上哪个地方。这些数据的发送和检索将在[发送表单数据]()一文中讨论。
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="image" | 1.0 | 1.0 | 2 | 1.0 | 1.0 |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
.type="image" | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
度量和进度条是数字值的可视化表示。
进度条代表一个随时间变化、直至达到由max属性指定的最大值的值。进度条使用元素进行创建,元素的内容用于让不支持该元素的浏览器作降级处理、也让无障碍设备能读出来。
度量条表示一个处于由min和max值划分的范围的固定值。该值被渲染为一个长条,长条使用
75
而要知道该长条长什么样子,我们还得比较它的value值与另外几个值:
low和high值将一个长条的范围划分了三个部分:
范围较低的那部分位于min和low之间(含这两个值)。
范围的中间部分位于low和high之间(不含这两个值)。
范围较高的那部分位于high和max之间(含这两个值)。
optimum值定义了
若optimum值位于范围较低的那部分,则较低的那部分是最佳的部分,中间部分是平均的部分,较高的那部分则是最差的部分。
若optimum值位于范围的中间部分,则较低的那部分是平均的部分,中间部分是最佳的部分,较高的那部分也还是平均的部分。
若optimum值位于范围较高的那部分,则较低的那部分是最差的部分,中间部分是平均的部分,较高的那部分是最佳的部分。
所有实现了
若现在的值位于范围最佳的部分,则长条显示为绿色。
若现在的值位于范围平均的部分,则长条显示为黄色。
若现在的值位于范围最差的部分,则长条显示为红色。
兼容性表
属性(桌面端) | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
6.0 | 6.0(6.0) | 10 | 10.6 | 5.2 | |
6.0 | 16.0(16.0) | Not supported | 11.0 | 5.2 |
属性(移动端) | Android | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
Not supported | 6.0(6.0) | Not supported | 11.0 | ? | |
Not supported | 16.0(16.0) | Not supported | 11.0 | ? |
若要深入了解表单组件的不同,这里还提供了一些你应该看看的有用资源:
The Current State of HTML5 Forms by Wufoo
HTML5 Tests - inputs on Quirksmode (也可用于移动端浏览器)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54365.html
摘要:系列文章说明原文下面的兼容性表将总结出表单对的支持程度,由于和表单的复杂性,这几个表不能认为是最佳的参考对象。该属性不能生效,或者表现很不一致以至于不可靠。在表单组件上,不支持该属性。按钮属性备注该属性不会在上的浏览器上生效。 系列文章说明 原文 下面的兼容性表将总结出HTML表单对CSS的支持程度,由于CSS和HTML表单的复杂性,这几个表不能认为是最佳的参考对象。尽管如此,它们...
摘要:系列文章说明原文下面的兼容性表将总结出表单对的支持程度,由于和表单的复杂性,这几个表不能认为是最佳的参考对象。该属性不能生效,或者表现很不一致以至于不可靠。在表单组件上,不支持该属性。按钮属性备注该属性不会在上的浏览器上生效。 系列文章说明 原文 下面的兼容性表将总结出HTML表单对CSS的支持程度,由于CSS和HTML表单的复杂性,这几个表不能认为是最佳的参考对象。尽管如此,它们...
摘要:示例多选框和单选框给多选框和单选框添加样式是很让人凌乱的。通向漂亮表单之路一些有用的库和拓展工具尽管在复选框和单选框上的表现力已经够用了,但离其支持高级表单组件仍然遥遥无期。其表单部分挺有用的。 系列文章说明 原文 在本文中,我们将了解如何在HTML表单上使用CSS,为那些难于自定义的表单组件加以样式。如前文所述,文本框和按钮很适合使用CSS,而现在我们得来探索HTML表单样式的那...
摘要:示例多选框和单选框给多选框和单选框添加样式是很让人凌乱的。通向漂亮表单之路一些有用的库和拓展工具尽管在复选框和单选框上的表现力已经够用了,但离其支持高级表单组件仍然遥遥无期。其表单部分挺有用的。 系列文章说明 原文 在本文中,我们将了解如何在HTML表单上使用CSS,为那些难于自定义的表单组件加以样式。如前文所述,文本框和按钮很适合使用CSS,而现在我们得来探索HTML表单样式的那...
摘要:一个表单由一或多个部件组成,这些部件可以是文本框单行或多行选择框按钮复选框或单选按钮。在我们的示例里,一个文本框中用了该属性的默认值,该值表示一个基本的单行文本框,用于接收无控制或验证的任何文本。 前言 这个系列译自mdn上的一份表单指南,原文详尽阐述了表单相关的基础知识。而表单作为一个经典的页面交互方式,是每个前端工程师绕不开的话题,通过翻译这个系列的文章既是有助于扫清自己的知识盲区...
摘要:在里我们简单保存了对回调函数的引用,回调函数是由指令传入的译者注参考,只要每次组件值发生改变,就会触发这个回调函数。 原文链接:Never again be confused when implementing ControlValueAccessor in Angular forms showImg(https://segmentfault.com/img/bV7rR7?w=400...
阅读 3489·2019-08-30 15:53
阅读 3404·2019-08-29 16:54
阅读 2188·2019-08-29 16:41
阅读 2396·2019-08-23 16:10
阅读 3376·2019-08-23 15:04
阅读 1341·2019-08-23 13:58
阅读 346·2019-08-23 11:40
阅读 2451·2019-08-23 10:26