霸气側漏的HTML5--之--强大的form表单
今天学习了一下html5,发现他真的太强大了,暂不说新增的画布,通信,本地存储等的炸天功能,就连表单也是异常的好用。忍不住发一篇博客和大家分享一下。原谅我标题党了。以后的html5的学习记录博文就以“霸气側漏的html5...”为题了。哈哈哈。
曾经html4中的表单非常easy。一个表单相应一个action。仅仅能传一个url,要是想传多个的话用javaScript+ajax的方式倒也能够,只是代码就非常罗嗦了。
并且表单验证什么的都要在js里面写,当然用前台框架的话验证可能会非常easy,也就一句话的事情,但却避免不了浏览器载入慢等等的问题。所以曾经的html4的表单实际使用的时候非常依赖js,用起来不是非常方便。
如今好了,html5告诉我们能够不用那么依赖js了,种种问题自己都能够攻克了。
首先介绍一下 form表单相关的新增的属性:
1、form属性。
html4的表单属性必需要写在表单的里面,但在html5中,属性能够声明在不论什么地方。这样就能够统一管理表单,想要加入的时候像加样式表一样方便了。使用例如以下:
<form id = "testform">
<textarea form="testform"></textarea>
2、formaction和formethod属性
这两个新属性实现了form表单action的多向跳转。formaction属性值为跳转路径,formmethod属性值是get or post方式。例如以下例:
<form id = "testform" action="1.jsp" method="post">
<input type = "submit" name="s1" value="v1" formaction="2.jsp">提交到s1
<input type = "submit" name="s2" value="v2" formaction="3.jsp">提交到s2
<input type = "submit" name="s3" value="v3" formaction="4.jsp">提交到s3
<input type = "submit">
</form>
3、placeholder属性
文本框未输入前提示文字,属性值为提示内容。
4、autofocus
输入框自己主动获取焦点。
<input type="text" placeholder="请输入username" autofocus>
5、关于input添加的属性:
input标签添加了大量的type种类,并进行自己主动验证。如email,url,numble,空....等
不须要在使用js自己写提交验证了。方便了很多,笔者最喜欢这个功能了,假设认为它给了验证错误信息
不人性化的话。也能够自己在js中改动。大概和改UI框架中的几乎相同。
来两张效果图吧:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZnJpZ2h0aW5nZm9yYW1iaXRpb24=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
只是现阶段,html5在各大浏览器中的显示效果还不是非常好,笔者測试的ie11,火狐,chrome中,chrome的效果最好。基本都能显示,ie11和火狐略差,希望各大浏览器能尽快适应html5的所有功能啊,那绝对是前端程序猿的福音啊。
霸气側漏的HTML5--之--强大的form表单的更多相关文章
- html5中新增的form表单属性
html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...
- html5之table嵌入form表单布局(务必注意:table标签必须在form表单内部,不能再form表单外部!)
切记:用table标签来布局form表单元素,table标签必须放在form表单内部,否则可能会出现各种bug 原文地址:https://blog.csdn.net/weixin_43343144/a ...
- html5图片异步上传/ 表单提交相关
1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...
- HTML5的form表单属性
form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...
- 读书笔记:《HTML5开发手册》Web表单
这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四 ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
- # 详细了解HTML5中的form表单
4.规范使用 <form>元素用于组织所有表单部件(也称为控件或字段),负责告诉浏览器把数据提交到哪里,方法是在action属性中提供一个URL.加入你只是想在客户端使用JavaScrip ...
- Html5中input新增的表单元素和属性介绍。
input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...
- HTML5 web Form表单验证实例
HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...
随机推荐
- InnoDB锁机制之Gap Lock、Next-Key Lock、Record Lock解析
InnoDB锁机制之Gap Lock.Next-Key Lock.Record Lock解析 有意思,解释的很好
- HTML中的行级标签和块级标签 《转换》
1.html中的块级标签 显示为“块”状,浏览器会在其前后显示折行.常用的块级元素包括: <p>, <ul>,<table>,<h1~h6>等. 2.h ...
- spring 415
不支持的媒体类型 spring mvc 使用@requestBody注解json请求时,jQuery有限制,否则会出现 415 错误 1.使用ajax $.ajax({ ...
- 清除Linux系统多余引导选项
由于我把系统给升级(update)了,在grub引导模式出现新旧版本(Grub与Grub2)的引导系统分别为正常启动和进入恢复模式各2个引导项,如下图显示:百度找不到相关或类似的教程,只好半夜起来研究 ...
- day07-列表类型/元组类型/字典类型/集合类型内置方法
目录 列表类型内置方法 元组类型内置方法 字典类型内置方法 集合类型内置方法 列表类型内置方法 用来存多个元素,[]内用逗号隔开任意数据类型的元素 1. list()强制类型转换 print(list ...
- Python 之web动态服务器
webServer.py代码如下: import socket import sys from multiprocessing import Process class WSGIServer(obje ...
- java关于工作,跳槽之总结
关于工作中: 如何展示自己项目中的亮点,技术或者难点: 总结我的经历和技术倒是可以,但是我做的项目和我会的技术都很平庸,实在找不到亮点怎么办? 如果知道了你没有亮点,也就是知道了你自己欠缺什么,那么下 ...
- python学习笔记--关于函数的那点事1
函数参数 1.位置参数 类似于java函数的基本参数,按照顺序和结构定义参数 2.默认参数 def method(param,defaultParam=defaultValue) 调用时,可以调用me ...
- join 和 left join 和 right join的区别?
join等价于 inner join 是内连接 ,返回两个表都有的符合条件的行. left join 是左连接,返回坐表中所有的行以及右表中符合条件的行. right join右连接,是返回右表中所有 ...
- Shell 脚本编程 基本语法:
Shell 脚本编程语法: 注: 文章来源 http://www.cnblogs.com/yunquan/p/6821850.html 视频来源:https://www.bilibili.com/vi ...