本节讲的是表单元素的form,formaction属性，frommethod,formenctype属性，formtarget,autofocus属性，required,labels属性。

1、form属性

在html4中，表单内的从属元素必须书写在表单内部，而在html5中，可以把他们书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以指定该元素从属于指定表单了。

以往的写法：

  1.  <body>
  2.      <form id="testform">
  3.          <input type="text"></input>
  4.          <textarea form="testform"></textarea>
  5.      </form>
  6.  </body>

现在则可以这样写，好处是为表单添加样式时会更方便：

  1.  <body>
  2.      <form id="testform">
  3.          <input type="text"></input>
  4.      </form>
  5.      <textarea form="testform"></textarea>
  6.  </body>

2、formaction属性

在html4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而在html5中，可以为所有的提交按钮增加不同的formaction属性，使单击不同的按钮时，可以将表单提交到不同的页面。

这里xxx1.jsp/xxx2.jsp/xxx3.jsp分别是是第一/二/三个服务器的地址。

  1.  <body>
  2.      <form id="testform">
  3.          <input type="submit" value="v1" name="s1" formaction="xxx1.jsp"></input>
  4.          <input type="submit" value="v2" name="s2" formaction="xxx2.jsp"></input>
  5.          <input type="submit" value="v3" name="s3" formaction="xxx3.jsp"></input>
  6.      </form>
  7.  </body>

3、formmethod属性

在html4中，一个表单内只能有一个actoin属性来对表单内的所有元素统一提交，所以每个表单内页只有一个method属性来统一指定提交方法。在html5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。

  1.  <body>
  2.      <form id="testform">
  3.          <input type="submit" value="v1" name="s1" formaction="xxx1.jsp" formmethod="post"></input>
  4.          <input type="submit" value="v2" name="s2" formaction="xxx2.jsp" formmethod="get"></input>
  5.      </form>
  6.  </body>

4、formenctype属性

在html4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前，应该如何对表单内的数据进行编码。在html5中，可以用formenctype属性，为表单的元素指定不同的编码方式。

text/plain：表单内的空格转换为加号，但不对表单内的特殊字符编码

multipart/form-data：不对文件进行编码，在使用包含控件时的表单时，必须使用该值

application/x-www-form-urlencoded：发送前编码所有字符；当表单action属性为get时，仍然用该编码方式把表单数据转换成字符

  1.  <body>
  2.      <form id="testform">
  3.          <input type="submit" formenctype="text/plain"></input>
  4.          <input type="submit" formenctype="multipart/form-data"></input>
  5.          <input type="submit" formenctype="application/x-www-form-urlencoded"></input>
  6.      </form>

5、formtarget属性

在html4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后，所需要加载的页面。在Html5中，可以对多个提交按钮分别使用formtarget属性来分别指定。

formtarget属性一共有5种：

_blank:在新的窗口打开

_self:默认值，在相同的框架打开

_parent:在当前框架的父框架打开

_top:在整个窗口中打开

framename:在指定框架中打开

  1.      <form id="testform">
  2.          <input type="submit" formtarget="_blank" ></input>
  3.          <input type="submit" formtarget="_self" ></input>
  4.          <input type="submit" formtarget="_parent" ></input>
  5.          <input type="submit" formtarget="_top" ></input>
  6.          <input type="submit" formtarget="framename" ></input>
  7.      </form>
  8.  </body>

6、autofocus属性

为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。

  1.  <body>
  2.      <form>
  3.          <input type="text"></input>
  4.          <input type="text" autofocus></input>
  5.      </form>
  6.  </body>

7、required属性

html5中新增加的required属性可以应用在大多数输入元素上，在提交时，如果元素中的内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。

  1.  <body>
  2.      <form action="xxx.jsp">
  3.          <input type="text" required="required"></input>
  4.          <button type="submit">提交</button>
  5.      </form>
  6.  </body>

8、labels属性

在html5中，为所有可使用标签的表单元素、button、select元素等，定义了一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。

  1.  <body>
  2.      <script type="text/javascript">
  3.          function Validate(){
  4.              var txtName = document.getElementById("txt_name");
  5.              var button =document.getElementById("btnValidate");
  6.              var form = document.getElementById("testform");
  7.              if (txtName.value.trim()=="") {
  8.                  var label = document.createElement("label");
  9.                  label.setAttribute("for","txt_name");
  10.                  form.insertBefore(label,button);
  11.                  txtName.labels[1].innerHTML="请输入姓名";
  12.                  txtName.labels[1].setAttribute("style","font-size:9px;color:red");
  13.              }
  14.          }
  15.      </script>
  16.      <form id="testform">
  17.          <label id="label" for="txt_name">姓名：</label>
  18.          <input id="txt_name"></input>
  19.          <input type="button" id="btnValidate" value="验证" onclick="Validate()"></input>
  20.      </form>
  21.  </body>

[html5] 学习笔记-表单新增元素与属性的更多相关文章

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

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

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

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

  3. HTML5 学习笔记 表单属性

    HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...

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

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

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

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

  6. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  7. HTML学习笔记 表单元素

    <form></form>代表表单 action:往什么地方提交 method:提交方式  get显示提交(不安全)  post隐视提交(安全) 提交内容:  name=输入的 ...

  8. 【html5】html5学习笔记2--表单

    html5 新增输入类型 html5新增了 email.number.Date pickers (date, month, week, time, datetime, datetime-local) ...

  9. [html5] 学习笔记-改良的input元素种类

    在html5中,大幅度增加与改良了input元素的种类,可以简单的使用这些元素来实现之前需要JS脚本来实现的功能. 1.url类型.email类型.date类型.time类型.datetime类型.d ...

随机推荐

  1. LNMP的安装

    一.安装Linux 安装某个linux桌面版系统,基本是ubuntu即可. 安装必要的库,如:pcre.xml.openssl.zlib等,sudo apt-get install libpcre3 ...

  2. 改变导航栏title字体的大小和颜色

    方法一:自定义视图的方法 就是在导航向上添加一个titleView,可以使用一个label,再设置label的背景颜色透明,字体什么的设置就很简单了. //自定义标题视图 UILabel *title ...

  3. 3个人一起写的EI论文可以检索到啦~ --> Exploring the use of a 3D Virtual Environment in Chinese Cultural Transmission

    <a href='http://www.engineeringvillage.com/blog/document.url?mid=cpx_10ed754f14b5b7381b6M764b1017 ...

  4. 【repost】JS中的hook机制

    hook机制也就是钩子机制,由表驱动实现,常用来处理多种特殊情况的处理.我们预定义了一些钩子,在常用的代码逻辑中去适配一些特殊的事件,这样可以让我们少些很多if else语句.举个高考加分的例子,比如 ...

  5. double和real型有什么区别 [

    DOUBLE是双精度浮点数REAL  是实数类型,他包括 DOUBLE,SINGLE等类型

  6. PHPCMS快速建站系列之自定义分页函数

    内容分页的实现方法:{pc:content action="lists" catid="$catid" order="id DESC" nu ...

  7. SpringBoot JPA实现增删改查、分页、排序、事务操作等功能

    今天给大家介绍一下SpringBoot中JPA的一些常用操作,例如:增删改查.分页.排序.事务操作等功能.下面先来介绍一下JPA中一些常用的查询操作: //And --- 等价于 SQL 中的 and ...

  8. p4factory 解决“g++: internal compiler error: Killed (program cc1plus)” make error问题

    参考:解决: g++: internal compiler error: Killed (program cc1plus) 在安装p4factory的时候,执行: ./install_deps.sh ...

  9. windy数（bzoj 1227）

    Description windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道,在A和B之间,包括A和B,总共有多少个windy数? In ...

  10. UVa 10700 - Camel trading

    题目大意:给一个不含括号.只有+和*运算的表达式,数字的范围在1到20之间,算出计算结果的可能最大值和最小值. 贪心,如果加法优先级比乘法高,那么得出的结果为最大值.(a+b)*c = a*c + b ...