[09]表单元素(下)
来源:互联网 发布:linux使用搜狗输入法 编辑:程序博客网 时间:2024/06/05 00:53
一.其他元素
表单的输入验证功能。
表单元素还剩下几个元素没有讲解,包括下拉框列表 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="请输入区号+座机" requiredpattern="^[\d]{2,4}\-[\d]{6,8}$">//禁止表单验证<form action="http://li.cc" novalidate>
0 0
- [09]表单元素(下)
- HTML 表单元素(下)
- [09]表单元素(上)
- [09]表单元素(中)
- html 5 表单元素(下)
- 表单元素
- 表单元素
- 表单元素
- 表单元素
- 表单元素
- HTML5 表单元素在 Android 下被软键盘遮挡
- javascript 表单和表单元素
- HTML5表单_表单元素
- Html表单和表单元素
- 选取表单和表单元素
- 动态增加表单元素
- JSP读取表单元素
- html创建表单元素
- 关于webview的加载及缓存的总结
- gulp入门篇(一)
- 文章标题keydown、keyup的小区别
- 用筛选法求解n以内的所有素数
- 安卓项目SimpleQQ——联系人列表页面设计
- [09]表单元素(下)
- CSS3三角形绘制原理解析
- //2.日本某地发生了一件谋杀案,警察通过排查确定杀人凶手必为4个嫌疑犯的一个。以下为4个嫌疑犯的供词。 //A说:不是我。 //B说:是C。 //C说:是D。 //D说:C在胡说 //已知3个人说了
- 使用Altium Designer画PCB器件半落在视窗外无法选择移动解决办法
- C语言实现蛇形输出
- C语言 - 查找字符串中相同的字符函数的使用
- spring,mybatis 事务隔离级别管理
- 读取一个5*5数组,然后显示每行的和与每列的和
- HDFS Snapshots