HTML5 表单新增内容

Posted 2022-02-05 niujifei

一、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 新增输入属性

　　

类型	使用示例	含义
email	<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