1.验证

<form>

<input type="email"></input>    验证邮箱

<input type="url"></input>        验证网址

<input type="tel"></input>        验证电话

<input type="number" min="1" max="10" step=“1”></input>        验证数字

<input type="range" min="1" max="10"></input>     设置进度条

<input type="color"></input>    调出颜色面板

<input type="date"></input>    年月日

<input type="month"></input>   年月

<input type="week"></input>  选择第几周

<input type="submit"></input>

</form>

2.autocompelate设置自动匹配

<form autocompelate="on">

<input type="text" list="taglist"></input>

<datalist id="taglist">

<option>wuhan</option>

<option>beijing</option>

<option>guangzhou</option>

<option>guangxi</option>

</datalist>

</form>

3.自动获取焦点

<input type="text" autofocus="autofocus"></input>

4.提交页面(如何在form外面进行提交表单元素)

<form action="index.aspx" method="post"   id="from1">

<input type="text" name="username"></input>

<input type="submit"></input>

</form>

<input type="password" form="from1"></input>

5.设置表单提交的时候,密码提交到另外页面当中

<form action="index.aspx" method="post"   id="from1">

<input type="text" name="username"></input>

<input type="password" name="pwd" formaction="index1.aspx" ></input>

<input type="submit"></input>

</form>

6.上传控件

<input type="file" multiple="multiple"></input>   上传控件

7.验证文本

<form>

<input type="text" pattern="{0-9}{6}"  title="请输入邮编"></input>

<input type="submit" ></input>

</form>

8.

<input type="text"  placeholder="请输入用户名"></input>  提示输入内容

<input type="text"  required="required"></input>   输入内容不能为空

9.可以编辑段落数据

<p contenteditable="true">sddddd</p>

10.隐藏段落信息

<p hidden="hidden">sddsdsds</p>

11.设置tab的顺序

<a href="#" tabindex="2">dsdsdsds</a>

<a href="#" tabindex="1">dsdsdsds</a>

<a href="#" tabindex="3">dsdsdsds</a>

<a href="#" tabindex="4">dsdsdsds</a>

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

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

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

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

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

  3. HTML5新增表单验证

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

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

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

  5. 【HTML5】表单元素

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

  6. Html5的表单元素

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

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

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

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

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

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

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

随机推荐

  1. P4433 [COCI2009-2010#1] ALADIN

    题目描述 给你 n 个盒子,有 q 个操作,操作有两种: 第一种操作输入格式为"1 L R A B",表示将编号为L到R的盒子里的石头数量变为(X−L+1)×A mod B,其中 ...

  2. 洛谷 P5105 不强制在线的动态快速排序

    P5105 不强制在线的动态快速排序 题目背景 曦月最近学会了快速排序,但是她很快地想到了,如果要动态地排序,那要怎么办呢? 题目描述 为了研究这个问题,曦月提出了一个十分简单的问题 曦月希望维护一个 ...

  3. 开源nginx_lua_waf部署安装

      0x01 前言 ngx_lua_waf实现 WAF一句话描述,就是解析HTTP请求(协议解析模块),规则检测(规则模块),做不同的防御动作(动作模块),并将防御过程(日志模块)记录下来.所以本文中 ...

  4. 解题:CQOI 2017 小Q的表格

    题面 首先观察$b*f(a,a+b)=(a+b)*f(a,b)$这个东西 可以化成$\frac{f(a,a+b)}{a+b}=\frac{f(a,b)}{b}$,发现这类似辗转相除求gcd 而我们两边 ...

  5. bzoj 1856: [Scoi2010]字符串 卡特兰数

    1856: [Scoi2010]字符串 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1458  Solved: 814[Submit][Status][ ...

  6. 【bzoj4264】小C找朋友

    题解 $a$和$b$是好*友说明除了这两个人以外的邻接集合相同: 做两次$hash$,分别都处理和$a$相邻的点排序$hash$,①$a$要算进$a$的相邻集合,②$a$不算进: 当两个人不是好*友, ...

  7. 【贪心】【CF1061D】 TV Shows

    Description 给定 \(n\) 个电视节目和两个参数 \(x,y\).你想要看全部的电视节目,但是同一个电视机同一个时刻只能播放一个电视节目,所以你只能多租赁电视机.在时间 \([l,r]\ ...

  8. linux内核增加系统调用--Beginner's guide

    Linux内核中设置了一组用于实现系统功能的子程序,称为系统调用.系统调用和普通库函数调用非常相似明知是系统调用由操作系统核心提供,运行于核心态,而普通的函数调用由函数库或用户自己提供,运行于用户态. ...

  9. 解决“mongoengine.fields.ImproperlyConfigured: PIL library was not found”报错

    解决方案: pip install Pillow

  10. NATS_02:NATS消息通信模型

    消息通信模型 NATS的消息通信是这样的:应用程序的数据被编码为一条消息,并通过发布者发送出去:订阅者接收到消息,进行解码,再处理.订阅者处理NATS消息可以是同步的或异步的. * 异步处理  异步处 ...