文档章节

HTML5表单那些事

Timothy六金
 Timothy六金
发布于 2016/06/13 10:20
字数 886
阅读 11
收藏 0
//一般写法
<form method="post" action="http://xxx:port/form"></form>

//高级一点的写法:在header中添加一行base元素
//base元素用于设置表单数据的发送目的地,这个base元素将会影响该页面所有的相对URL,而不只是form元素。
<head>
    <base href="http://xxxx:port"/>
</head>
<body>
    <form method="post" action="/form">
            //code
    </form>
</body>


//form表单的数据编码方式,enctype属性
application/x-www-form-urlencoded:在不设置enctype的情况下,默认的enctype属性,不能用于将文件上传到服务器。
multipart/form-data:用于将文件上传到服务器。
text/plain:chrome中使用与application/x-www-form-urlencoded方案一样,现在并没没有确定应该如何编码。总之不要用这种方式就ok。

//form表单的autocomplete自动完成属性,autocomplete属性有两个值:on/off
//表单禁止自动完成功能
<form autocomplete="off"></form>
//表单的其他元素禁止autocomplete属性,指定的元素开启自动完成属性。
<form autocomplete="off">
    <input type="text" autocomplete="on"//虽然form表单是off,但是input元素是on。
</form>

//form表单的名称定义用name,用来给表单设置一个独一无二的标识符,以便使用DOM时区区分各个表单。
//name属性与全局适应id不是同一回事,后者多用于CSS选择器。
<form name="fruitvote" id="fruitvote" method="post" action="http://xxxx:port/form>

</form>

//label属性:form表单中的label元素的for属性通常和input元素的id属性一一对应,这样即可将label和input元素关联起来。
//有助于屏幕阅读器和其他残障辅助技术对表单的处理。
<form>
    <p><label for="fave">Fruit:<input id="fave" name="fave/></label></p>
</form>

//form表单的自动聚焦到某个input元素,浏览器一打开就会聚焦于第一个输入的元素。当多个input元素都使用autofocus属性的时候。
//浏览器自动聚焦于其中的最后一个元素。
<form method="post" action="http://www.baidu.com">
        <p>
            <label for="fave">Fruit:<input autofocus id="fave" name="fave"></label>
        </p>
        <p><label for="name">Name:<input id="name" name="name"></label></p>
        <button>Submit</button>
</form>

//禁用表单元素用disable
//对表单元素进行编组
<form>
        <fieldset>
            <p><label for="name"><input name="name" id="name"></label></p>
            <p><label for="fave"><input name="fave"></label></p>
        </fieldset>
        <fieldset>
            <p><label for="name"><input name="name" id="name"></label></p>
            <p><label for="fave"><input name="fave"></label></p>
        </fieldset>
</form>

//为分组添加说明,使用legend元素
<form>
        <fieldset>
            <legend>fieldset1</legend>
            <p><label for="name"><input name="name" id="name"></label></p>
            <p><label for="fave"><input name="fave"></label></p>
        </fieldset>
        <fieldset>
            <legend>fieldset2</legend>
            <p><label for="name"><input name="name" id="name"></label></p>
            <p><label for="fave"><input name="fave"></label></p>
        </fieldset>
    </form>

//disable属性用于fieldset元素的时候回禁用fields属性中所有的额input元素。

//form表达的button按钮,button元素有3个type值:submit reset button.type为submit属性的时候又会有很多额外的属性。
//form 指定按钮关联的表单
//formaction 覆盖form元素的action属性
//formenctype覆盖form元素enctype属性
//formmethod覆盖form元素的method属性
//formtarget覆盖form元素的target属性
//formnovalidate是否执行客户端数据有效性的检查。

//button元素type=submit的额外属性
<form>
        <p><label for="fave"><input id="fave" name="fave"></label></p>
        <button type="submit" formaction="http://xxxx:port/form" formmethod="post"></button>
 </form>

//button元素type=submit的form属性
<form id="voteform">
        <p><label for="fave"><input id="fave" name="fave"></label></p>
        <button type="submit" formaction="http://xxxx:port/form" formmethod="post"></button>
    </form>
    <p>
        <label for="name">Name:<input form="voteform" id="name" name="name"></label>
    </p>
    <button form="voteform" type="submit"></button>
    <button form="voteform" type="reset"></button>

© 著作权归作者所有

共有 人打赏支持
Timothy六金
粉丝 0
博文 8
码字总数 4525
作品 0
朝阳
程序员
私信 提问
全新改进的 HTML5 表单创建

经历了12年之久,万维网的核心语言(HTML或超文本标记语言)终于迎来了HTML5主要修订版本。虽然万众期待的版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就有...

小卒过河
2011/07/23
4.1K
16
22 非常有用 HTML5 + CSS3 表单教程

使用 HTML5 和 CSS3 你可以创建各种创新的 Web 表单,在接下来的内容中我们将为你推荐 22 个这样的教程。 登录表单 HTML5 & CSS3 联系表单 构建一个简单的联系表单 样式漂亮的联系表单 用户注...

小编辑
2011/10/24
6.4K
3
HTML5:实至名归还是言过其实?

庶几何时,HTML5 开始吸引越来越多的人的目光,尽管 W3C 表示,它的最终成熟还有很长的路,然而并不能阻止人们对它的期待。2007年,HTML5 向 W3C 标准进军,HTML5 的使命是实现富 Web 应用的...

红薯
2010/05/01
1K
3
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
04/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

全屋WiFi彻底无死角 这才是终极解决方案

无线网络现在不仅在家庭中不可或缺,在酒店、医院、学校等场景中的需求也越来越多。尤其是这些场景中,房间多但也需要每个房间都能够完美覆盖WiFi,传统的吸顶式AP就无法很好的解决问题。 H3...

linux-tao
20分钟前
0
0
Python日期字符串比较

需要用python的脚本来快速检测一个文件内的二个时间日期字符串的大小,其实实现很简单,首先一些基础的日期格式化知识如下 复制代码 %a星期的简写。如 星期三为Web %A星期的全写。如 星期三为...

dragon_tech
21分钟前
0
0
ORA 各种oraclesql错误

ORA-00001: 违反唯一约束条件 (.) ORA-00017: 请求会话以设置跟踪事件 ORA-00018: 超出最大会话数 ORA-00019: 超出最大会话许可数 ORA-00020: 超出最大进程数 () ORA-00021: 会话附属于其它某...

青峰Jun19er
25分钟前
2
0
没错,老板让我写个 BUG!

前言 标题没有看错,真的是让我写个 bug! 刚接到这个需求时我内心没有丝毫波澜,甚至还有点激动。这可是我特长啊;终于可以光明正大的写 bug 了🙄。 先来看看具体是要干啥吧,其实主要就是...

crossoverJie
38分钟前
34
0
开源软件会被云杀死吗 ?

本文转载云头条,原作者:Michael Stiefel是Reliable Software公司的负责人,是一名软件架构和开发顾问。 文章要点 虽然开源开发不会消失,但商业开源厂商的未来不是很有希望。随着全面管理的...

linuxCool
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部