跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性

这节课给大家补充一下,一些 前些课程没有接触的知识。

在XHTML中,表单内的从属元素必须书写在表单内部,但是在HTML5中,可以把他们书写在页面上任何地方,然后给元素制定一个form属性,属性值为该表单单位的id,这样就可以声明该元素从属于指定表单了。

这个我想对于我们来说,应该是个很新奇的玩意吧

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>form属性</title>
    </head>
    <body>
        <form action="" id="testform">
            <input type="submit" value="提交" />
        </form>
            <input type="email" name="email"  form="textform"/>
    </body>
</html>

这样做的好处是当需要给页面中的元素添加样式时可以更方便地添加,因为它们不是被分散在各表单之内的了。

表单重写属性(form override attributes)允许您重写 form 元素的某些属性设定。

表单重写属性有:

  • formaction -          重写表单的 action 属性
  • formenctype -      重写表单的 enctype 属性
  • formmethod -      重写表单的 method 属性
  • formnovalidate -  重写表单的 novalidate 属性
  • formtarget -         重写表单的 target 属性

注释:表单重写属性适用于以下类型的 <input> 标签:submit 和 image。

拿第一个举例子来说,formaction  可以重写,也就是说,我们在一个表单中,可以把这个表单提交到不同的页面中去。是不是很强大啊。

    <form action="1.html" id="testrorm">
        <input type="submit" value="提交到1" formaction="1.html" />
        <input type="submit" value="提交到2"  formaction="2.html" />
        <input type="submit" value="提交到3"  formaction="3.html" />
    </form>

哈哈,太棒了,以前想都不敢想啊。

placeholder属性

这个就是提示文本了            <input type="text" placeholder="提示文本" />

autofocus属性

给文本框,选择框或按钮控件加上该属性。当页面加载时,该控件自动获取光标焦点。目前为止要做到这一点需要使用JavaScript。

autocomplete属性

以前的课程也接触过了 ,是一种自动完成的属性

max/min/step属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。

max 属性规定输入域所允许的最大值。

min 属性规定输入域所允许的最小值。

step 属性为输入域规定合法的数字间隔

height 和 width 属性

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。

height 和 width 属性只适用于 image 类型的 <input> 标签。

multiple 属性

multiple 属性规定输入域中可选择多个值。

注释:multiple 属性适用于以下类型的 <input> 标签:email 和 file。

这个需要配合什么datalist 使用了

pattern 属性

pattern 属性规定用于验证 input 域的模式(pattern)。 值当然是正则表达式了。

required 属性

required 属性规定必须在提交之前填写输入域(不能为空)。【传说中的非空验证】

好了,到现在位置,基本上我们对HTML5已经有了一个比较深刻的了解了,哈哈,剩下的就是我们的应用喽。

时间: 2024-11-23 16:21:23

跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性的相关文章

html5新增表单元素和属性

从三方面来介绍html5表单的新特性表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body><form action="upload.php" method="post" accept-charset="utf-8" id="form1"&g

疯狂的表单-html5新增表单元素和属性

疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body> <form action="upload.php" method="post" accept-charset="utf-8&

HTML5初探——新增的表单元素和属性

HTML5初探--新增的表单元素和属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 移动Web开发指南</title> <style type="text/css"> h1, h2, h3, h4, h5, h6 { text-align: center; } input { width: 4

HTML5初步——新的表单元素和属性

HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 移动Web开发指南</title> <style type="text/css"> h1, h2, h3, h4, h5, h6 { text-align: center; } input { width: 45

html5——表单元素和属性

html使用表单向服务器提交请求,表单控件的主要作用就是收集用户的输入,当用户提交表单时,用户输入内容将被作为请求参数提交到远程服务器上 html原有的表单及表单控件 form属性 说明 action 指定当单击表单的确认按钮,该表单被提交到哪个地址,可以是相对/绝对地址 method 指定提交表单时发送何种类型的请求 属性值可以为get post enctype 对表单内容进行编码所使用的字符集 name 指定表单的唯一名称,建议该属性值与id属性值保持一致 target 使用哪种方式打开目标

Jquery学习笔记:操作form表单元素之二(复选框和单选框)

在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="item" checked> 全选</label> 注意,input标签要放在label标签内,这样点击文字时也会有反映. 如果选中了,调用  $("#item").prop("checked")返回true,否则返回false 同样利用pro

(二十二)Struts2 表单标签

表单标签列表是Struts UI标签的子集.这些标签有助于渲染Struts Web应用程序所需的用户界面,主要分为三类,本章将介绍这三种类型的UI标签: 简单UI标签 我们其实已经在前面的示例中使用了这些标签,接下来将在本章中重新回顾一下.以下是一个简单的视图页面email.jsp与几个简单的UI标签: <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncodi

HTML5的form表单属性

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

HTML5 学习笔记(二)——HTML5新增属性与表单元素

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由