1. input标签

1.1>input[type=submit]

<form name=”form” method=”post” action=”#">

    <input type=”submit” name=”btn” value=”提交">

</form>

input的type属性是submit，会引发表单提交。

作为按钮的input控件同时被当做一个表单输入提交给了服务器。键值对是 btn=>'提交';

1.2>input[type=button]

input的type属性还可以是button，这时它只是一个按钮，不会引发表单提交。

<form name=”form” method=”post” action=”#">

    <input type=”button” name=”btn” value=”提交">

</form>

2. button[type=submit]

type的默认值是submit，所以点击一个button，会引起表单提交

注意：button[type]在IE中的默认值是button，这意味着它只是一个按钮而不会引发表单提交,

请注意设置type=submit来兼容IE。

button可以设置name和value,提交表单时，value会被作为表单数据提交给服务器,

<form>

     <input type="text" name='name'>

     <button>提交</button>

</form>

3. 用法举例

<form id="myform" name="myform" method="post action="/form-submit">

    <input type="submit" value="Submit普通提交">

	<input type="button" id="ajaxBtn" value="AJAX提交" />

	<input type="button" id="jqueryBtn" value="jQuery提交" />

	<input type="button" id="jsBtn" value="JS提交" />

</form>

<script type="text/javascript">

	//ajax提交

	$("#ajaxBtn").click(function() {

	   //可以获取表单的所有提交信息

		var params = $("#myform").serialize();

		$.ajax( {

			type : "POST",

			url : "/form-submit",

			data : params,

			success : function(msg) {

				alert("success: " + msg);

			}

		});

	})

	//jQuery提交

	$("#jqueryBtn").click(function(){

	    //可以修改表单属性，比如action，这样可以使用一个表单，提交到不同处理器

	    //$('#myform').attr('action','/form-submit');

		$("#myform").submit();

	})

	//js提交

	$("#jsBtn").click(function(){

		//document.myform.action="/form-submit";

	    document.myform.submit();

	})

</script>

4. 表单重置

1：通过from的id实现

document.getElementById("formId").reset();

注意，JQuery中没有直接的reset方法，需要像下面这样写

$('#formId')[0].reset();

2：通过Name实现

document.formName.reset();

3：直接给input传空值

$("input").val("");

$("input[type='text']").val('')

$("input[type='checkbox']").removeAttr('checked')

参考：

http://www.tuicool.com/articles/3my6Rf

http://blog.csdn.net/itmyhome1990/article/details/41849175?utm_source=tuicool&utm_medium=referral

巴特西

form表单提交和重置小结

1. input标签

2. button[type=submit]

3. 用法举例

4. 表单重置

参考：

最新文章

热门文章