form在页面操作的时候是一个比较重要的标签了,那么这里就介绍一下这个标签里面的几个重要属性吧。
一般我们常用到的是action,method。因为html没有一个严格的语法约束,这些都可以不写,那么也就意味着得有一个默认处理逻辑。
action如果没写,那么就是采用当前页面的url进行提交,method默认是get方式。相信这2个大家都已经很熟悉了。
这里主要是说一下其他几个:
1、enctype
这个属性主要是在文件上传的时候会用到,它的默认值是application/x-www-form-urlencoded,可以处理字符串内容。但如果是文件的话,字符串就无法处理文件,那么这个enctype有另外一个值可以设置multipart/form-data。
这里忘记设置就会造成文件上传失败。如果用的是springMVC的话,可以在Controller中用如下代码拿到文件内容:
MultipartHttpServletRequest req = (MultipartHttpServletRequest)request; MultipartFile file = req.getFile("file"); if(file.isEmpty() || file.getBytes().length==0){ map.put("errorMsg", messageSource.getMessage("component.insert.ename.empty", null, null)); return map; }
2、target
这里大家会觉得奇怪,target也要说啊。不就是_self,_parent,_blank,_top这几个么,但如果填的不是这几个呢?target还可以指向页面里面的iframe,如果一个iframe的name为calculate,那么target也设置为calculate就可以刷新这个iframe了。但如果不存在的话,就跟_blank效果一样了。
3、accept-charset
这个参数是控制form提交的编码格式,form的编码默认是依据当前页面的编码,这里也可以指定为其他。主要是用在提交到其他编码格式跟当前页面编码不一致的url。在IE系列浏览器下有时候还需要通过修改document.charset来实现,修改accept-charset可能在某些版本下无法达到目的。
通过修改这个document.charset编码一定要慎重,有可能在用户后退操作之后造成其他异常。
4、onsubmit
这个属性定义的函数是可以在表单submit的时候执行,返回值可以为布尔型,如果返回false,该表单就不会提交到后台,操作终止执行。
但要注意的地方就是,如果是通过js代码来触发表单提交的话,该属性定义的函数不会触发。其实前端js做一些表单的校验判断本身就是不靠谱的,放在onsubmit里面执行就更不靠谱了。
<script> function add(){ return false; } function sub(){ document.getElementById("form1").submit(); } </script> <form id="form1" action="/insert" method="post" target="_self" onsubmit="return add()"> 组件英文名:<input type="text" name="ename"/> 组件中文名:<input type="text" name="cname"/> 组件版本号:<input type="text" name="version"/> <input type="submit" value="新增组件"/> <input type="button" value="新增组件22" onclick="sub()"/> </form>
当然也可以自己定义一些属性放在里面,html这种很宽松的约束也不是说都是缺点,自定义属性还可以给我们带来很多便利的,当然也不要滥用。
相关推荐
FORM属性说明[参考].pdf
c# form窗体属性讲解,转载他人,内有很全的各个属性的使用说明。
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
代码说明: 1):为了统一表单样式提示头统一加了label,如:<label class="form-item-title">产品名称; 2): 如果需要让某表单为必填项这需要添加属性“required="true"”,这样标题提示将会多出一个红星,并且...
{{ form.as_table }}:以表格形式加载表单元素 {{ form.as_p }}:以段落形式加载表单元素 {{ form.as_ul }:以列表形式加载表单元素 表单相关的属性 {{ field.label }}:字段对应的标签的文字,例如“发件人”。 {{ ...
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明。通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性、可用性和可交互性。 role的作用是...
属性说明 (Name)窗体的名称 ActiveControl返回焦点所在的控件,该属性设计阶段不可用,运行时只读。 Appearance 外观效果,取值为: 0 平面 1 3D(立体) AutoRedraw 是否自动刷新或重画窗体上所有图形[获得或设置...
◾更正的说明文件中,涉及到“日期”元素; ◾添加加泰罗尼亚语言文件;; ◾更新Zebra_DatePicker至1.8.4版本,这带来了1称为“ show_select_today ”新方法,并改变“ always_show_clear ”方法“ show_clear_date ...
本系统研究的表单自动生成技术所采用的建模方法是以数据库为中心的表单建模...表单字段信息{表单ID,表单元素ID,属性名称,属性说明}。表单与表单元素之间是多对多的关系,并通过表单属性信息表维护两者之间的关系。
这里我们介绍一下form元素与表单...接受请求的URL,该值可以被form元素中的input或button元素的formaction属性覆盖 elements 表单中所有控件集合(HTMLCollection) enctype 请求的编码类型,该值可以被form元素中的
action、method为表单标记<form>的常用属性。 表单属性 action属性用于指定接收并处理表单数据的服务器程序的url地址。 action属性 method属性用于设置表单数据的提交方式,其取值为get或post。 method属性 name属性...
:headers(注意):很多网上的示例把headers属性实例化为“mutipart/form-data,在此我重申一下,没有必要。elementUI已经封装加工过了, 同时如果设定headers属性实例,还会造成异常:"Failed to read the request ...
form表单,各标签的属性描述,简单的例子说明,刚注册,试试上传。。。
简介 q-antd是在antd的基础上,结合mobx,对antd中的表单...使用Form的model属性和表单元素的duplex属性,进行数据的双绑。 使用Form的rules属性进行表单元素的校验 校验规则的写法参见 校验的触发,在各个规则中传入
在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。...form的enctype属性为编码方式,常用有两种: application/x-www-form-urlencoded 和 mult
说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName....
◾更正的说明文件中,涉及到“日期”元素; ◾添加加泰罗尼亚语言文件;; ◾更新Zebra_DatePicker至1.8.4版本,这带来了1称为“ show_select_today ”新方法,并改变“ always_show_clear ”方法“ show_clear_date ...
表单,将组件内的用户输入的<switch> <...属性名 类型 说明 report-submit Boolean 是否返回formId用于发送模板消息 bindsubmit EventHandle 携带form中的数据触发submit事件,event.detail = { value : {
ID 属性:文本字段、选择、按钮、文本区域、单选和复选框将 class 属性添加到以下元素:form要求CKEditor 4.4.7 或更高版本 CKEditor 的 Forms 插件(通常默认安装)安装说明提取下载的存储库文件夹复制...