form的属性说明

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这种很宽松的约束也不是说都是缺点，自定义属性还可以给我们带来很多便利的，当然也不要滥用。