<!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. 机器学习ROC图解读

    1. 分类器评估指标 对于二分类问题,可将样例根据其真实类别和分类器预测类别划分为:真正例(True Positive,TP):真实类别为正例,预测类别为正例.假正例(False Positive,F ...

  2. 解决Vscode编辑器不能打开多标签页问题

    问题描述:编辑代码时,初用vscode,不能打开多个文件:每打开一个文件,都会替换前面一个文件标签,很不方便切换编码: 想要的效果: 解决方式: 方法一: 找到setting.json文件,最外层花括 ...

  3. echart 折线渐变 加柱形图结合图形，左右纵轴自设置格式，现行图北京渐变 ，x轴字体倾斜

    app.title = '折柱混合'; option = { grid: { left: '5%', //距离左边的距离 right: '5%', //距离右边的距离 top:'8%', bottom ...

  4. Java编码技巧与代码优化

    本文参考整理自https://mp.weixin.qq.com/s/-u6ytFRp-ZAqdLBsMmuDMw 对于在本文中有所疑问的点可以去该文章查看详情 常量&变量 直接赋值常量值, 禁 ...

  5. glibc2.22

                 

  6. python基础内置函数

    #取绝对值 #print(abs(-1)) #对序列中的元素进行bool运算,如果可迭代对象为空也返回True # print(all((1,23,))) # print(all({"nam ...

  7. [BJWC2010]严格次小生成树（LCA，最小生成树）

    [BJWC2010]严格次小生成树 题目描述 小C最近学了很多最小生成树的算法,Prim算法.Kurskal算法.消圈算法等等.正当小C洋洋得意之时,小P又来泼小C冷水了.小P说,让小C求出一个无向图 ...

  8. Typescript + TSLint + webpack 搭建 Typescript 的开发环境

    (1)初始化项目 新建一个文件夹“client-side”,作为项目根目录,进入这个文件夹: 我们先使用 npm 初始化这个项目: 这时我们看到了在根目录下已经创建了一个 package.json 文 ...

  9. django之csrf_exempt解决跨域请求的问题

    一: from django.views.decorators.csrf import csrf_exempt # 获取微信返回的code信息 @csrf_exempt def wechat_auth ...

  10. Windows结束某个端口的进程

    1.打开cmd命令窗口,输入命令:netstat -ano | findstr 8080,根据端口号查找对应的PID.结果如下: 发现8080端口被PID(进程号)为2188的进程占用. 2.根据PI ...