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. Python：版本升级

    Linux 上安装的python版本是2.6.6,不能满足我运行软件的要求,所以对python进行升级.现在要了解MySQL Fabric,需要使用Python 2.7,所以只能对现有版本进行升级了. ...

  2. mysql 5.6.24安装实例

    安装前准备工作: 1)编辑PATH路径 vim /etc/profile PATH=/home/mysql/bin:/home/mysql/lib:$PATH export PATH 2)生效PATH ...

  3. jsmooth compilation failed error null

    JSmooth 0.9.9-7 在将 jar 文件打包成 exe 文件时报错:jsmooth compilation failed error null 原因,没有指定 logo 图片文件. http ...

  4. 数据结构（c语言）之学生信息管理系统

    程序思维导图 代码表示(代码参考:长春大学-牛言涛老师) 如有错误请指出欢迎交流 #include<stdio.h> #include<malloc.h>//动态存储分配函数头 ...

  5. 1-ser2008系统封装实验报告

    系统封装实验 1.       封装系统的原因 直接克隆系统会导致克隆后的系统和原系统的SID号一致,在许多实验中会因为SID号相同而影响实验效果(如活动目录) 2.       实验 首先看一下se ...

  6. android Broadcast广播消息代码实现

    我用的是Fragment , 发送写在一个类中,接收写在另外一个类的内部类中.代码动态实现注册. 代码: myReceiver = new zcd.netanything.MyCar.myReceiv ...

  7. 怎么知道Fragment属于哪个Activity呢？

    如果程序是一条线运行的,Fragment 中 getActivity() 是获取的上一个打开或者执行的Activity中的值.   多个Activity也是如此,就看顺序是怎么执行的,getActiv ...

  8. 连载《一个程序猿的生命周期》-《发展篇》 - 3.农民与软件工程师，农业与IT业

    相关文章:随笔<一个程序猿的生命周期>- 逆潮流而动的“叛逆者”        15年前,依稀记得走出大山,进城求学的场景.尽管一路有父亲的陪伴,但是内心仍然畏惧.当父亲转身离去.准备回到 ...

  9. jsp基础

    1.1动态页面 动态页面的优势: 1.交互性:网页会根据用户的要求和选而动态改变和显示内容; 2.自动更新:无需改变页面代码,便会自动更新的页面内容; 3.随机性:当不同的时间,不同的人访问同一网址时 ...

  10. font-size 兼容问题

    早年~ 楔子 在为“我的抵扣券”添加  按钮时,为了将文字隐掉,给节点设置了“font-size:0;”,设置后刷一下浏览器,webkit下按钮掉下去了,而其他浏览器(包括IE6/7)都正常: 按理说 ...