[09]表单元素(下)

一．其他元素

表单的输入验证功能。

表单元素还剩下几个元素没有讲解，包括下拉框列表 select、多行文本框 textarea、和 output 计算结果元素。

元素名称	说明
`select`	生成一个下拉列表进行选择
`optgroup`	对 select 元素进行编组
`option`	select 元素中的项目
`textarea`	生成一个多行文本框
`output`	表示计算结果

1. 生成下拉列表

<select name="fruit"><option value="1">苹果</option><option value="2">橘子</option><option value="3">香蕉</option>
</select>

解释：<select>下拉列表元素至少包含一个<option>子元素，才能形成有效的选项列表。<select>元素包含两个子元素<option>项目元素和<optgroup>分组元素，还包含了一些额外属性。

属性名称	说明
`name`	设定提交时的名称
`disabled`	将下拉列表禁用
`form`	将表单外的下拉列表与某个表单挂钩
`size`	设置下拉列表的高度
`multiple`	设置是否可以多选
`autofocus`	获取焦点
`required`	选择验证，设置后必须选择才能通过

//设置高度并实现多选
<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>

解释：生成一个可变更大小的多行文本框。属性如下：

属性名称	说明
`name`	设定提交时的名称
`form`	将表单外的多行文本框与某个表单挂钩
`readonly`	设置多行文本框只读
`disabled`	将多行文本框禁用
`maxlength`	设置最大可输入的字符长度
`autofocus`	获取焦点
`placeholder`	设置输入时的提示信息
`rows`	设置行数
`cols`	设置列数
`wrap`	设置是否插入换行符，有 soft 和 hard 两种
`required`	设置必须输入值，否则无法通过验证

//设置行高和列宽，设置插入换行符
<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>

3.计算结果

<form oninput="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>

转载于:https://www.cnblogs.com/pengtdy/p/8306307.html

[09]表单元素(下)相关推荐

iScroll4下表单元素聚焦及键盘的异常问题
本文是zawa同事写的一篇博文,相信很多在webapp开发中的同学使用iscroll4会遇到的该问题,问过zawa兄的建议,在这里分享给大家,希望能帮助到各位~ 原文地址:http://www.zaw ...
表单标签——input表单元素、select下拉表单元素和textarea文本域
表单标签表单的目的是为了收集用户信息.在网页中,我们也要跟用户进行交互,收集用户资料,此时就需要表单. 表单的组成:在HTML中,一个完整的表单通常由表单域.表单控件(也称为表单元素)和提示信息三部 ...
Vant-UI 表单组件（Field组件）：验证表单元素表单提交 - 踩坑篇
Vant-UI 表单组件(Field组件):验证表单元素&&表单提交: 示例截图 · 如下: 示例 · 详细代码 · 如下: <template><div class ...
input表单元素required用法
input表单元素required用法定义和用法 required 属性是一个布尔属性. required 属性规定必需在提交表单之前填写输入字段. 注意:required 属性适用于下面的 inp ...
新增表单元素属性事件
表单-新增控件类型 HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下. ①email.②url.③number.④range ⑤Date pickers (d ...
table中加表单元素每行怎么验证_Validform 一行代码搞定整站的表单验证 - 文章
Validform 一行代码搞定整站的表单验证,为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符 ...
表单元素的submit()方法和onsubmit事件
表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交.可以使用elemForm.submit();方法触发表单提交. 1.表单元素中出现了name="submi ...
【2018-01-22】HTML-表单及表单元素
<body><form action="" method="post">& ...
5 select 选择的值_表单元素之选择类型
表单元素的选择类型可以分为三种: 单选多选下拉单选和复选框的属性值可以有两个:disabled(不可操作的) 和 checked. 下拉框的属性值可以是:selected(默认选中) .mult ...
css label 居中布局_HTMLCSS精华知识点——表单元素、BFC、两栏布局、居中总结等...
HTML&CSS精华知识点--第九节一.input表单元素一系列元素,主要用于收集用户数据 1.type属性表示输入框类型text:普通文本输入框 date,日期选择框,兼容性问题 sea ...