<!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. Django重点之url别名

    django重点之url别名[参数名必须是name,格式是name="XXX] 不论后台路径如何进行修改路径,前台访问的路径不变,永远是alias, 这样方便开发 前台根据 {{ url & ...

  2. 广告URL

    讨厌的csdn 广告,百度搜索了一次,csdn cookie广告追了你好几年还有... 把下面的url 重定向127.0.0.1  ,只记录了百度广告,部分阿里的广告,其他还未记录 虽然也用Adblo ...

  3. python OpenCV视频的读取及保存

    import cv2 cap = cv2.VideoCapture('rtsp://admin:hik12345@192.168.3.160/Streaming/Channels/1') fourcc ...

  4. winsows CMD及Linux命令大全 欢迎补充

    CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本) CMD命令锦集 1. gpedit.msc-----组策略 2. sndrec32--- ...

  5. LNMP集群架构篇

    一.LNMP介绍 1.使前端web服务和后端存储服务进行串联 2.主要实现处理php动态请求 工作原理: L:linux  N:nginx  M:mysql   P:php 二.lnmp部署 我的环境 ...

  6. 编译安装github上的kafka_exporter项目

    本文介绍的kafka_exporter是prometheus监控系统中针对kafka的一款监控插件,要使用这个监控插件,kafka的版本需要满足 0.10.1.0 及以上. 项目的github地址:h ...

  7. 【rabbitmq】解决SimpleAmqpClient创建连接时阻塞的问题

    https://blog.csdn.net/panxianzhan/article/details/50755409 https://blog.csdn.net/csm201314/article/d ...

  8. mybatis返回新增对象的主键

    加这两行就可以返回这个插入对象的自增的主键<insert id="insertSeatPortraitData" parameterType="seatPortra ...

  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 ...