文档章节

HTML5表单那些事

Timothy六金
 Timothy六金
发布于 2016/06/13 10:20
字数 886
阅读 10
收藏 0
点赞 0
评论 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 资源参考指南

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

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

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

浪漫程序员
04/25
0
0
使用HTML5构建下一代的Web Form

作者 蒋博 发布于 2009年6月22日 上午4时52分 HTML5 是由 WHATWG (Web Hypertext Application Technology Working Group) 发起的,最开始的名称叫做Web Application 1.0,而后这个标准吸纳了...

晨曦之光
2012/03/09
0
0
HTML4与HTML5之间的10个本质区别

HTML5是目前最新的HTML规范,每一个web开发人员将会发现自己需要使用这项新的标准工作。而且,其中很多人会发现,由于HTML4与HTML5之间的区别,新建一个HTML5的网站远比从HTML4往HTML5上迁移...

晨曦之光
2012/03/09
0
0
html5中本地 缓存localStorage

html5两种缓存中的一种,localStorage是一种永久的本地缓存,除非用户主动的清除本地缓存。用法: 其中watchPerson和watchTel为html表单中的字段的id,首先判断浏览器是否支持html5的localSt...

EDIAGD
2013/08/17
0
0
HTML5编程之旅 第4站 Forms

涉及到Web开发的,肯定要涉及到HTML表单,本节将带你走入HTML5表单的世界。 一、HTML5 Forms概述 熟悉HTML表单的开发人士,可以很容易的适应HTML5 Forms的新增功能。 XFomrs是一个以XML为核心...

倪伟伟
2014/02/27
0
1
主流浏览器CSS3和HTML5兼容性详细清单

天极网软件频道2011-05-26 15:26 分享到:我要吐槽   更多精彩相关文章推荐:   常用浏览器软件HTML5兼容性表现测试   IE和Firefox浏览器CSS兼容性技巧整理   CSS hack定义技巧浏览器...

波利beryl
2014/11/12
0
0
HTML5 FormData+Ajax上传文件表单

文件表单的数据类事multipart/form-data,因此,formData需要特殊处理. 文件上传 参考文章: HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传 [HTML5] Blob对象 通过Ajax方式上传文件,使用...

IamOkay
2017/10/31
0
0
十道或许你不熟练的前端HTML5的经典面试题

1.什么是HTML5?  答:HTML5是最新的HTML标准。   注意:讲述HTML5推出的设计目的,以及现在市场的使用情况,浏览器支持情况等。。。。 设计目的   HTML5的设计目的是为了在移动设备上支...

懿左左
06/29
0
0
HTML5和CSS3不仅仅是两项新的Web技术标准

HTML5和CSS3不仅仅是两项新的Web技术标准 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术。虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那...

课工场CC老师
2017/10/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

什么是Base64

一、什么是Base64? 百度百科中对Base64有一个很好的解释:“Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法”。 什么是...

Jack088
2分钟前
0
0
SQL多表联查leftjoin左边加表单

SELECT IFNULL(u.USER_ACCOUNT, o.USER_ACCOUNT) u.USER_ACCOUNT, o.* FROM gh_orders o LEFT JOIN gh_user u ON o.PARENT_ID = u.ROW_ID 1.假如u.USER_ACCOUNT不空返回u.USER_ACCOUNT,否则返......

森火
6分钟前
0
0
expect脚本同步文件、expect脚本指定host和要同步的文件、构建文件分发系统

expect脚本同步文件 更改权限 执行脚本 查看执行结果 expect eof需要加上,作用是等脚本命令执行完再进行退出 expect脚本指定host和要同步的文件 更改权限,执行脚本 构建文件分发系统 需求背...

Zhouliang6
45分钟前
1
0
Hive应用:外部分区表

Hive应用:外部分区表 介绍 Hive可以创建外部分区表。创建表的时候,分区要在建表语句中体现。建完之后,你不会在表中看到数据,需要进行分区添加,使用alter语句进行添加。然后数据才会显示...

星汉
55分钟前
3
0
点击Enter登录

1. 效果 2. 实现过程(记得引入jq文件) //6.回车事件 登录 $(function() { document.onkeydown = function(event) { var e = event || window.event || arguments.callee.caller.arguments......

Lucky_Me
今天
1
0
点击菜单内容切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .mao{ ......

南桥北木
今天
1
0
OSChina 周六乱弹 —— 妹子和游戏哪个更好玩

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @andonny :分享唐朝乐队的单曲《国际歌》 《国际歌》- 唐朝乐队 手机党少年们想听歌,请使劲儿戳(这里) @举个栗子- :日常祈雨 邪恶的大祭...

小小编辑
今天
591
8
流利阅读笔记32-20180721待学习

“人工智能”造假:只有人工,没有智能 Lala 2018-07-21 1.今日导读 当今社会,擅长单个方面的人工智能已经盛行,手机借助 AI 智慧防抖技术帮助大家拍出清晰照片,谷歌研发的 AI 助手将可以帮...

aibinxiao
今天
10
0
我的成长记录(一)

今天突然精神抖擞,在我的博客下新开一项分类>成长记录,专门记录每隔一段时间我的一点感悟吧。因为今天才专门花时间新开这样一个分类,所以以前有过的一些感悟没有记录下来,现在已经想不起...

dtqq
今天
1
0
机器学习管理平台 MLFlow

最近工作很忙,博客一直都没有更新。抽时间给大家介绍一下Databrick开源的机器学习管理平台-MLFlow。 谈起Databrick,相信即使是不熟悉机器学习和大数据的工程湿们也都有所了解,它由Spark的...

naughty
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部