html5--3.17 新增的表单重写

学习要点

  • 对form元素的属性做一个小结，对个别属性进行一点补充
  • 重点掌握新增的表单重写

form元素的属性小结

    • action/method/enctype/name/accept-charset/accept/target/autocomplete/novalidate
    • accept属性：（仅作了解）指定服务器处理表单时所能接受的数据形态，一般默认即可
    • accept-charset: （仅作了解）指定表单处理数据时所能接受的字符编码
    • target属性:指定在何处打开action属性所指定的URL目标
    • enctype属性：(了解即可)规定在发送到服务器之前应该如何对表单数据进行编码。
      • 当method设定发送方式为get时，不必设置该属性；
      • 当method设定发送方式为post时该属性才有效；
      • 默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。
      • 当值设为"multipart/form-data"时表示：不对字符编码。在使用包含文件上传控件的表单时（比如当input的type值为file时），必须使用该值。
      • text/plain:空格转换为 "+" 加号，但不对特殊字符编码。
    • 表单的重写：重写 form 元素的某些属性设定。

表单重写属性适用于提交按钮（input的button和直接的button都可以）

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

button元素

    • 用来建立一个按钮从功能上来说，与input元素建立的按钮相同
    • button元素是双标签，其内部可以配置图片与文字，进行更复杂的样式设计
    • 不仅可以在表单中使用，还可以在其他块元素和内联元素中使用
  • button元素的属性
    • type属性：可以设置三个值 submit/reset/button与input元素设置的按钮含义相同
    • name/vlue/disable属性：与input的用法相同
    • autofocus属性：设置按钮自动获得焦点。
    • form属性：设定按钮隶属于哪一个或多个表单
    • formmethod属性：设定表单的提交方式，将覆盖原本的提交方式
    • formnovalidate属性：设定表单将会覆盖原本的novalidate属性
    • fomaction属性：指定表单数据发送对象，将覆盖原来的action属性设定
    • formenctype属性;指定表单的数据发送类型，将覆盖原本的enctype属性设定
    • formtarget属性：将覆盖原本的target属性设定

重要事项：如果在表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 button元素开始标签与结束标签之间的文本，而其他浏览器将提交 value 属性的内容。最好就是在表单中使用 input 元素来创建按钮。其他地方使用button创建按钮

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

     <p style="color:#FF0000">

     </p>

     <form action="L3_01.html" method="get" >

         用户名：<input type="text" name="name" size="30"><br><br>

         意见：<textarea name="textarea" id="" cols="30" rows="5" placeholder="请输入您的意见，谢谢！！" style="background: #F0FFFF"></textarea><br>

         <h2 style="color:#FF0000">表单重写属性适用于提交按钮</h2>

         <p style="color:#FF0000">

             formaction - 重写表单的 action 属性<br>

             formenctype - 重写表单的 enctype 属性<br>

             formmethod - 重写表单的 method 属性<br>

             formnovalidate - 重写表单的 novalidate 属性<br>

             formtarget - 重写表单的 target 属性<br>

         </p>

         <br><input type="submit" value="提交到地址1" formaction="L3_02.html"> <input type="reset"><br>

         <br><input type="submit" value="提交到地址2" formaction="L3_06.html"> <input type="reset"><br>

         <br><input type="submit" value="提交到地址3" formaction="L3_07.html"> <input type="reset"><br>

 <!--

         <br><button type="submit" style="background: #FFF0FF;border-radius: 10px;padding: 10px"><img src="pen.jpg" alt="" width="12px">提交</button>

         <button type="reset" style="background: #FFFFF0;border-radius: 10px;padding: 10px">重置</button><br>

 -->

     </form>

 <body>

 </body>

 </html>

html5--3.17 新增的表单重写的更多相关文章

  1. Html5中input新增的表单元素和属性介绍。

    input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...

  2. HTML5中input新增类型+表单新增属性+其他标签属性

    @ (猴头) Input 新增属性 email  邮箱(只在手机端有效) url  网址(只在iphone手机有效) tel  手机号(只在手机端有效) number  数字(右侧有上下按钮,只能输入 ...

  3. html5表单重写

    html5表单重写 一.总结 一句话总结: 表单重写用于在提交按钮上指定表单提交的各种信息,比如action <input type="submit" value=" ...

  4. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

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

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

  6. 读书笔记：《HTML5开发手册》Web表单

    这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四 ...

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

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

  8. html5图片异步上传/ 表单提交相关

    1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...

  9. HTML5+CSS：02用户注册表单

            新的学期已开始接近两个月了,还记得是在国庆节那几天申请的博客账号,可过了一个月都还没开始写博客,(>_<)有点小偷懒了,不过,学习还是不能落下的,今写一个有点实践运用的关于 ...

随机推荐

  1. JVM类加载机制————2

    类加载机制的第一个阶段加载做的工作有: 1.通过一个类的全限定名(包名与类名)来获取定义此类的二进制字节流(Class文件).而获取的方式,可以通过jar包.war包.网络中获取.JSP文件生成等方式 ...

  2. Java-线程池总结

    线程池的优点: 重用线程,减少线程创建和销毁的性能开销. 管理线程,并提供定时执行以及指定间隔循环执行等功能. Android中的线程来源于Java中的Executor,实现类是ThreadPoolE ...

  3. springboot配置filter

    Filter 过滤器是web开发中很重要的一个组件,下面以一个session登陆的例子介绍下spring boot中如何使用Filter 首先要准备一个实现了Filter的接口的类 SessionFi ...

  4. Android Base64转图片

    最近做一个项目里面有关于图片展示的需求,但是任性的后台跟我说没有图片服务器,只能给我base64让我自己转成图片,好吧,我忍,转就转吧.. 首先第一步咱还是谦虚点上百度查查别人咋转的,结果似乎各位码友 ...

  5. 讯飞语音识别Android-Demo

    import java.io.UnsupportedEncodingException; import android.app.Activity; import android.os.Bundle; ...

  6. Android 蓝牙 笔记

    安卓:短信复制机制 软件识别蓝牙 软件可以读取蓝牙的信息 给蓝牙弄上一个类似于短信的东西 并且存一个短信 然后发到客户端 客户端 可以分类  分成表格 形式 这样做的目的是为了 让你的设备可以写蓝牙给 ...

  7. 在Intellij上面导入项目 & AOP示例项目 & AspectJ学习 & Spring AoP学习

    为了学习这篇文章里面下载的代码:http://www.cnblogs.com/charlesblc/p/6083687.html 需要用Intellij导入一个已有工程.源文件原始内容也可见:link ...

  8. Examples osgparticleshader例子学习

    Examples osgparticleshader  粒子与shader的使用 参考文档 http://blog.csdn.net/csxiaoshui/article/details/234345 ...

  9. solaris软件管理 FTP

    安装一些常用软件 一.应用程序与系统命令的关系: 系统命令文件位置在 /bin /sbin下面或为shell内部指令:完成对系统的基本管理工作:一般在字符操作界面中运行:一般包括命令字.命令选项和命令 ...

  10. SpringMVC：走通一个SpringMVC

    我们现在使用SpringMVC来做一个小的用户管理系统,由于重点在学习SpringMVC,这里我们就不用数据库了. 该小系统实现的功能是:1.登录,不做用户名密码的正确性判断,任何用户名+密码都可以成 ...