<!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. python学习shutil模块的文件压缩和解压用法

    shutil模块可以创建压缩包并返回文件路径,例如 zip,tar,下面详细其用法 base_name 压缩包的文件名,也可以是压缩包的路径,只是文件名时,则保存至当前目录,否则保存指定路径 data ...

  2. StringBuffer 和 StringBuilder 总结

    StringBuffer 和 StringBuilder 介绍 大多数情况下, StringBuffer 的速度要比 String 快: StringBuilder 要比StringBuffer快:S ...

  3. ES6——面向对象应用

    面向对象应用——React 特点:     1.组件化(模块化) --- class(一个组件就是一个class)     2.强依赖与JSX (JSX==babel==browser.js  是JS ...

  4. 什么是Azkaban?

    Azkaban是什么 Azkaban是由Linkedin开源的做批量工作流任务的调度器.在一个工作流内按照特定的顺序运行一组工作和流程.Azkaban定义了一种KV文件格式来建立任务之间的相互依赖关系 ...

  5. linux--基础知识3

    #linux虚拟终端切换 ctrl+alt+F(1-6) 总共支持六个终端切换 #mkdir /root/boot/目录  在指定路径下新建目录 #touch  /目录/文件名  在指定目录创建文件 ...

  6. hdu 4643 GSM(暴力)

    GSM Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Submis ...

  7. 21.Nodejs基础知识（下）——2019年12月16日

    2019年10月04日16:56:23 7. 模块 7.1 暴露一个类,字段 var bar = require("./bar.js"); var msg = "你好&q ...

  8. 载]mysqlhotcopy 热备工具体验与总结

    载]mysqlhotcopy 热备工具体验与总结 今天有空尝试了一下MYSQLHOTCOPY这个快速热备MYISAM引擎的工具.(本文是针对单个服务器的情况,以后将会加入多服务器相关操作)他和MYSQ ...

  9. dubbo、web应用 项目结构以及发布目录结构

    一.dubbo服务项目结构及发布结构 dubbo 服务项目结构 xxxxx-api 接口类和一些DTO 用于供其他项目依赖 需要提供dubbo服务的接口命名 以Facade结尾 (xxxxxFacad ...

  10. 1349 - View's SELECT contains a subquery in the FROM clause

    mysql创建视图 报错1349 - View's SELECT contains a subquery in the FROM clause:: 原因创建视图的sql语句中有不支持子查询, 所以需要 ...