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. 11、项目经理要阅读的书籍 - IT软件人员书籍系列文章

    项目经理是负责软件项目的总体把控的角色.项目经理在项目中是一个管理者的角色,他需要对项目的9大领域进行学习,同时针对项目的范围.进度.沟通和风险进行处理,让项目能够按时保质保量的完成. 项目经理需要学 ...

  2. Java 修饰符

    Java语言提供了很多修饰符,主要分为以下两类: 访问修饰符 非访问修饰符 修饰符用来定义类.方法或者变量,通常放在语句的最前端.我们通过下面的例子来说明: public class classNam ...

  3. eclipse 启动到loading workbench... 自动关闭

    是由于项目没有正常关闭运行而导致"workbench.xmi"中的"persistedState"标签还保持在运行时的配置造成的. 解决方法: 找到<wo ...

  4. Spring AspectJ基于注解的AOP实现

    对于AOP这种编程思想,很多框架都进行了实现.Spring就是其中之一,可以完成面向切面编程.然而,AspectJ也实现了AOP的功能,且实现方式更为简捷,使用更加方便,而且还支持注解式开发.所以,S ...

  5. mybatis关联映射

    多对一: <!-- 方法一: --> <select id="getNewsListByPage" parameterType="com.zqc.sha ...

  6. BZOJ4300绝世好（傻）题

    Description 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<=len). Input 输入文件共2行. 第一行包括一个整数 ...

  7. 解决 npm install xxx 卡住 的问题

    因为npm连接的数据源网站太慢,可以使用淘宝提供的npm数据源, npm config set registry https://registry.npm.taobao.org 之后就会快得飞起.

  8. JSP九大内置对象及四个作用域

    九大对象: 内置对象(又叫隐含对象,有9个内置对象):不需要预先声明就可以在脚本代码和表达式中随意使用 1-out: javax.servlet.jsp.JspWriter类型,代表输出流的对象.作用 ...

  9. ActiveMQ笔记(2)：基于ZooKeeper的HA方案

    activemq官网给出了3种master/slave的HA方案,详见:http://activemq.apache.org/masterslave.html,基于共享文件目录,db,zookeepe ...

  10. [LeetCode] Remove Invalid Parentheses 移除非法括号

    Remove the minimum number of invalid parentheses in order to make the input string valid. Return all ...