资讯专栏INFORMATION COLUMN

【译】原生表单组件

sunnyxd / 2517人阅读

摘要:文本输入框文本输入框是最基本的表单组件,它便于用户输入各种数据。对大多数表单组件而言,表单提交后所有具有属性的组件都会被提交,即使它们没有获值。重置按钮用于重置所有表单组件为默认值。

系列文章说明

原文

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

多行文本框与普通的单行文本框间的主要不同在于,用户可以输入带有显式换行(即支持回车[CR]和换行[LF]字符)的文本。

值得注意的是,使用CSS属性resize,用户可以直接改变多行文本框大小,如果你想让他们这么做的话。

兼容性表

属性(桌面端) Chrome Firefox (Gecko) IE Opera Safari