html5中新增两个表单属性，分别autocomplete和novalidate属性

1.autocomplete属性

该属性用于控制自动完成功能的开启和关闭。可以设置表单或者input元素，有两个属性值，当设置为on时，启动该功能；当设置off时，关闭该功能。启用该功能后，当用户在自动完成域开始输入时，浏览器就会在该域中显示填写的选项。用户每提交一次，就会增加一个用于选择的选项

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

   <form action="#" method="get" autocomplete="on">

      请输入：<input type="text"  name="txt" /><br/>

       <input type="submit" />

   </form>

</body>

</html>

2.novalidate属性

input输入类型，当提交表单时，会对这些输入内容进行验证。而novalidate属性则用于在提交表单时不对form或input进行验证：

<form action="#" method="get" novalidate>

  E-mail:

  <input type="email" name="myEmail" />

  <input type="submit" />

</form>

新增的input属性

1.autofocus属性

autofocus属性用于自动获取焦点。在html5中input元素设置该属性后，当页面加载时，input元素会自动获得光标焦点。

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

2.form属性

form属性用于设置input元素属于哪个表单。在html4中，表单中的所以元素都必须在这个表单的开始标签和结束标签之间，而在html5中，如果要将表单开始和结束标签之外的元素归属到该表单，只需要设置form属性

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<form action="#" method="get" id="myForm">

    常用地址：<input type="text" name="ftxt" />

    <input type="submit" />

</form>

临时地址：<input type="text" name="ltxt" form="myForm" />

</body>

</html>

在设置form属性时，需要知道表单的id属性值，并将form属性的值也设置成表单id的属性值

3.表单重写属性override

override属性用于重写表单元素的某些属性，在html5中，可以重写的表单属性有formaction、formmethod、formenctype、formnovalidate和formtarget，这些属性分别用于重写表单的action、enctype、method、novalidate和target属性

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form action="a.jsp" method="get">

        用户名：<input type="text" name="fname" /><br />

        <input type="submit" value="张三的提交" /><br/>

        <input type="submit" formaction="b.jsp" value="李四的提交" />

    </form>

</body>

</html>

第一个input元素会将输入的数据提交a.jsp页面，而第二个input元素设置formaction属性，重写了action属性，设置提交页面到b.jsp页面

4.list属性：

list属性用于设置输入域的datalist元素，为list属性设置datalist的id属性值，可以将datalist元素与input元素相关联：

list属性适应于以下类型的input元素：text、search、url、telephone、email、date、 pickers、number、range和color；

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>6.2.1</title>

</head>

<body>

<input type="url" list="url_list" name="myUrl" />

<datalist id="url_list">

  <option label="Microsoft" value="http://www.microsoft.com" />

  <option label="Google" value="http://www.google.com" />

  <option label="百度" value="http://www.baidu.com" />

</datalist>

</body>

</html>

5.multiple属性

multiple属性用于设置input元素是否可以有多个值。该属性只适用于email和file类型的input元素。如果给email类型的input元素设置multiple属性，那么在输入框中可以输入多个email地址，多个email地址之间用逗号隔开。

如果给file类型的input元素设置multiple属性，那么在打开的选择文件对话框中就可以选择对个文件

E-mail：<input type="email" name="myEmail" multiple />

File：<input type="file" name="myFile" multiple />

6.pattern正则表达式

正则表达式由一系列字符和数字组成，用于匹配某个句法规则。该属性适应于text、search、url、telephone、email和password类型的input元素

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<form>

    <input type="text" name="myName" pattern="[a-zA-Z]\w{5,15}$">

    <html>以字母开头，6-16位</html>

    <input type="submit" value="提交">

</form>

</body>

</html>

7.设置input元素在内容为空时的提示信息，placeholder属性

在页面中有一个文本输入框，但是不知道应该输入什么内容时。

  <input type="text" name="myAddress" placeholder="输入您的常住地址" />

8.提交为空时提醒 required属性

用户必须填写内容才能提交，为空时提交不上

<form>

   <input type="text" name="myAddress" placeholder="输入您的常住地址" required />

    <input type="submit"/>

</form>

html5中新增的form表单属性的更多相关文章

  1. HTML5的form表单属性

    form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...

  2. js form 表单属性学习

    一.<form></form>标签      引用借鉴:http://www.cnblogs.com/fizx/p/6703370.html form标签的属性规定了当前网页上 ...

  3. django系列9--django中的组件(form表单)

    modelform整体 from django import forms from app01 import models import hashlib from django.core.except ...

  4. HTML 中按钮作为form表单元素提交特性两则 --- 参HTML考标准分析

    相同name的submit 类型的input提交行为 描述 这种情况, <input type="submit" name="ACTION" value= ...

  5. html5之table嵌入form表单布局（务必注意：table标签必须在form表单内部，不能再form表单外部！）

    切记:用table标签来布局form表单元素,table标签必须放在form表单内部,否则可能会出现各种bug 原文地址:https://blog.csdn.net/weixin_43343144/a ...

  6. CSS中路径及form表单的用法

    1.什么是路径? 路劲分为三种 1.绝对路径: 从盘符开始,然后依次的往下查找 本地: C:/Users/Administrator/Desktop/0527day01/07.html 服务器的: w ...

  7. ElementUI中如何实现Form表单内的文字居中

    <el-table :data='orderList' border stripe :align='center' :cell-style='cellStyle' :header-cell-st ...

  8. django中form表单的提交：

    一,关于表单: 表单在百度百科的解释:   表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...

  9. 小程序 <web-view></web-view> 中使用 form 表单提交

    在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据. H5 使用的技术框架是 vue+v ...

随机推荐

  1. Elixir 1.0 Release

    如期而至,9.9苹果产品发布会之后,紧接着在今天(教师节)我们终于等到了Elixir 1.0,苹果范儿的说法是:Now,Elixir 1.0 is here   注意:官网上的链接说明之类还没有更新过 ...

  2. ORA-28000: the account is locked 账户被锁

    这种情况可能是因为你输入错误的用户名密码达到10次,oracle给你锁住了. 解决方法: 首先 ~bash$ sqlplus /nolog SQL> conn sys/sys as sysdba ...

  3. jquery $.each终止本次循环

    1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2.而在jquery中 $.each则对应的使用return true 进入下一个循环,return ...

  4. plain framework 商业版 开发总结2 项目管理器

    任何事情都有三个阶段,分析.制作.质检的过程.在程序中就分为设计.编码.调试(测试)三个阶段,其中设计最为重要,设计的不好会导致编码和调试重复,甚至最后又回到了设计的过程.为了不会重复返工,所以设计的 ...

  5. Codeforces Round #382(div 2)

    A.= = B. 题意:给出n个数和n1和n2,从n个数中分别选出n1,n2个数来,得到n1个数和n2个数的平均值,求这两个平均值的最大和 分析:排个序从后面抽,注意先从末尾抽个数小的,再抽个数大的 ...

  6. 浏览器控制台命令调试——console

    控制台命令调试时通过浏览器开发工具中的控制台命令嵌入到JavaScript中,输出特定的信息或日志,从而达到调试的目的. 我们常用的Chrome和FireFox,都可以通过F12来打开开发工具. 下面 ...

  7. hql中in关键字的用法

    hql: from " + FoodComment.class.getName() + " f where f.id in :groupIds" 封装的方法: publi ...

  8. CocoaPods的那些坑

    CocoaPods的那些坑 文章转自http://blog.csdn.net/zhanniuniu/article/details/52159362#comments 我跟博主的经历超级像!不过自己用 ...

  9. C#设计模式(2)——简单工厂模式

    一.概念:简单工厂模式(Simple Factory Pattern)属于类的创新型模式,又叫静态工厂方法模式(Static FactoryMethod Pattern),是通过专门定义一个类来负责创 ...

  10. 前端神器avalonJS入门（一）

    转自:http://www.cnblogs.com/vajoy/p/4063824.html avalonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angula ...