html5表单重写
html5表单重写
一、总结
一句话总结:
表单重写用于在提交按钮上指定表单提交的各种信息,比如action
<input type="submit" value="提交到地址1" formaction="L3_02.html">
1、表单重写实例(更改表单的action)?
<input type="submit" value="提交到地址1" formaction="L3_02.html">
2、表单提交可以更改哪些属性?
formaction formenctype formmethod formnovalidate formtarget
表单重写属性适用于提交按钮(input的button和直接的button都可以)
formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性
二、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表单重写的更多相关文章
- HTML5学习总结-05 HTML5表单
一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...
- HTML5表单学习笔记
表单在网页设计中的作用非常重要,HTML5又增加了表单方面的诸多功能,包括增加input输入类型,input属性,form元素,form属性等,解决了我们以前比较头疼或者繁琐的功能. 新增的输入类型 ...
- IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1
HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1 autocomplete属性 autocomplete属性规定form或inp ...
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
- html5表单验证
表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html ...
- Ideal Forms – 帮助你建立响应式 HTML5 表单
Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...
- html5 表单样式 表单验证1 2 3
html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- HTML5跨浏览器表单及HTML5表单的渐进增强
HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...
- HTML5表单提交和PHP环境搭建
HTML5表单提交相关内容和PHP环境搭建需要的软件(只备注) (2)举例介绍 (3)PHP环境搭建
随机推荐
- iview表单数字验证
sort: [ {required: true, message: '请填写栏目排序', trigger: 'blur'}, {type: 'number', message: '请输入数字', tr ...
- 微信支付接口--超详细带注释代码--Demo
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 如果对你有帮助的话麻烦点个[推荐]~最好还可以follow一下我的GitHub~感谢观看! 微 ...
- TableCache设置过小造成MyISAM频繁损坏 与 把table_cache适当调小mysql能更快地工作
来源: 前些天说了一下如何修复损坏的MyISAM表,可惜只会修复并不能脱离被动的境地,只有查明了故障原因才会一劳永逸. 如果数据库服务非正常关闭(比如说进程被杀,服务器断电等等),并且此时恰好正在更新 ...
- c++第四次作业
继承与派生--访问控制 一.知识要点 (一)知识回顾: 基类的成员可以有public.protected.private三种访问属性.基类的自身成员可以对基类中任何一个其他成员进行访问,但是通过基类的 ...
- codevs 1341 与3和5无关的数
题目描述 Description 有一正整数a,如果它能被x整除,或者它的十进制表示法中某位上的数字为x,则称a与x相关.现求所有小于等于n的与3或5无关的正整数的平方和. 输入描述 Input De ...
- 《你说对就队》第九次团队作业:【Beta】Scrum meeting 1
<你说对就队>第九次团队作业:[Beta]Scrum meeting 1 项目 内容 这个作业属于哪个课程 [教师博客主页链接] 这个作业的要求在哪里 [作业链接地址] 团队名称 < ...
- Python开发笔记之-字符串函数
1.首字母大写 >>> s = 'yuanzhumuban' >>> s.capitalize() 'yuanzhumuban' 2.replace,替换 > ...
- oracle删除重复数据,只保留一条
比如,某个表要按照id和name重复,就算重复数据 delete from 表名 where rowid not in (select min(rowid) from 表名 group by id,n ...
- 题解 UVa10943
题目大意 多组数据,每组数据给定两个整数 \(n,k\),求出用 \(k\) 个不超过 \(n\) 的数相加得到 \(n\) 的方案数(不同顺序不算同种). 分析 计数水题.令 \(f_{i,j}\) ...
- 什么是 socket?简述基于 tcp 协议的套接字通信流程?
Socket的英文原义是"孔"或"插座".通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄, 可以用来实现不同虚拟机或不同计 ...