一、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

 

posted on 2019-06-23 20:08  格物致知_Tony  阅读(485)  评论(0编辑  收藏  举报