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. Udp广播的发送和接收(iOS + AsyncUdpSocket)下篇

    接上篇C#的Udp广播的发送和接收 http://www.cnblogs.com/JimmyBright/p/4637090.html ios中使用AsyncUdpSocket处理Udp的消息非常方便 ...

  2. 一个非典型的Linux路由配置方案

    上周帮人解决了一个问题,这个问题绝对是非典型性的,采用了非常规的方法.虽然最终的方案非常不符合常规,非常不通用,充满了各种藏得很深的技巧或者说是trick,但是这个问题却是一个学习Linux路由的绝好 ...

  3. 51nod 1785 数据流中的算法 | STL的应用

    51nod 1785 数据流中的算法 题面 动态求平均数.方差.中位数. 题解 这道题的坑: 平均数在答案中是向下取整输出并在后面添加".00" 方差:平方的平均数减去平均数的平方 ...

  4. linux内核分析 第七周 Linux内核如何装载和启动一个可执行程序

    一.编译链接的过程和ELF可执行文件格式 vi hello.c gcc -E -o hello.cpp hello.c -m32 //预处理.c文件,预处理包括把include的文件包含进来以及宏替换 ...

  5. Android 如何从应用返回待机界面(HOME)

    Intent mIntent = new Intent(); mIntent.setAction(Intent.ACTION_MAIN); mIntent.addCategory(Intent.CAT ...

  6. YBT 6 数学基础

    $补+写题ing$ 第 1 章 快速幂 序列的第 k 个数 link $solution:$ 板子 A 的 B 次方 link $solution:$ 板子 [NOIP2013] 转圈游戏 link ...

  7. linux下tar.gz、tar、bz2、zip等解压缩、压缩命令

    转至:http://www.jb51.net/LINUXjishu/43356.html 说明:Linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令 ...

  8. javascript实现div的显示和隐藏

    http://www.cnblogs.com/oec2003/archive/2007/05/05/736492.html <html> <head> <meta htt ...

  9. 牛客练习赛23 F 托米的游戏

    https://www.nowcoder.com/acm/contest/156/F 树 概率 #include <cstdio> #include <cstdlib> #in ...

  10. for循环 底层工作原理

    for 循环是对容器进行迭代的过程. 什么是迭代? 迭代就是从某个容器对象中逐个地读取元素,直到容器中没有更多元素为止. for 循环的步骤是什么? 先判断对象是否为可迭代对象,不是的话直接报错,抛出 ...