重新学习html--form表单

1、form表单的提交方式

(1)、使用熟悉的submit方法来提交

调用form.submit(),优点是在任何地方都可以对表单进行提交，缺点是提交不会触发form表单上的submit事件，无法进行取消提交等操作。

(2)、使用 type=“submit | image” 的input、type="submit"的button 进行提交

优点是可以触发form的submit事件。对表单进行校验。在submit事件中调用event.preventDefault阻止表单的提交；缺点是一不留神就触发表单提交了。比如当某一个表单元素上获得了焦点 、这时候按了回车就会触发表单的提交

2、form表单的重置

 两种方式  (1) 、type = "reset"的input或者button都可以、(2)、form.reset()方法

3、form表单的读取

读取form表单里面填写的内容的时候,当在jq中有个方法是form.serializeArray()可以读取整个form里面的数据并且格式化成以[{name:xxx,value:xxx}]的形式，当然还有form.serialize()方法将键值对进行序列化。问题是这两个方法会忽略掉disabled的表单项的值，虽然这么做很符合规范，但是有时候需求就是要把表单禁用，并且也能后续直接获取disabled表单的元素。而不是通过先取消所有表单的disabled.获取值再禁用当前项。我实现了一个简单的方法如下。仅供参考思路

<form action="/" id="myForm" name="myForm">
		<input type="text" id="text" name="1" disabled />
		<input type="text" id="text1" name="2"/>
		<input type="text" id="text2" name="3" />
		<input type="text" id="text3" name="4" />
		<label for="">
			<input type="radio" value="1" name="test">
			<input type="radio" value="2" name="test">
			<input type="radio" value="3" name="test">
		</label>
		<select name="5">
			<option value="12">xxx</option>
			<option value="13">xxx</option>
		</select>
		<input type="submit" value="提交">
		<input type="reset" value="重置">
	</form>
	<a href="javascript:;" role="button" onclick="submitData()">提交</a>
	<script>
		var myForm = document.querySelector("#myForm");
        function mySerializeArray(form,isGetDisabeldFieldVal){
        	var $form,$elements,results = [];
        	var ignoreType = ["submit","reset","image"];

        	// 如果传的是一个选择器的话。就读取一次form
        	if(typeof form === "string"){
        		$form = document.querySelector(form);
        	}else{
        		$form = form;
        	}
        	
        	$elements = $form.elements;

        	for(let element of $elements){
        		let {type,tagName,name,value,disabled,checked} = element;
        		// 忽略掉类型是submit和reset的input以及button,并且name不存在的字段也被跳过
        		if(tagName.toLowerCase() !== "button" && ignoreType.indexOf(type) < 0 && name){
        			// 如果不获取disabled表单项的值。就跳过
        			if(!isGetDisabeldFieldVal && disabled) continue;
        			if(type === "radio" && !checked) continue;
        			results.push({
        				name:name,
        				value:value
        			});
        		}
        	}
        	return results
        }
        function mySerialize(form,isGetDisabeldFieldVal){
        	var formData = mySerializeArray(form,isGetDisabeldFieldVal);
        	var resultArr = []

        	for(let {name,value} of formData){
        		resultArr.push(name + "=" +value);
        	}
        	return "?"+ resultArr.join("&");
        }
        function submitData(){
        	var formData1 = mySerializeArray("#myForm");
        	var formData2 = mySerializeArray("#myForm",true);
        	var formData3 = mySerialize("#myForm",false);
        	var formData4 = mySerialize("#myForm",true);
        	console.log(formData1);
        	console.log(formData2);
        	console.log(formData3);
        	console.log(formData4);
        }
	</script>