HTML5权威指南笔记：14-其他表单元素及输入验证

最新推荐文章于 2024-05-21 21:13:33 发布

原创最新推荐文章于 2024-05-21 21:13:33 发布 · 339 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了HTML5中用于创建复杂表单的多种元素，包括select、textarea、output和keygen等，详细解释了这些元素的用法和属性，并探讨了如何通过required、min、max及pattern等属性进行输入验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 使用其他表单元素

1.1 生成选项列表

select元素可以用来生成一个选项列表供用户选择，适合于选项较多的情形

select元素
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	name 、disabled 、form 、size 、multiple 、autofocus和required
内容	option和optgroup元素
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	form 、autofocus和required属性是HTML5新增的
习惯样式	无，该元素的外观因平台和浏览器而异

optgroup元素可以用来在select元素的内容中建立一定的结构。

optgroup元素
元素类型	无
允许具有的父元素	select元素
局部属性	label 、disabled
内容	option元素
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	无

例子：

    <!--设置size属性可让select元素显示多个选项，
    设置multiple属性则可让用户一次选择多个选项-->
    -->
    <select id="fave" name="fave" size="5" multiple>
        <!--optgroup元素的用途是对option元素进行编组
        label属性可用来为整组选项提供一个小标题。
        disabled属性可用来阻止选择组内的任何选项。-->
        <optgroup label="Top Choices">
            <!--提供给用户的选项由option元素定义
            设置了selected属性以便在页面显示出来时被自动选中-->
            <option value="apples" label="Apples">Apples</option>
            <option value="oranges" label="Oranges">Oranges</option>
        </optgroup>
        <optgroup label="Others">
            <option value="cherries" label="Cherries">Cherries</option>
            <option value="pears" label="Pears">Pears</option>
        </optgroup>
    </select>

1.2 输入多行文字

textarea元素生成的是多行文本框，用户可以在里面输入多行文字

textarea元素
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素，但通常是form元素
局部属性	name 、disabled 、form 、readonly 、maxlength 、autofocus 、required 、placeholder 、dirname 、rows 、wrap和cols
内容	文本，也即该元素的内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	form、autofocus 、required 、placeholder和wrap属性HTML5新增的
习惯样式	无

1. rows 和cols属性可用来设置其大小
2. wrap属性有两个值： hard和soft, 可用来控制在用户输入的文字中插入换行符的方式
例子：

    <textarea cols="20" rows="5" wrap="hard" id="story"
              name="story">
        Tell us why this is your favorite fruit
    </textarea>

1.3 表示计算结果

output元素
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	name 、form 、for
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	output { display: inline; }

例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <!--添加2个值相乘事件-->
    <form oninput="res.value = quant.valueAsNumber * price.valueAsNumber">
        <fieldset>
            <legend>Price Calculator</legend>
            <input type="number" placeholder="Quantity" id="quant" name="quant" /> x
            <input type="number" placeholder="Price" id="price" name="price" /> =
            <!--使用for属性关联2个input元素-->
            <output for="quant name" name="res" />
        </fieldset>
    </form>
</body>
</html>

1.4 生成公开/私有密钥对

提交表单时，keygen元素会生成一对新的密钥。公钥被发给服务器，而私钥则由浏览器保留并存入用户的密钥仓库。

keygen元素
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	challenge 、keytype 、autofocus 、name 、disabled和form
内容	无
标签用法	虚元素形式
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	无

1. keytype属性的用途是指定用来生成密钥对的算法，不过它支持的值只有RSA一种
2. challenge属性用来指定一条于公钥一起发送给服务器的密钥管理口令

2 使用输入验证

对输入验证的支持

验证属性	元素
required	textarea 、select、input ( text 、password、checkbox 、radio 、file 、datetime 、datetime-local 、date 、month 、time 、week 、nunber , email 、url 、search及tel型）
min、max	input ( datetime 、datetime- local 、date 、month 、time 、week 、number及range型）
pattern	input ( text 、password 、email 、url 、search及tel型）

2.1 确保用户提供了一个值

required属性可以检查用户是否提供了一个值
例子：

<input type="text" required id="name" name="name"/>

2.2 确保输入值位于某个范围内

min和max属性可以用来确保输入的数值和日期数据处于指定的范围内
例子：

<input type="number" min="0" max="100"
    value="1" id="price" name="price"/>

只有用户输入一个值后min和max属性控制的输入验证才会起作用。设置该属性的文本框空着的时候浏览器也允许用户提交表单

2.3 确保输入值与指定模式匹配

pattern属性可以用来确保输入值与一个正则表达式匹配
例子：

<input type="text" id="name" name="name" pattern="^.* .*$"/>

只有用户输入一个值后pattern属性控制的输入检验才会起作用。设置该属性的文本框空着的时候浏览器也允许用户提交表单

3 禁用输入验证

要想不经输入验证就能提交表单，可以设置form元素的novalidate属性，也可以设置用来提交表单的button或input元素的formnovalidate属性。
例子：

  <form method="post" novalidate>
        <input type="submit" value="Save" formnovalidate />
    </form>