一、H5 新增控件
1、datalist 元素
datalist 标签定义选项列表，请与 input 元素配合使用该元素。可为输入框提供一个可选的列表，可以直接选择列表项，也可以不选择列表中的项，自行输入其他内容。
在使用 datalist 的列表要绑定到输入框，需要使用输入框的 list 属性来引用 datalist 元素的 id 。
案例：
<input type="text" value="输入明星" list="star"/> <!-- input里面用 list -->
<datalist id="star"> <!-- datalist 里面用 id 来实现和 input 链接 -->
<option>刘德华</option>
<option>刘若英</option>
<option>刘晓庆</option>
<option>郭富城</option>
<option>张学友</option>
<option>郭郭</option>
</datalist>
2、Keygen 元素
<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器
3、output 元素
output 元素用于在浏览器中显示计算结果或脚本输出，包含完整的开始和结束标签。
语法：
<output name="">Text</output>
二、H5 新增输入属性
| 类型 | 使用示例 | 含义 |
|---|---|---|
| <input type="email"> | 输入邮箱格式 | |
| tel | <input type="tel"> | 输入手机号码格式 |
| url | <input type="url"> | 输入url格式 |
| number | <input type="number"> | 输入数字格式 |
| search | <input type="search"> | 搜索框（体现语义化） |
| range | <input type="range"> | 自由拖动滑块 |
| time | <input type="time"> | 小时分钟 |
| date | <input type="date"> | 年月日 |
| datetime | <input type="datetime"> | 时间 |
| month | <input type="month"> | 月年 |
| week | <input type="week"> | 星期 年 |
| color | <input type="color"> | 拾色器 |
· 注意：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。
三、H5 新增输入属性
| 属性 | 用法 | 含义 |
|---|---|---|
| placeholder | <input type="text" placeholder="请输入用户名"> | 占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回 |
| autofocus | <input type="text" autofocus> | 规定当页面加载时 input 元素应该自动获得焦点 |
| multiple | <input type="file" multiple> | 多文件上传 |
| autocomplete | <input type="text" autocomplete="off"> |
规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字 |
| required | <input type="text" required> | 必填项 内容不能为空 |
| accesskey | <input type="text" accesskey="s"> | 规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式 |
更多的标签学习请参考这里：http://www.w3school.com.cn/html/index.asp
原文地址：https://www.cnblogs.com/niujifei/p/11074064.html
时间： 2024-10-16 20:28:09