//一般写法

<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>

<label for="fave">Fruit:<input id="fave" name="fave/></label>

</form>

//form表单的自动聚焦到某个input元素，浏览器一打开就会聚焦于第一个输入的元素。当多个input元素都使用autofocus属性的时候。

//浏览器自动聚焦于其中的最后一个元素。

<form method="post" action="http://www.baidu.com">

            <label for="fave">Fruit:<input autofocus id="fave" name="fave"></label>

<label for="name">Name:<input id="name" name="name"></label>

        <button>Submit</button>

</form>

//禁用表单元素用disable

//对表单元素进行编组

<form>

        <fieldset>

<label for="name"><input name="name" id="name"></label>

<label for="fave"><input name="fave"></label>

        </fieldset>

        <fieldset>

<label for="name"><input name="name" id="name"></label>

<label for="fave"><input name="fave"></label>

        </fieldset>

</form>

//为分组添加说明，使用legend元素

<form>

        <fieldset>

            <legend>fieldset1</legend>

<label for="name"><input name="name" id="name"></label>

<label for="fave"><input name="fave"></label>

        </fieldset>

        <fieldset>

            <legend>fieldset2</legend>

<label for="name"><input name="name" id="name"></label>

<label for="fave"><input name="fave"></label>

        </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>

<label for="fave"><input id="fave" name="fave"></label>

        <button type="submit" formaction="http://xxxx:port/form" formmethod="post"></button>

 </form>

//button元素type=submit的form属性

<form id="voteform">

<label for="fave"><input id="fave" name="fave"></label>

        <button type="submit" formaction="http://xxxx:port/form" formmethod="post"></button>

    </form>

        <label for="name">Name:<input form="voteform" id="name" name="name"></label>

    <button form="voteform" type="submit"></button>

    <button form="voteform" type="reset"></button>

HTML5表单那些事的更多相关文章

  1. 完善：HTML5表单新特征简介与举例——张鑫旭

    一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...

  2. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  3. html5表单验证

    表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html ...

  4. Ideal Forms – 帮助你建立响应式 HTML5 表单

    Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...

  5. HTML5学习总结-05 HTML5表单

    一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...

  6. html5 表单样式 表单验证1 2 3

    html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. HTML5跨浏览器表单及HTML5表单的渐进增强

    HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...

  8. HTML5表单提交和PHP环境搭建

    HTML5表单提交相关内容和PHP环境搭建需要的软件(只备注) (2)举例介绍 (3)PHP环境搭建

  9. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

随机推荐

  1. Win 10 文件浏览器无法打开

    今天遇到个很奇怪的问题,文件浏览器File Explorer无法正常显示,点击打开后任务栏上已经显示打开了,但是屏幕上却看不到任何窗口,开始以为机子中了恶意的木马,然后就疯狂的查毒,然而并没有解决问题 ...

  2. BZOJ 2761: [JLOI2011]不重复数字 水题

    2761: [JLOI2011]不重复数字 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2100  Solved: 809 题目连接 http:// ...

  3. MySQL黑科技用法总结(持续更新)

    1.利用set插入数值 insert [into] 表名 set 列=值.  2.利用select对字段进行测试 ) ,并且有2条记录 ',num1+1的计算结果 tips:相等返回1,否则返回0 f ...

  4. C# 内嵌其他程序到自己程序

    写一xxx聊天机器人啊什么的可能会用到这种技术.比如把QQ窗体嵌入自己的winform中其实很简单,调用两个API函数即可. [DllImport("User32.dll ", E ...

  5. javascript平时小例子⑨(小型抽奖功能)

    <!doctype html><html lang="en"> <head> <meta charset="utf-8" ...

  6. 【转】logback logback.xml常用配置详解（三） <filter>

    原创文章,转载请指明出处:http://aub.iteye.com/blog/1110008, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...

  7. Css3：选择器、字体和颜色样式

    1.私有前缀及其用法 在CSS3模块标准尚未被W3C批准或者标准所提议的特性尚未被浏览器完全实现时,浏览器厂商会使用所谓的私有前缀来测试“试验性的”CSS特性.看看CSS3中实现圆角的代码: .rou ...

  8. 【iCore3 双核心板_FPGA】实验二十五：NIOS II之UART串口通信实验

    实验指导书及代码包下载: http://pan.baidu.com/s/1eRMZq18 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  9. ASM FailGroup验证

    ASM-FailGroup验证 一.FailGroup有效性验证 创建DiskGroup,在Redundancy选项 High:至少3块disk,至少3个failgroup,每一个extent存在1主 ...

  10. Approaches to Vector Computation

    COMPUTER OR GANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION