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. SQL Server读写分离实现方案简介

    读写分离是中型规模应用的数据库系统常见设计方案,通过将数据从主服务器同步到其他从服务器,提供非实时的查询功能,扩展性能并提高并发性. 数据库的读写分离的好处如下: 通过将“读”操作和“写”操作分离到不 ...

  2. Linux 查看命令源码

    一.简介 有时候想看看ls.cat.more等命令的源代码,本文介绍相应查看方法. 二.方法 参考: http://blog.csdn.net/silentpebble/article/details ...

  3. android存储方式的应用场景

    作为一个完整的应用程序,数据存储操作是必不可少的.因此,Android系统一共提供了四种数据存储方式.分别是:SharePreference.文件存储.SQLite. Content Provider ...

  4. ANSI Common Lisp Practice - My Answers - Chatper - 3

    Ok, Go ahead. 1 (a) (b) (c) (d) 2 注:union 在 Common Lisp 中的作用就是求两个集合的并集.但是这有一个前提,即给的两个列表已经满足集合的属性了.具体 ...

  5. openstack学习（一）kvm-libvirt

    准备工作: 操作系统:ubuntu 16.04 安装KVM Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的 ...

  6. 关于如何使用sourcetree将本地项目提交到远端github总结？

    使用sourcetree将本地项目提交到github里,目前来说还是很流行的,我也是听说好玩,所以来琢磨了一下,从环境搭建到配置好,差不多用了一下午加一晚上的时间,有点虐心,好吧,废话不多说,介绍一下 ...

  7. Python 【第十一章】 Django模版

    1.直接传值 urls.py """mysite URL Configuration The `urlpatterns` list routes URLs to view ...

  8. [LeetCode] Frog Jump 青蛙过河

    A frog is crossing a river. The river is divided into x units and at each unit there may or may not ...

  9. [LeetCode] Reverse String 翻转字符串

    Write a function that takes a string as input and returns the string reversed. Example: Given s = &q ...

  10. 2016第三届C++大会参会感悟（上）

    继05年第一届C++大会,09年第二届,2016年10月28日-29日,在上海举行第三届C++大会.讲师主要有C++之父 / Bjarne Stroustrup,前Facebook研究科学家 / An ...