Form表单详解
什么是表单提交？简单的说，就是将表单中的数据发送给服务器。详细的说，就是将form标签之间，用户填写的数据封装到消息体或url地址后，然后请求服务器。
通常，下面两种情况，都会导致form表单提交：
- 点击了表单中的提交按钮
- 在js中调用了表单对象的submit方法
1.提交按钮方式提交
提交按钮跟按钮的文本无关，它是指type="submit"的按钮。另外，type="image"的input标签，也可以实现提交，也可以当做是提交按钮。
<!--下面的按钮都是提交按钮-->
<p><input type="submit" value="提交1"></p>
<p><button type="submit">提交2</button></p>
<p><input type="image" src="/img.png"></p>
注意：
- 提交按钮必须放置在表单里面
- 点击提交按钮时，只会提交它所在的表单
- 一个页面可以出现多个form表单，但不允许在一个form表单里面出现另一个form表单
2. js提交
具体的方式是：获取form表单dom对象 调动dom对象的submit函数
<form id="f1">
<p>账号：<input type="text" name="loginid"></p>
<p>密码：<input type="password" name="loginpwd"></p>
<p><button onclick="jssubmit()">提交</button></p>
</form>
<script type="text/javascript">
function jssubmit() {
//获取form表单的dom对象
var formdom = document.getElementById('f1'); //调用对象的submit方法
formdom.submit();
}
</script>
表单提交事件
无论你使用提交按钮，还是使用js提交，在form表单被提交时，会首先触发form表单的onsubmit事件
如果你给form标签注册了onsubmit事件，若事件执行过程中返回了false，可以阻止表单的提交，如果没有返回false，则表单正常提交
我们往往利用这一点，来实现在提交前的验证
<form id="f1" onsubmit="return vali()"></form>
//在该函数里可以做一些表单校验
function vali() {
return false;//返回false，阻止表单提交
}
要特别注意的是οnsubmit=“return vali()”，这里必须使用return，否则无法将函数的返回结果传递给页面，就无法达到阻止页面提交的效果。
发送的数据
当表单被提交时，表单中的内容并不是全部都会提交，表单中的某个标签的数据，如果想要被提交到服务器，必须满足以下两个条件，缺一不可：
- 标签必须具有name属性值，没有name属性值的标签就无法组装键值对，它的值不会被提交
- 必须是input、select、textarea标签，其他标签的数据不会提交到服务器
form表单的相关属性：
1.action：此属性表示提交表单时要执行的操作，通常是将表单数据提交到服务器处理表单数据的文件脚本中。
2.target：此属性表示在提交表单之后，服务器相应数据在何处显示。
默认值是_self，表示在当前窗口显示，值_blank表示在新窗口中显示。
3.method：此属性表示提交表单时要使用的HTTP方法。
可选值有get和post两种，默认值是get。
4.autocomplete：此属性表示是否开启表单自动补全，如果开启则浏览器会根据之前用户输入的值自动补全值。默认是开启的，可选值值有on(开)、off(关)。5.novalidate：此属性表示表单提交时是否不进行表单验证，如果设置，则表示不进行表单验证。
默认是进行表单验证的
input的输入限制属性：
| 属性 | 描述 |
|---|---|
| disabled | 规定输入字段应该被禁用。 |
| max | 规定输入字段的最大值。 |
| min | 规定输入字段的最小值。 |
| maxlength | 规定输入字段的最大字符数。 |
| size | 规定输入字段的宽度（以字符计）。 |
| step | 规定输入字段的合法数字间隔。 |
| value | 规定输入字段的默认值。 |
| pattern | 规定通过其检查输入值的正则表达式。 |
| readonly | 规定输入字段为只读（无法修改）。 |
| required | 规定输入字段是必需的（必需填写）。 |