html5中新增的form表单属性

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>

时间: 2024-10-12 04:24:47

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

HTML5的form表单属性

form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为form表单的id属性值即可,表单form与从属元素的从属关系依然有效, like this: <form id="log"> <input type="submit"> </form> <input type="sub

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

一.Form介绍 普通方式注册功能实现 views.py # 注册 def register(request): error_msg = "" if request.method == "POST": username = request.POST.get("name") pwd = request.POST.get("pwd") # 对注册信息做校验 if len(username) < 6: # 用户长度小于6位 e

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

相同name的submit 类型的input提交行为 描述 这种情况, <input type="submit" name="ACTION" value="Apply"/> <input type="submit" name="ACTION" value="Cancel"/> 其能够作为提交内容, 发送到服务器段的参数的按钮, 对应被点击激活的按钮. 这表示多个

知识总结之form表单属性及H5新增特性

一.form的几大属性 1.method属性 规定用于发送 form-data 的 HTTP 方法,即请求的方式:主要用来提交参数与后台数据进行交互. 分为GET和POST两种方式,GET请求时将请求的参数直接拼接在请求路径的后面,显示在地址栏,相比POST不太安全. 2.action属性 指定请求路径的具体地址. 3.target属性 规定在何处打开 action URL: _blank:在新的浏览器窗口中打开 _parent:在父级浏览器窗口中打开 _self:在当前窗口打开 _top:在顶

html5 引入什么新的表单属性

form可以理解为一个框, 然后把所有的input放在里面, form的属性action表示 你要处理表单内容的那个后端页面,一般是php或asp的: method属性,表示发送请求的方法,包括get和post两种, post加密,无字节限制. 由于实际开发中一个页面的input内容

bootstrap中的 form表单属性role=&quot;form&quot;有什么作用?

html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性.role的作用是描述一个非标准的tag的实际作用.比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button比如,<div role="checkbox" aria-checked="chec

fsLayuiPlugin数据表格弹出form表单说明

fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环境地址:http://fslayui.itcto.cn css和js引用 公共css和js必须全部引用 <!-- layui css --> <link rel="stylesheet" type="text/css" href="/plug

Form表单中的action路径问题,form表单action路径《jsp---&gt;Servlet路劲问题》这个和上一个《jsp---&gt;Servlet》文章有关

Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com  网友分享于:  2014-08-14 08:08:01     浏览数44525次 Form表单中的action路径问题,form表单action路径 今天刚接触web,在用jsp和servlet做一个简单的登陆的时候在Form表单action属性和method属性的一些问题: 我遇到的是Form表单提交到servelet处理时遇到的问题: (1)<form name="l

通过js,修改所有form表单,提交JSON格式的数据

直接上代码 <script>$(function(){ //获取网页中所有的form表单 $("form").each(function(){ //注册表单的提交事件 $(this).submit(function(event) { //屏蔽表单的注册 event.preventDefault(); //获取url var url = $(this).attr("action"); request(url, 'POST', JSON.stringify(