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 | 规定输入字段是必需的(必需填写)。 |