【HTML5学习笔记】13：表单元素其三

来源：互联网发布：c#sql select 的返回值编辑：程序博客网时间：2024/06/06 08:58

这节是最后剩下的三个表单元素和表单的验证输入。

下拉列表框select的属性

name 设置提交时的名称

disabled 将下拉列表禁用

form 将表单外的下拉列表与某个表单挂钩

size 设置下拉列表的高度

multiple 设置是否可以多选

autofocus 获取焦点

required 选择验证，设置后必须有选择才能通过验证

select的子标签

option 选项

optgroup 对option分组

多行文本框textarea的属性

name 设定提交时的名称

form 将表单外的多行文本框与某个表单挂钩

readonly 设置为只读

disabled 设置为禁用

maxlength 设置最大可输入的字符长度

autofocus 获取焦点

placeholder 设置输入时的提示信息

rows 设置行数

cols 设置列数

wrap 设置是否提交换行符，有soft和hard两种(用后者时换行符%0D%0A会被插入提交)

required 必须输入值后才能通过验证

*几个测试

<!DOCTYPE html><html lang="zh-cn"><head><title>表单元素 其三</title><meta charset="utf-8"></head><body><form action="http://www.baidu.com" oninput="res.value=num1.valueAsNumber*num2.valueAsNumber">下拉列表框select<br><select name="fruit" size="10" multiple><optgroup label="常见"><!-- label里给分组名称 --><option value="1">苹果</option><option value="2" selected>香蕉</option><!-- selected表示默认情况下的首选 --><option value="3">橘子</option></optgroup><optgroup label="少见"><option value="4">蛇果</option><option value="5">山竹</option><option value="6">杨桃</option></optgroup></select><br>多行文本框textarea<br><textarea name="" rows="20" cols="30">这里是多行文本框</textarea><br>计算结果元素output<br><input type="number" id="num1">X<input type="number" id="num2">=<output for="num1 num2" name="res"></output><br>提交时的验证<br><input required>不能为空<br><input type="number" min="10" max="100">必须在这个范围里<br><input type="text" placeholder="请输入区号+座机" required pattern="^[\d]{2,4}\-[\d]{6,8}$">正则限制<br><button>提交</button><br>另：在form标签里添加novalidate属性，则表示不需要里面这些提交验证了</form></body></html>

运行结果：

阅读全文

0 0

【HTML5学习笔记】13：表单元素 其三

【HTML5学习笔记】13：表单元素其三