第 10章表单元素[下]

妖狐艹你老母 2022-05-25 00:23 138阅读 0赞

摘要：  
1.其他元素  
2.输入验证  
本章主要探讨 HTML5中表单中剩余的其他元素，然后重点了解一下表单的输入验证功  
能。

**一．其他元素**  
表单元素还剩下几个元素没有讲解，包括下拉框列表 select、多行文本框 textarea、  
和 output计算结果元素。  
![这里写图片描述][70]

1.生成下拉列表  
<select name=”fruit”>  
<option value=”1”>苹果</option>  
<option value=”2”>橘子</option>  
<option value=”3”>香蕉</option>  
</select>  
解释：<select>下拉列表元素至少包含一个<option>子元素，才能形成有效的选项列  
表。<select>元素包含两个子元素<option>项目元素和<optgroup>分组元素，还包含了  
一些额外属性。  
![这里写图片描述][70 1]

//设置高度并实现多选  
<select name=”fruit” size=”30” multiple>  
//默认首选  
<option value=”2” selected>橘子</option>  
//使用 optgroup进行分组，label为分组名称，disabled可以禁用分组  
<optgroup label=”水果类”>  
<option value=”1”>苹果</option>  
<option value=”2” selected>橘子</option>  
<option value=”3” label=”香蕉”>香蕉</option>  
</optgroup>

2.多行文本框  
<textarea name=”content”>请留下您的建议！ </textarea>  
解释：生成一个可变更大小的多行文本框。属性如下：  
![这里写图片描述][70 2]

//设置行高和列宽，设置插入换行符  
<textarea name=”content” rows=”20” cols=”30” wrap=”hard”></textarea>  
3.计算结果  
<form οninput=”res.value = num1.valueAsNumber \* num2.valueAsNumber”>

<input type=”number” id=”num1”> x <input type=”number” id=”num2”>  
<output for=”num1 num2” name=”res”>  
</form>  
解释：output就是计算两个文本框之间的值，其实就是内嵌了 JavaScript功能。

**二．输入验证**  
HTML5对表单提供了输入验证检查方式，但这种验证还是比较简陋的，并且不同的浏览  
器支持的成熟度还不同。在大部分情况下，可能还是要借助 jQuery等前端库来实现丰富的  
验证功能和显示效果。  
//必须填写一个值  
<input type=”text” required>  
//限定在某一个范围内  
<input type=”number” min=”10” max=”100”>  
//使用正则表达式  
<input type=”text” placeholder=”请输入区号+座机” required  
pattern=”^\[\\d\]\{2,4\}-\[\\d\]\{6,8\}$”>  
//禁止表单验证  
<form action=”http://li.cc” novalidate>

[70]: /images/20220525/9180e7ddba2646839a6c292e41328d20.png
[70 1]: /images/20220525/181259c6d02a4f63a29864414405a07e.png
[70 2]: /images/20220525/89df8ff2683941d9b1874ab4c12506d5.png