<!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学习第四十三天生成器和next()关联

    我们在用列表生成式的时候,如果有一百万的数据,内存显然不够用,这是python想要什么数据,就生产什么数据给你,就产生了生成器,下面简单讲述生成器用法 1,生成器的用法 a=([a*a for a i ...

  2. MySQL5.7 慢查询+DDL操作堵塞查询

    数据库版本: mysql> select @@version; +------------+ | @@version | +------------+ | 5.7.26-log | +----- ...

  3. Django 的 logging日志文件配置

    在Django的settings配置文件里配置以下信息: import os BASE_LOG_DIR = os.path.join(BASE_DIR , "log") # log ...

  4. ASE Backend Alpha Sprint Review

    [Backend] Alpha Review展示博客 团队成员介绍:仅限于Alpha阶段有贡献的成员. 典型场景描述:描述并说明你们认为的产品面向的典型场景. 团队管理与协作:包括但不限于团队内部如何 ...

  5. 一、IIS性能检测与网站管理

    一.性能监视器 1.Windows Server自带的性能监视器.(开始 运行 perfmon ) 另一种方式打开 Performance Monitor 点击Windows+R,在Run中输入per ...

  6. union 横向组合

    select sum(zs) zs,sum(zl) zl,sum(ts) ts,sum(lxcbw) lxcbw,sum(bz) bz,sum(sfzqt) sfzqtfrom (select cou ...

  7. Linux g++ 编译添加 pthread

    If you are going to compile a C program with pthread.h in LINUX using GCC or G++ you will have to us ...

  8. 【leetcode】394. Decode String

    题目如下: 解题思路:这种题目和四则运算,去括号的题目很类似.解法也差不多. 代码如下: class Solution(object): def decodeString(self, s): &quo ...

  9. Feign调用远程服务报错:Caused by: java.lang.IllegalStateException: Method getMemberInfo not annotated with HTTP method type (ex. GET, POST)

    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'ord ...

  10. postman与soapui操作

    get和post请求的区别? get请求:直接在浏览器里直接调用就可以了,不用借助工具   向服务端获取数据的    数据是放在url里面 post请求:向服务端发送数据的     数据放在body里 ...