HTML <input> 表单部件元素

通用属性

大部分用来定义表单小部件的元素都有一些他们自己的属性。然而,在所有表单元素中都有一组属性,它们可以对这些小部件进行控制。下面是这些通用属性的列表:

  • autofocus 默认值 false,这个布尔属性允许您指定当页面加载时元素应该自动具有输入焦点,除非用户覆盖它,例如通过键入不同的控件。文档中只有一个与表单相关的元素可以指定这个属性。
  • disabled 默认值 false,这个布尔属性表示用户不能与元素交互。如果没有指定这个属性,元素将从包含的元素继承它的设置,例如<fieldset>;如果没有包含 disabled 属性集的元素,那么就启用了元素。
  • name 元素的名称;这是用于表单数据提交的。
  • value 元素的初始值。

文本输入域

所有文本域都有一些通用规范:

  • 可以被标记为 readonly (用户不能修改输入值)甚至是 disabled (输入值永远不会与表单数据的其余部分一起发送)。
  • 可以有一个 placeholder; 这是文本输入框中出现的文本,用来简略描述输入框的目的。
  • 可以被限制在 size (框的物理尺寸) 和 长度 (可以输入的最大字符数)。
  • 如果浏览器支持的话,他们可以从拼写检查中获益。

单行文本域

使用<input>元素创建一个单行文本域,该元素的 type 属性值被设置为 text (同样的,如果你不提供 type 属性,text 是默认值)。如果你指定的 type 属性的值在浏览器中是未知的(比如你指定 type="date",但是浏览器不支持原生日期选择器),属性值 text 就是是备用值。

1、E-mail 地址域 该类型的域设置为 type 属性的 email 值

<input type="email" id="email" name="email" multiple>

当使用 type 时, 用户需要在域中输入有效的电子邮件地址;任何其他内容都会导致浏览器在提交表单时显示错误。注意,这是客户端错误验证,由浏览器执行

通过包括 multiple 属性,它还可以让用户将多个电子邮件地址输入相同的输入(以逗号分隔)。

在一些设备上(特别是在移动设备上),可能会出现一个不同的虚拟键盘,更适合输入电子邮件地址。

2、密码域 通过 type 属性的 password 值设置该类型域

<input type="password" id="pwd" name="pwd">

它不会为输入的文本添加任何特殊的约束,但是它会模糊输入到字段中的值(例如,用点或小行星),这样它就不能被其他人读取。

请记住,这只是一个用户界面特性;除非你安全地提交你的表单,否则它会以明文发送,这不利于安全——恶意的一方可能会截获你的数据,窃取你的密码、信用卡信息,或者你提交的其他任何东西。保护用户不受此影响的最佳方式是在安全连接上托管任何涉及表单的页面(例如:https地址),使得数据在发送之前就已加密。

3、搜索域 通过使用 type属性的 search 值设置该类型域

<input type="search" id="search" name="search">

文本域和搜索域之间的主要区别是浏览器的样式——通常,搜索字段以圆角和/或给定一个“x”来清除输入的值。然而,还有另外一个值得注意的特性:它们的值可以自动保存到同一站点上的多个页面上自动完成。

4、电话号码域 通过 type属性的 tel 值设置该类型域

<input type="tel" id="tel" name="tel">

由于世界范围内各种各样的电话号码格式,这种类型的字段不会对用户输入的值执行任何限制(包括字母,等等)。这主要是语义上的差异,尽管在一些设备上(特别是在移动设备上),可能会出现一个不同的虚拟键盘,更适合输入电话号码。

5、URL 域 通过type属性的url 值设置该类型域

<input type="url" id="url" name="url">

它为字段添加了特殊的验证约束,如果输入无效的url,浏览器就会报告错误。

多行文本域

多行文本域专指使用 <textarea>元素,而不是使用<input>元素。

<textarea cols="30" rows="10"></textarea>

textarea和常规的单行文本字段之间的主要区别是,允许用户输入包含硬换行符(即按回车)的文本。

注意到在大多数浏览器中,文本区域在右下角有一个拖放操作,允许用户调整它的大小。这种调整能力可以通过使用CSS设置文本区域的resize性质为 none 来关闭。

注意,<textarea>元素与<input>元素的编写略有不同。<input>元素是一个空元素,这意味着它不能包含任何子元素。另一方面,<textarea>元素是一个常规元素,可以包含文本内容的子元素。

  • 如果您想为<input>元素定义一个默认值,那么您必须使用value属性;另一方面,对于<textarea>元素,您将默认的文本放在起始标记和<textarea>的结束标记之间。
  • 因为它的本质, <textarea>元素只接受文本内容;这意味着将任何HTML内容放入<textarea>中都呈现为纯文本内容。

下拉内容

下拉窗口小部件是一种简单的方法,可以让用户选择众多选项中的一个,而不需要占用用户界面的太多空间。HTML有两种类型的下拉内容:select box 和 autocomplete box。在这两种情况下,交互都是相同的——一旦控件被激活,浏览器就会显示用户可以选择的值列表。

选择框

一个选择框是用<select>元素创建的,其中有一个或多个<option>元素作为子元素,每个元素都指定了其中一个可能的值。

如果需要,可以使用selected属性在所需的<option>元素上设置选择框的默认值,然后在页面加载时选择该选项。<option>元素也可以嵌套在<optgroup>元素中,以创建视觉相关的组值:

<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>

all-select

如果一个<option>元素设置了value属性,那么当提交表单时该属性的值就会被发送。如果忽略了value属性,则使用<option>元素的内容作为选择框的值。

注意:在<optgroup>元素中,label属性显示在值之前,它是可选的。

多选选择框

默认情况下,选择框只允许用户选择一个值。通过将multiple属性添加到<select>元素,您可以允许用户通过操作系统提供的默认机制来选择几个值。 (如, 同时按下 Cmd/Ctrl 并点击多个值).

注意:在多个选项选择框的情况下,选择框不再显示值为下拉内容——相反,它们都显示在一个列表中

<select multiple id="multi" name="multi">
    <option>Banana</option>
    <option>Cherry</option>
    <option>Lemon</option>
</select>

all-multi-lines-select

自动补全输入框

可以使用<datalist>元素来为表单小部件提供建议的、自动完成的值,并使用一些<option>子元素来指定要显示的值。

然后使用list属性将数据列表绑定到一个文本域(通常是一个 <input> 元素)。

一旦数据列表与表单小部件相关联,它的选项用于自动完成用户输入的文本;通常,这是作为一个下拉框向用户展示的,在输入框中输入可能匹配的内容。

all-datalist


可选中项

可选中项是状态可以通过单击它们来更改小部件。有两种可选中项:复选框和单选按钮。两者都使用checked属性,以指示该部件是否在默认情况下进行检查。

值得注意的是,这些小部件与其他表单小部件不一样。对于大多数表单部件,一旦表单提交,所有具有name属性的小部件都会被发送,即使没有任何值被填。对于可选中项,只有在勾选时才发送它们的值。如果他们没有被勾选,就不会发送任何东西,甚至连他们的名字也没有。

复选框

使用type属性值为checkbox的 <input>元素来创建一个复选框。

<input type="checkbox" checked id="carrots" name="carrots" value="carrots">

包含checked属性使复选框在页面加载时自动被选中。

单选按钮

使用type属性值为radio的 <input>元素来创建一个单选按钮。

<input type="radio" checked id="soup" name="meal">

几个单选按钮可以连接在一起。如果它们的name属性共享相同的值,那么它们将被认为属于同一组的按钮。同一组中只有一个按钮可以同时被选;这意味着当其中一个被选中时,所有其他的都将自动未选中。如果没有选中任何一个,那么整个单选按钮池就被认为处于未知状态,并且没有以表单的形式发送任何值。

<fieldset>
    <legend>What is your favorite meal?</legend>
    <ul>
        <li>
            <label for="soup">Soup</label>
            <input type="radio" checked id="soup" name="meal" value="soup">
        </li>
        <li>
            <label for="curry">Curry</label>
            <input type="radio" id="curry" name="meal" value="curry">
        </li>
        <li>
            <label for="pizza">Pizza</label>
            <input type="radio" id="pizza" name="meal" value="pizza">
        </li>
    </ul>
</fieldset>

all-radio


按钮

在HTML表单中,有三种按钮:

  • Submit 将表单数据发送到服务器。
  • Reset 将所有表单小部件重新设置为它们的默认值。
  • Button 没有自动生效的按钮,但是可以使用JavaScript代码进行定制。如果您省略了type属性,那么这就是默认值。

使用 <button>元素或者<input>元素来创建一个按钮。type属性的值指定显示什么类型的按钮。

<button type="submit">
    This a <br><strong>submit button</strong>
</button>

<input type="submit" value="This is a submit button">

使用<button>元素或<input>元素定义的按钮几乎没有区别。唯一值得注意的区别是按钮本身的标签。在<input>元素中,标签只能是字符数据,而在<button>元素中,标签可以是HTML,因此可以相应地进行样式化。


高级表单部件

数字

用于数字的小部件是用<input>元素创建的,它的type属性设置为number。这个控件看起来像一个文本域,但是只允许浮点数,并且通常提供一些按钮来增加或减少小部件的值。

也可以:

  • 通过设置min和max属性来约束该值。
  • 通过设置step属性来指定增加和减少按钮更改小部件的值的数量。
<input type="number" name="age" id="age" min="1" max="10" step="2">

滑块

另一种选择数字的方法是使用滑块。从视觉上讲,滑块比文本字段更不准确,因此它们被用来选择一个确切值并不重要的数字。

滑块是通过把<input>元素的type属性值设置为range来创建的。正确配置滑块是很重要的;为了达到这个目的,我们强烈建议您设置min、max和step属性。

<input type="range" name="beans" id="beans" min="0" max="500" step="10">

日期时间选择器

使用<input>元素和一个type属性的适当的值来创建日期和时间控制,这取决于您是否希望收集日期、时间或两者。

本地时间

这将创建一个小部件来显示和选择一个日期,但是没有任何特定的时区信息。

<input type="datetime-local" name="datetime" id="datetime">

这就创建了一个小部件来显示和挑选一个月。

<input type="month" name="month" id="month">

时间

这将创建一个小部件来显示并选择一个时间值。

<input type="time" name="time" id="time">

星期

这将创建一个小部件来显示并挑选一个星期号和它的年份。

<input type="week" name="week" id="week">

所有日期和时间控制都可以使用min和max属性来约束。

拾色器

颜色总是有点难处理。有很多方式来表达它们:RGB值(十进制或十六进制)、HSL值、关键字等等。颜色小部件允许用户在文本和可视的方式中选择颜色。

一个颜色小部件是使用<input>元素创建的,它的type属性设置为值color。

<input type="color" name="color" id="color">

其他小部件

文件选择器

要创建一个文件选择器小部件,您可以使用<input>元素,它的type属性设置为file。被接受的文件类型可以使用accept属性来约束。此外,如果您想让用户选择多个文件,那么可以通过添加multiple属性来实现。

<input type="file" name="file" id="file" accept="image/*" multiple>

隐藏内容

有时候,由于技术原因,有些数据是用表单发送的,但不显示给用户,这有时是很方便的。要做到这一点,您可以在表单中添加一个不可见的元素。要做到这一点,需要使用<input>和它的type属性设置为hidden值。

<input type="hidden" id="timestamp" name="timestamp" value="1286705410">

图像按钮

图像按钮控件是一个与<img>元素完全相同的元素,除了当用户点击它时,它的行为就像一个提交按钮。

图像按钮是使用<input>元素创建的,该元素的type属性设置为image值。这个元素支持与<img>元素相同的属性,加上其他表单按钮支持的所有属性。

<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

如果使用图像按钮来提交表单,这个小部件不会提交它的值;相反,在图像上单击的X和Y坐标是被提交的(坐标是相对于图像的,这意味着图像的左上角表示坐标0,0),坐标被发送为两个键/值对:

  • X值键是name属性的值,后面是字符串“.x”
  • Y值键是name属性的值,后面是字符串“.y”

例如,当您点击这个小部件的图像时,您将被发送到一个URL,如下所显示的

http://foo.com?pos.x=123&pos.y=456

仪表和进度条

进度条

一个进度条表示一个值,它会随着时间的变化而变化到最大的值,这个值由max属性指定,使用<progress>元素创建的。

<progress max="100" value="75">75/100</progress>

仪表

使用<meter>元素创建的。这是用于实现任何类型的仪表,例如一个显示磁盘上使用的总空间的条,当它开始满时,它会变成红色。

<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

From: MDN 原生表单部件

评论