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. Maven详解

    一.前言     以前做过的项目中,没有真正的使用过Maven,只知道其名声很大,其作用是用来管理jar 包的.最近一段时间在项目过程中使用Maven,用Maven构建的web项目,其项目结构只停留在 ...

  2. JAVA NIO Channel

    Basic:   多数通道都是链接到开发的文件描述符的.Channel类提供维持平台独立性的抽象过程.   通道是一种途径,访问和操作操作系统,缓冲区是数据操作点: Channel类继承结构图: 通过 ...

  3. jQuery 获取 radio 选中后的文字

    如果html为 <input type="radio" id="test" name="test" value="1&quo ...

  4. 《Ansible权威指南》笔记（3）——Ad-Hoc命令集，常用模块

    五.Ad-Hoc命令集1.Ad-Hoc命令集通过/usr/bin/ansible命令实现:ansible <host-pattern> [options]    -v,--verbose  ...

  5. WPF 自定义搜索框

      控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1.先定义一个Rectangle作为背景 2. ...

  6. MyBatis源码分析-MyBatis初始化流程

    MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以对配置和原生Map使用简 ...

  7. 简单深入SpringMvc

    简单深入SpringMvc 一.如何让一个普通类成为Controller? 方案一:实现接口Controller解析:handleRequest(request,response) 方案二:继承Abs ...

  8. 解决IE浏览器文字上面放无内容的元素选不中的方法

    <div class="md1"> <p><i>sdgsgereryeryery</i></p> <label c ...

  9. Spring 下默认事务机制中@Transactional 无效的原因

    Spring中 @Transactional 注解的限制1. 同一个类中, 一个nan-transactional的方法去调用transactional的方法, 事务会失效 If you use (d ...

  10. pcl曲面重建模块-poisson重建算法示例

    poisson曲面重建算法 pcl-1.8测试通过 #include <iostream> #include <pcl/common/common.h> #include &l ...