Html中Form提交细节研究
2009-10-27 08:31
288 查看
1. 表单提交按钮
当表单中包含有image或者submit类型的按钮时,会将第一个该类型的按钮默认为表单提交按钮,也就是你按回车键就会自动触发的按钮;<input type=submit>或者<input type=image>;如果不含有表单,则不会触发提交表单事件;
2. 文本输入框一个和多个的区别
如果表单中只有一个文本输入框,即使页面中存在表单提交按钮,但回车时,也仅仅触发表单的提交事件:onsubmit,而不会触发表单提交按钮的单击事件:onclick;但当表单中多于两个文本输入框时,在回车后,将会触发第一个表单提交按钮的单击事件:onclick,然后才触发表单的提交事件:onsubmit;
3. 验证实例代码如下:
今天下午发现一个很奇怪的问题,看如下两段代码:
代码一:
<form method=post onsubmit=alert(‘form submit’)>
<input type=text><input type=text>
<input type=submit onclick=alert(‘button click’)>
</form>
代码二:
<form method=post onsubmit=alert(‘form submit’)>
<input type=text>
<input type=submit onclick=alert(‘button click’)>
</form>
对于代码一,有两个文本输入框,当焦点位于其中一个输入框时,回车就能够触发表单的提交按钮或者提交事件,但在代码二中,当焦点位于唯一的一个输入框时,回车却不能够触发表单的提交按钮或者事件,因此这个在实际开发中可能会碰到这样的问题;解决办法就是页面中提供两个文本输入框。
当表单中包含有image或者submit类型的按钮时,会将第一个该类型的按钮默认为表单提交按钮,也就是你按回车键就会自动触发的按钮;<input type=submit>或者<input type=image>;如果不含有表单,则不会触发提交表单事件;
2. 文本输入框一个和多个的区别
如果表单中只有一个文本输入框,即使页面中存在表单提交按钮,但回车时,也仅仅触发表单的提交事件:onsubmit,而不会触发表单提交按钮的单击事件:onclick;但当表单中多于两个文本输入框时,在回车后,将会触发第一个表单提交按钮的单击事件:onclick,然后才触发表单的提交事件:onsubmit;
3. 验证实例代码如下:
今天下午发现一个很奇怪的问题,看如下两段代码:
代码一:
<form method=post onsubmit=alert(‘form submit’)>
<input type=text><input type=text>
<input type=submit onclick=alert(‘button click’)>
</form>
代码二:
<form method=post onsubmit=alert(‘form submit’)>
<input type=text>
<input type=submit onclick=alert(‘button click’)>
</form>
对于代码一,有两个文本输入框,当焦点位于其中一个输入框时,回车就能够触发表单的提交按钮或者提交事件,但在代码二中,当焦点位于唯一的一个输入框时,回车却不能够触发表单的提交按钮或者事件,因此这个在实际开发中可能会碰到这样的问题;解决办法就是页面中提供两个文本输入框。
相关文章推荐
- form提交html Chrome出现: ERR_BLOCKED_BY_XSS_AUDITOR
- form 表单提交, html中ID, name 的区别
- HTML的form表单自动提交
- html(jsp)如何实现对form提交前进行确认
- HTML 的 form 提交之前如何验证数值不为空? 为空的话提示用户并终止提交
- html disabled 和readonly,disabled 引起的form表单提交问题
- truts2中表单可以不用struts自带的<s:form>标签,直接用html的<form>标签能够提交数据到action
- HTML中Form表单提交时,采用 get和post的区别
- form表单和ajax表单提交(Html.BeginForm()、Ajax.BeginForm())的差别
- form表单action提交的js部分与html部分
- 获取form表单提交回来的值或者html标签的值或者加载过后重新给lable赋的值
- DHTML(Dynamic HTML)--4.表单(form)的校验与提交
- HTML 的 form 提交之前如何验证数值文本框的内容全部为数字? 否则的话提示用户并终止提交?
- form表单和ajax表单提交(Html.BeginForm()、Ajax.BeginForm())的差别
- form表单action提交的js部分与html部分
- html 的 image button 自动提交 form
- JS 提交表单2-Query Ajax post(json数组,form表单经serialize()序列化,html拼接)
- C/C++模拟HTML的FORM提交数据
- html回车键导致form提交的问题
- 解决struts中<html:form>提交中文时乱码问题