1.表单内元素的form属性
在html4中,表单内的从属元素必须书写在表单内部,
而在html5中,可以把他们书写在页面上任何地方,
然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于表单了。
<form id="testform">
     <input type="text">
</form>
<textarea form="testform"></textarea>
2.表单内元素的formaction属性
在HTML4中,一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面,
而在HTML5中可以为所有的提交按钮,增加不同的formaction属性,使单击不同的按钮时可以将表单提交到不同的页面。
<form id="testform">
     <input type="submit" name="s1" value="v1" formaction="1.jsp">提交到1.jsp页面
     <input type="submit" name="s2" value="v2" formaction="2.jsp">提交到2.jsp页面
     <input type="submit" name="s3" value="v3" formaction="3.jsp">提交到3.jsp页面
</form>
3.表单内元素的formmethod属性和formenctype属性
在html4中,一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面,
所以每个表单内页只有一个method属性来统一指定提交方法。在HTML5中,可以使用formmethod属性
来对每一个表单元素分别指定不同的提交方法。
<form id="testform">
     <input type="submit" name="s1" value="v1" formmethod="post" formaction="1.php">提交
     <input type="submit" name="s2" value="v2" formmethod="get" formaction="2.php">提交
</form>
4.表单内元素的formenctype属性
在html4中,表单元素具有一个enctype属性,该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。
在html5中,可以使用formenctyp属性对表单元素分别指定不用的编码方式。
<form id="formtest">
     <input type="text" formenctype="text/plain">
     (表单数据中的空格被转化成加号+,但不对表单中的特殊字符进行编码。)
     <input type="text" formenctype="multipart/form-data">
     (不对字符进行编码,在使用包含文件上传控件的表单时,必须使用该值)
     <input type="text" formenctype="application/x-www-form-urlencoded">
     (在发送前编码所有字符,当表单元素的formmethod属性给get时,浏览器则用当前的编码方式把表单数据转换成一个字符。)
</form>
5.表单内元素的formtarget属性
在html4中,表单元素具有一个target属性,该属性用于指定在何处打开表单提交后所需要加载的页面。
在html5中,可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。
_blank   新的窗口
_self     当前窗口
_parent    当前框架的父窗口打开
_top    当前窗口
framename   指定窗口
<form id="testform">
     <input type="submit" name="s1" formtarget="_blank" value="v1" formmethod="post" formaction="1.php">提交
     <input type="submit" name="s2" formtarget="_self" value="v2" formmethod="get" formaction="2.php">提交
</form>
6.表单内元素的autofocus属性
为文本框、选择框或按钮控件加上autofocus属性,当画面打开时,该控件自动获得光标焦点。
7.表单内元素的required属性
html5中新增的required属性可以应用在大多数输入元素上,在提交时,如果元素中内容为空白,则不允许提交,
同时在浏览器中显示信息提示文字。
<form action="123.php">
     <input type="text" required="required">
      <button type="submit">提交</button>
</form>
8.表单内元素的labels属性
在html5中,为所有可使用标签的表单元素,button、select元素等,定义一个labels属性,属性值为一个nodelist对象,
代表该元素所绑定的标签元素所构成的集合。
<form id="testform">
     <label id="label" for="txt_name">姓名:</label>
     <input id="txt_name">
     <input type="button" id="btnValidate" value="验证" onclick="Validate()">
</form>
<script>
function Validate(){
     var txtName=document.getElementById("txt_name");
     var button=document.getElementById("btnValidate");
     var form=document.getElementById("testform");
     if(txtName.value.trim()==""){
          var label=document.createElement("label");
          label.setAttribute("for","txt_name");
          form.insertBefore(label,button);
          txtName.labels[1].innerHTML="请输入姓名 ";
          txtName.labels[1].setAttribute("style","font-size:9px;color:red;");
     }
}
</script>
 
 

html5表单新增的元素与属性的更多相关文章

  1. [html5] 学习笔记-表单新增的元素与属性(续)

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  2. HTML5表单新增元素与属性

    form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...

  3. HTML5表单新增属性

    1.form 原来html里面,表单里的元素应该包裹在表单里,如 <form action="login.php" method="get"> &l ...

  4. IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1

    HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1  autocomplete属性 autocomplete属性规定form或inp ...

  5. html5表单新增元素与属性2

    1.标签的control属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. <script> function setValue() ...

  6. HTML5 表单新增元素与属性

    1 form 属性和 formaction 属性 本课时讲解在 HTML4 中,表单内的从属元素必须书写在表单内部,而在 HTML5 中,可以把他们书写在页面上任何地方,然后为该元素指定一个 form ...

  7. HTML5 表单新增属性

    1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...

  8. IT兄弟连 HTML5教程 HTML5表单 新增的表单属性3

    9  novalidate novalidate是属性规定在提交表单时不应该验证form和input域.novalidate属性适用于的<input>类型有:text.search.url ...

  9. HTML5 表单新增内容

    一.H5 新增控件 1.datalist 元素 datalist 标签定义选项列表,请与 input 元素配合使用该元素.可为输入框提供一个可选的列表,可以直接选择列表项,也可以不选择列表中的项,自行 ...

随机推荐

  1. ad广告下拉收起代码

    1. [代码][JavaScript]代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  2. Oracle备份与恢复:冷备份恢复

    模拟数据库数据文件丢失的情况下,通过丢失之前的数据文件物理备份做恢复: 说明:数据文件丢失前一刻的所有归档日志都存在. 环境:oracle10g +rhel5 1.关闭数据库,copy system0 ...

  3. django错误 - Reason given for failure: CSRF cookie not set.

    练习Django表单提交时遇到如下问题: 在网上各种查找,终于找到了解决方法. 1.在from 表单中添加 {% csrf_token %} 2.在视图中添加 from django.template ...

  4. 前端CSS规范整理

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...

  5. [Selenium] Selenium WebDriver 的下载和安装

    为配合较为广泛使用Java 语言的程序员,仅以WebDriver 的Java语言绑定进行讲解. 步骤1:下载并安装Java开发环境 1)在系统中安装JDK(Java开发工具吧,Java Develop ...

  6. PostgreSQL新手教程

    自从MySQL被Oracle收购以后,PostgreSQL逐渐成为开源关系型数据库的首选. 本文介绍PostgreSQL的安装和基本用法,供初次使用者上手.以下内容基于Debian操作系统,其他操作系 ...

  7. DDK编写64位驱动时加入x64汇编的方法

    上篇讲了如何在编写x64应用程序时加入x64汇编,这里来说说如何在编写x64驱动时加入x64汇编. 一.在asm文件中单独编写功能函数 比如要实现一个64位的加法函数,原型如下: ULONG64 my ...

  8. Java调用未被Static修饰的本类方法

    public class Dy { public static void main(String[] args){ int a=6; int b=5; int result=0; Dy dy=new ...

  9. 用ffmpeg命令将264裸码流封装成mp4(转载)

    转自:http://bbs.csdn.net/topics/370256130 ffmpeg -f h264 -i source.264 -vcodec copy out.mp4

  10. 利用ffmpeg0.6.1把.h264纯码流打包成.mp4 .avi等格式 (转载)

    转自:http://cache2.weidaohang.org/h/index.php?q=aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemh1cWluZ183MzkvYXJ0aWNsZS ...