• 霸气側漏的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框架中的几乎相同。

    来两张效果图吧:


    只是现阶段,html5在各大浏览器中的显示效果还不是非常好,笔者測试的ie11,火狐,chrome中,chrome的效果最好。基本都能显示,ie11和火狐略差,希望各大浏览器能尽快适应html5的所有功能啊,那绝对是前端程序猿的福音啊。

  • 相关阅读:
    js数组合并
    火狐浏览器打开新标签不断刷新,怎么解决?
    python获取当前路径
    python模块os
    python模块sys
    python玩丢手绢问题,出局的顺序
    python list元素为dict时的排序
    利用等概率Rand5产生等概率Rand3(转)
    python垃圾回收机制(转)
    负数在计算机中如何表示?(转)
  • 原文地址:https://www.cnblogs.com/lytwajue/p/6940129.html
Copyright © 2020-2023  润新知