一个有态度的博客

Attitude is everything。

HTML表单的几种常用提交方式总结

HTML表单的几种常用提交方式总结

一:最普通最常用最一般的方法就是用 type="submit" 看代码:

<form name=”form1” method=”post” action=”#"> 
<input type=”submit” name=”submit” value=”提交"> 
</form> 

二:使用图片type="image":

<form name=”form1” method=”post” action=”# "> 
<input type=”image” name=”submit” src=”Submit.png”> 
</form> 

三:第三种是使用链接来提交表单,用到了javascript的DOM模型:

<form name=”form1” method=”post” action=”#”> 
<a href=”javascript:form1.submit();”>提交</a> 
</form> 

这种方法实际上是调用了一个javascript函数,使用javacript函数来提交表单,方法就非常多非常灵活了,比如可以把它加入到任意一个标签的onclick事件中:

<form name=”form1” method=”post” action=”#”> 
<div onclick=”javascript:form1.submit();”> 
<span>提交</span> 
</div> 
</form> 

但是,如果一个表单里有需要有多个提交按钮怎么办呢?

比如一个表单里的提交按钮所指向的处理页面不同,这样由于表单在定义的时候就已经确定下表单数据的处理页面,所以单纯地在表单里放多个提交按钮是没有办法达到目的的。这就需要javascript。

首先定义一个函数:

<script language=javascript> 
function query(){ 
form.action=”query.aspx”; 
form.submit();} 
function update(){ 
form.action=”update.aspx”; 
form.submit();} 
</script> 

通过javascript改变form的action属性值,这样就可以实现多提交按钮而且功能不同了,页面内代码如下:

<form name=”form1” method=”post” action=”#”> 
<input type=”button” name=”query” onclick=”query();” value=”查询”> 
<input type=”button” name=”update” onclick=”update();” value=”更新”> 
</form> 

上面一段代码,使用的是普通的按钮,而提交功能的实现方法是在它的onclick事件中调用javascript函数.

有了上面这几种提交表单的方法,我想差不多够应付复杂的表单了.

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。

http://blog.postcha.com/read/117 HTML表单的几种常用提交方式总结

0 条评论

登录后才能发表评论!