HTML 5新增表单元素(案例详解)

●datalist

datalist元素定义输入框的选项列表，选项列表是通过该元素内的option元素进行创建的。
该元素与input元素配合使用，来定义input可能的值。
要把这个datalist元素定义的选项列表绑定到输入框，将input元素的list属性的值设置为datalist元素的id属性值。

 <datalist id="uselist" name="uselist"><option>BMW</option><option>Ford</option><option>Volvo</option></datalist><input type="text" list="uselist">

●output

output元素用于不同类型的输出，例如，计算结果或者脚本的其他结果。
output元素必须写在表单内部，或者说为其添加form属性。
output元素的值一般由js来控制

<form action=""><div >你的身高：<input class="tall"  type="text"></div><div>你的体重：<input class="weight" type="text" name="" id=""></div><input class="test" type="button" value="点击测试"><output id="result"></output></form>

js部分

<script>var btn  = document.getElementsByClassName('test')[0];var tall = document.getElementsByClassName('tall')[0];var weight = document.getElementsByClassName('weight')[0];var result = document.getElementById('result');btn.addEventListener('click',function Result(){var first = tall.value;console.log(first);var second = weight.value;var firstHigh = first/10;// 将身高转为米var newresult = second / (firstHigh*firstHigh) * 100;result.value = newresult;if( result.value >=21 && result.value<=25){alert('正常');}else if(result.value < 21){alert('体重偏轻');}else{alert('不能吃了');}});</script>

●Keygen

用于表单的密钥生成器字段，作用是提供一种验证用户的可靠方法。
keygen元素在跟随表单提交时会自动生成两个密钥：私密钥（储存在本地）和公密钥（发送到服务器中，用于验证客户端）
keygen的属性：
属性    值    说明
challenge    challenge    如果使用，则将Keygen的值设置为在提交时会给出提示
disabled    disabled    禁用Keygen字段
form    formname    定义该字段所属的一个或多个表单
keytype    rsa    定义生成密钥的算法
name    fieldname    定义Keygen元素的唯一名称，用于在提交表单时获得字段的值。
autofocus    autofocus    使 keygen 字段在页面加载时获得焦点

加密： <keygen name="secutity" width="300"/>

●optgroup

optgruop元素在html4已经存在，在HTML5进行了拓展。
该元素定义选项组，使用该元素允许用户组合选项。当使用一个长的选项列表式，对相关的选项进行组合会使处理更加容易。
optgroup元素将select元素中的选项进行逻辑分类，在select元素中直接定义，不允许嵌套，既不能进行第二次分组。
optgroup元素的属性：
disabled：加载时禁用该选项组
label: 用来定义分组显示的标签名

  <select name="" id=""><optgroup label="按类型"><option value="">音乐</option><option value="">电器</option></optgroup><optgroup label="按价格"><option value="">0-50</option><option value="">51-80</option></optgroup><optgroup label="按作者国籍"><option value="">中国</option><option value="">美国</option></optgroup></select>

HTML 5新增表单元素(案例详解)相关推荐

html5新增了哪些表单元素,HTML5新增表单元素
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? HTML5新增表单元素主要有 input标签其type类型主要有有以下几种:type="tel"用 ...
H5新增表单元素、控件
表单-新增控件类型 • HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下. • ①email.②url.③number.④range • ⑤Date pick ...
新增表单元素属性事件
表单-新增控件类型 HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下. ①email.②url.③number.④range ⑤Date pickers (d ...
新增表单元素和表单属性
一.表单元素包含访问协议的完整路径的输入域,在提交表单时,自动验证url域的值 <input type="url" placeholder="请输入地址" ...
html中内联的form,bootstrap3.0教程之表单(form)使用详解
本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单.本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 ...
Spring MVC的表单标签库详解
表单标签库中包含了可以用在 JSP 页面中渲染 HTML 元素的标签.在 JSP 页面使用 Spring 表单标签库时,必须在 JSP 页面开头处声明 taglib 指令,指令代码如下: <%@ ...
Validform表单验证框架详解
Validform是另外一种表单验证框架,也是基于jQuery框架,用法比较灵活. 这里使用该框架的版本号为: Validform_v5.3.2 官网:http://validform.rjboy.c ...
前端：表单以及BFC详解
表格的创建:之前表格是用来布局的,现在只用来展示数据表格中的计算属性:像生活中的安检在每个单元格中进行检索内容,内容较多就会分配更多的空间给到当前单元格一:表格创建的标签 1.ta ...
表单补充，labed标签，html5新增表单元素和语义
<h2>label标签的使用</h2>  <label> ...

HTML 5新增表单元素(案例详解)

HTML 5新增表单元素(案例详解)相关推荐

最新文章

热门文章