<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="">

    <form action="">

        用户名：<input type="text" name="userName"><br>

        密码：<input type="password" name="userPwd"> <br>

        加密：<keygen></keygen><br>

        <input type="submit">

    </form>

    <!--显示输出信息：只能显示不能修改

    1.语义性更强

    2.值需要你去设置，不能自动计算-->

    <output>总金额：￥100.00</output>

    <!--专业：

    <select name="" id="">

        <option value="1">前端与移动开发</option>

        <option value="2">java</option>

        <option value="3">javascript</option>

        <option value="4">c++</option>

    </select>-->

    <!--不仅可以选择，还应该可以输入-->

    <!--建立输入框与datalist的关联  list="datalist的id号"-->

    专业：<input type="text" list="subjects"> <br>

    <!--通过datalist创建选择列表-->

    <datalist id="subjects">

        <!--创建选项值：value:具体的值 label:提示信息，辅助值-->

        <!--option可以是单标签也可以是双标签-->

        <option value="英语" label="不会"/>

        <option value="前端与移动开发" label="前景非常好"></option>

        <option value="java" label="使用人数多"></option>

        <option value="javascript" label="做特效"></option>

        <option value="c" label="不知道"></option>

    </datalist>

    网址：<input type="url" list="urls">

    <datalist id="urls">

        <!--如果input输入框的type类型是url,那么value值必须添加http://-->

        <option value="http://www.baidu.com" label="百度"></option>

        <option value="http://www.sohu.com"></option>

        <option value="http://www.163.com"></option>

    </datalist>

</form>

</body>

</html>

　　

HTML5-新增表单元素的更多相关文章

  1. 疯狂的表单-html5新增表单元素和属性

    疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...

  2. IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素

    HTML5有一些新的表单元素:<datalist>.<keygen>.<output>.不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性, ...

  3. html5新增表单元素

    1.验证 <form> <input type="email"></input>    验证邮箱 <input type="ur ...

  4. HTML5新增表单验证

    HTML5新增属性: 属性 描述 placeholder 提供一种提示,输入域为空时显示,获得焦点输入内容后消失 required 规定输入域不能为空 pattern 规定验证input域的模式(正则 ...

  5. HTML5——新表单元素 表单属性 语义元素

    表单元素 新的表单元素 datalist——输入域选项列表 keygen——提供一种验证用户的可靠方法 output——不同类型的输出,比如计算或脚本输出 表单属性 <form> / &l ...

  6. 【HTML5】表单元素

    * datalist datalist 元素规定输入域的选项列表. 列表是通过 datalist 内的 option 元素创建的. 如需把 datalist 绑定到输入域,请用输入域的 list 属性 ...

  7. Html5的表单元素

    表单是HTML中获取用户输入的手段,,对于web应用系统及其重要,文字是不能说明问题的: 直接上代码把: <!DOCTYPE html><html lang="en&quo ...

  8. html5 新增表单控件和表单属性

    新的输入型控件 email:电子邮箱文本框,跟普通的没什么区别 当输入不是邮箱的时候,验证通不过 移动端的键盘会有变化         tel:电话号码 一般用于手机端,是一个键盘切换 url:网页的 ...

  9. html5新增表单控件和表单属性

    表单验证 Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false) 阻止默认验证:ev.preventDefault() formnova ...

  10. 页面中引入百度地图，实例化后影响html5的表单元素date的上下箭头

    复现步骤: 使用百度地图的JavaScript的API,引入文件地址"http://api.map.baidu.com/api?key=&v=1.1&services=tru ...

随机推荐

  1. SpringDataJPA使用

    一.简介 SpringDataJpa是 JPA规范的一个很好的实现,简化了开发的复杂度,极大提升了开发的效率.SpringDataJpa通过 Repository接口及子接口可以很方便的实现持久化操作 ...

  2. 一、Vs2019扩展多了 导航到反编译的源码中运行

    一.导航到反编译的源码中运行

  3. 使用C#解析XMIND文件格式

    static void Main(string[] args) { var tempPath = @"c:\Temp"; if (Directory.Exists(tempPath ...

  4. python常用函数 Y

    yield有点像return,但他会在下一次执行的时候从上次结束点继续执行,带有 yield 的函数在 Python 中被称之为 generator(生成器),生成器无法通过索引获取数据,同时也承诺使 ...

  5. python常用函数 W

    with…as with 语句适用于对资源进行访问的场合,确保不管使用过程中是否发生异常都会执行必要的“清理”操作,释放资源,比如文件使用后自动关闭.线程中锁的自动获取和释放等.当python执行wi ...

  6. vue的class和style的绑定

    <div class="input-search" :class="{input-search-focus : iscur == 1}"> 在原本有 ...

  7. django之创建子应用

    一:子应用 Django的视图编写是放在子应用中的.类似于flask中的视图. 二:创建子应用 例如:在刚才的dj_study项目中,创建一个名字为user的子应用(目录):注意是第一级的dj_stu ...

  8. HDU 5386 Cover

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5386 题目大意:给一个初始矩阵(n×n).一个目标矩阵(n×n)和m个操作,要求找到一种操作顺序,使初 ...

  9. 【leetcode】1041. Robot Bounded In Circle

    题目如下: On an infinite plane, a robot initially stands at (0, 0) and faces north.  The robot can recei ...

  10. 循环神经网络（LSTM和GRU）(2)

    1.tf.nn.dynamic_rnn()函数 参考:http://www.360doc.com/content/17/0321/10/10408243_638692495.shtml 参考:http ...