1、表單元素

一、編寫表單的步驟：

1、構(gòu)建表單----------------》2、服務(wù)器處理（主要是提供負(fù)責(zé)接收數(shù)據(jù)的接口，用來處理數(shù)據(jù)的存儲等信息）------------》3、配置表單

示例：

披薩預(yù)定表單：

	<form method='post' action='https://pizza./order' enctype='application/x-www-form-urlencoded'>
	    <!--action屬性配置接收數(shù)據(jù)的地址，enctype指定編碼方式-->
		<p><label>姓名：<input name='custname'></label></p>
		<p><label>電話：<input type='tel' name='custtel'></label></p>
		<p><label>郵箱：<input type='email' name='custemail'></label></p>
		<fieldset>
			<legend> 披薩大小 </legend>
			<label><input type='radio' name='size' value='small'> 小 </label>
			<label><input type='radio' name='size' value='medium'> 中 </label>
			<label><input type='radio' name='size' value='large'> 大 </label>
		</fieldset>
		<fieldset>
			<legend> 披薩配料 </legend>
			<label><input type='checkbox' name='topping' value='bacon'> 熏肉 </label>
			<label><input type='checkbox' name='topping' value='cheese'> 奶酪 </label>
			<label><input type='checkbox' name='topping' value='onion'> 洋蔥 </label>
			<label><input type='checkbox' name='topping' value='mushroom'> 蘑菇 </label>
		</fieldset>
		<p><label>配送時間：<input type='time' name='delivery' min='11:00' max='21:00' step='900'></label></p>
		<p><button>提交訂單</button></p>
	</form>

二、表單元素

1、form標(biāo)簽：

           name屬性：主要用于之后的API：var pizzaForm = document.forms.pizza;

           autocomplete屬性：屬性值有on / off ，當(dāng)值為on時，鼠標(biāo)焦點(diǎn)到“姓名”的輸入框中時，下面會出現(xiàn)之前輸入過的值以備候選，候選值也會根據(jù)輸入情況更改；當(dāng)值為off時，也出現(xiàn)提示，就與瀏覽器的設(shè)置有關(guān)了。

           elements：包含：①該表單子孫表單控件（除圖片按鈕（<input type='image'>））（表單控件有 button、fieldset、input、keygen、object、output、select、textarea）

                                            ②歸屬于該表單的表單控件（除圖片按鈕），示例看下面的代碼：（動態(tài)節(jié)點(diǎn)集合）

	<form name='test'>
		<input name='a' />
		<input name='b' />
	</form>

---------------------返回id或name為指定名稱的表單控件（除圖片按鈕）

---------------------如果結(jié)果為空、則返回id為指定名稱的img元素

---------------------如果有多個同名元素，則返回這些元素的動態(tài)節(jié)點(diǎn)集合

---------------------一旦用指定名稱取過該元素，則不管該元素的id或者name怎么變化，只要節(jié)點(diǎn)還在頁面上均可使用原名稱獲取該元素：

	<form name='test'>
		<input name='a' />
	</form>

-----reset()

可重置元素：input、keygen、output、select、textarea

觸發(fā)表單reset事件，阻止該事件的默認(rèn)行為可取消重置

元素重置時不再觸發(fā)元素上的change和input事件

示例：有一個文件選擇器，已經(jīng)選擇了一個文件，現(xiàn)在我們想要把這個選擇的文件刪除：

	<form name='file'>
		<input name='image' type='file' />
	</form>
	<script>
	fileForm['image'].value = ''; //根據(jù)瀏覽器的安全限制，這樣做是無法刪除已選中文件的
	fileForm.reset();
	</script>

-----submit()

-----checkValidity()

4、label標(biāo)簽

①、htmlFor

-------------------關(guān)聯(lián)表單控件激活行為，也就是說關(guān)聯(lián)之后，點(diǎn)擊label的行為與表單控件的行為保持一致

-------------------可關(guān)聯(lián)元素：button、input（除hidden外）、keygen、meter、output、progress、select、textarea

	<form class='f-hidden'>
		<input id='file' name='image' type='file'><!--0*0尺寸不可見-->
	</form>
	<label for='file' class='m-upload'>選擇圖片</label><!--上傳按鈕效果，這里最重要的就是將for屬性指到input id為file，這里點(diǎn)擊label就有與點(diǎn)擊input標(biāo)簽選擇文件行為相同的操作-->

---------------------如果指定了for屬性，則為該for屬性對應(yīng)ID的可關(guān)聯(lián)元素

---------------------如果沒有指定for屬性，則為第一個子孫可關(guān)聯(lián)元素

                            b、for屬性對應(yīng)ID的元素span為非可關(guān)聯(lián)元素

                            c、label.control——>null

③form

----------------------關(guān)聯(lián)歸屬表單

----------------------可關(guān)聯(lián)元素：button，fieldset，input，keygen，label，object，output，select，textarea

----------------------只讀屬性，不可在程序中修改

label.setAttribute('form','newFormId');

①type

--------------------控件外觀

--------------------數(shù)據(jù)類型

--------------------默認(rèn)為text

示例：本地圖片預(yù)覽：

	file.addEventListener('change', function(event){
		var files = Array.prototype.slice.call(event.target.files,0);
		files.forEach(function(item){
			<strong>file2dataurl</strong>(item,function(url){
				var image = new Image();
				parent.appendChild(image);
				image.src = url;
			});
		});
	});

file2dataurl接口沒有實(shí)現(xiàn)，思考。

6、select標(biāo)簽

select:name、value、multiple、options、selectedOptions、selectedIndex、add(element[,before])、remove([index])

optgroup:disabled 、label（對相關(guān)性較大的做分組，disabled表示當(dāng)前分組里的都是不可選的）

option:disabled、label、value、text、index、selected、defaultSelected

*創(chuàng)建選項(xiàng)：

------document.createElement

------new Option([text[,value[,defaultSelected[,selected]]]])

這兩個方式的效果是一樣的。

 new Option('1.2 節(jié)點(diǎn)操作','1.2');
//兩者等價
 var option = document.createElement('option');
 option.value = '1.2';
 option.textContent = '1.2 節(jié)點(diǎn)操作';

------insertAdjacentElement

------select.add

//需插入的節(jié)點(diǎn)
var option = new Option('1.0 概述','1.0');
//opt11為參照點(diǎn)
opt11.insertAdjacentElement(option,'beforeBegin');
select.add(option,opt11);

------removeChild

------select.remove

案例描述：兩個select選擇器，后一個選擇器根據(jù)前一個選擇的所選的內(nèi)容發(fā)生改變：

涉及到的知識點(diǎn)：onchange、remove、add

	<form name='course'>
		<select name='chapter'>
			<option>請選擇章目錄</option>
		</select>
		<select name='section'>
			<option>請選擇節(jié)目錄</option>
		</select>
	</form>

	//用選定的數(shù)據(jù)列表填充選擇器
	function fillSelect(select,list){
		for(var i=select.length-1; i>0; i --){
			select.remove(i);
		}
		list.forEach(function(data){
			var option = new Option(data.text,data.value);
			select.add(option);
		});
	}
	//對首級的選擇器做填充
	fillSelect(chapterSelect,chapters);
	//章的選擇器會導(dǎo)致節(jié)的選擇器的變化
	chapterSelect.addEventListener('change', function(event){
		var value = event.target.value,
			list = sections[value] || [];
		fillSelect(sectionSelect,list);
	});

7、textarea

①屬性和接口：

name、value、select()（對內(nèi)容全選之后就會觸發(fā)這個接口）、selectionStart、selectionEnd、selectionDirection（用來控制shift+方向鍵的行為，當(dāng)值為forward時，改變的是selectionEnd，值為backward時，改變的是selectionStart）、setSelectionRange(start,end[,direction])、setRangeText(replacement[,start,end[,mode]])

②@輸入提示：

描述：比如QQ聊天時，對話框中輸入@就會出現(xiàn)好友列表，可以選擇其中的一個值填充到@后面，之后再輸入其他文本。

涉及到的知識點(diǎn)：oninput、selectionStart、setRangeText

2、表單驗(yàn)證

	<form method='post' action='https://pizza./order' enctype='application/x-www-form-urlencoded'>
	    <!--action屬性配置接收數(shù)據(jù)的地址，enctype指定編碼方式-->
		<p><label>姓名：<input name='custname' required></label></p>
		<p><label>電話：<input type='tel' name='custtel' required></label></p>
		<p><label>郵箱：<input type='email' name='custemail'></label></p>
		<fieldset>
			<legend> 披薩大小 </legend>
			<label><input type='radio' name='size' value='small' required> 小 </label>
			<label><input type='radio' name='size' value='medium' required> 中 </label>
			<label><input type='radio' name='size' value='large' required> 大 </label>
		</fieldset>
		<fieldset>
			<legend> 披薩配料 </legend>
			<label><input type='checkbox' name='topping' value='bacon'> 熏肉 </label>
			<label><input type='checkbox' name='topping' value='cheese'> 奶酪 </label>
			<label><input type='checkbox' name='topping' value='onion'> 洋蔥 </label>
			<label><input type='checkbox' name='topping' value='mushroom'> 蘑菇 </label>
		</fieldset>
		<p><label>配送時間：<input type='time' name='delivery' min='11:00' max='21:00' step='900'></label></p>
		<p><button>提交訂單</button></p>
	</form>

在必須要填寫的表單標(biāo)簽中添加“required”屬性，當(dāng)用戶沒有填寫完整時點(diǎn)擊提交按鈕就會馬上返回提示信息。

一、驗(yàn)證：

1、驗(yàn)證元素：

---------可驗(yàn)證元素：button、input、select、textarea

---------以下情況不做驗(yàn)證：

                 ①input && type = {hidden、reset、button}

                 ②button && type = {reset、button}

                 ③input / textarea && readonly

                 ④作為datalist的子孫節(jié)點(diǎn)

                 ⑤disabled

2、驗(yàn)證涉及到的屬性或接口：

element：willValidate（判斷表單提交時元素是否會被驗(yàn)證）、checkValidity()（用來驗(yàn)證元素，通過的話就會返回true，否則會觸發(fā)validate事件）、validity、validationMessage（顯示驗(yàn)證異常信息）、setCustomValidity(message)

①validity：存儲了驗(yàn)證過程中可能出現(xiàn)的錯誤驗(yàn)證信息

②自定義異常：

-------oninvalid事件

-------setCustomValidity接口

a、將必填字段的提示信息自定義設(shè)置，默認(rèn)為“請?zhí)顚懘俗侄??！?，改為“請輸入姓名！?/p>

	input.addEventListener('invalid', function(event){
		var target = event.target;
		//如果是沒用輸入的話，就自定義異常信息
		if(target.validity.valueMissing){
			target.setCustomValidity('請輸入姓名！');
		}
	});

描述案例：當(dāng)一個input的type為number，而作用是輸入電話號碼，其中電話號碼帶有“-”，提交時就會顯示驗(yàn)證錯誤信息“請輸入一個數(shù)字”。（這種情況下設(shè)置type可能是為了喚起特定的鍵盤，這里就是數(shù)字鍵盤）

3、表單提交

一、隱式提交：

-------如：聚焦在輸入框時按回車提交表單

-------需滿足以下任一條件：

                 ①表單有非禁用的提交按鈕

                 ②沒有提交按鈕時，不超過一個類型為text、search、url、email、password、date、time、number的input元素

1、提交過程：

①根據(jù)表單enctype指定的值構(gòu)建要提交的數(shù)據(jù)結(jié)構(gòu)

②使用method指定的方式發(fā)送數(shù)據(jù)到action指定的目標(biāo)

1.1、構(gòu)建提交數(shù)據(jù)（瀏覽器）：從可提交元素中提取數(shù)據(jù)組裝成指定的數(shù)據(jù)結(jié)構(gòu)的過程。

          可提交元素：button、input、keygen、object、select、textarea

1.2、編碼方式（enctype）

          可指定為以下三種方式之一：①application/x-www-form-urlencoded【默認(rèn)】

                                                              ②multipart/form-data

                                                              ③text/plain  （一般文件上傳使用這種方式）

以上三種編碼方式分別使用method='post'提交數(shù)據(jù)：

	<form action='./api' method='post'>
		<input name='a' />
		<input name='b' />
		<input name='c' />
		<button>submit</button>
	</form>

特殊案例：

-------name='isindex' && type='text'

                    *編碼方式為application/x-www-form-urlencoded

                    *作為表單的第一個提交元素

                    *提交時只發(fā)送value值，不包含name

-------name='_charset_' && type='hidden'

                    *沒有設(shè)置value值

                    *提交時value自動用當(dāng)前提交的字符集填充

	<form action='./api' method='post'>
		<input type='hidden' name='_charset_' />
		<p><input name='a' /></p>
		<p><button>submit</button></p>
	</form>

2、submit() 提交

在表單提交中的一個重要接口就是submit()，除了用提交按鈕來提交數(shù)據(jù)之外，我們還可以調(diào)用form上的submit()接口來提交表單。

①onsubmit——不管用什么方式提交表單都會觸發(fā)onsubmit事件。

——表單提交事件

——在這個事件觸發(fā)的時候我們可以做一些提交之前的數(shù)據(jù)驗(yàn)證

——如果這個驗(yàn)證沒有通過，可以阻止事件的默認(rèn)行為來取消表單提交。

常用的可能是ajax，但這里用另外一種方式：

涉及到的知識點(diǎn)：form、target、iframe

使用iframe做中間代理，結(jié)合表單的target。

說明：指定一個iframe的name，將form的target指向iframe的name，當(dāng)form表單的數(shù)據(jù)提交到服務(wù)器上，服務(wù)器返回的結(jié)果就會到iframe中，然后就只需要將iframe中的結(jié)果提交到頁面上就可以了。

	<iframe name='targetFrame' class='f-hidden'></iframe>
	<form action='./api' method='post' target='targetFrame'>
		<p><input name='a'></p>
		<p><input name='b' /></p>
		<p><button>submit</button></p>
	</form>

4、表單應(yīng)用

當(dāng)重新輸入時，錯誤信息就會消失。

一、登錄接口：

——請求地址：/api/login

——請求參數(shù)：

                *telephone     手機(jī)號碼

                *password     密碼，MD5加密

——返回結(jié)果：

                *code       請求狀態(tài)，200表示成功

                *result      請求結(jié)果數(shù)據(jù)

登錄表單：

	var form = document.forms.loginForm;//登錄表單的引用
	var nmsg = document.getElementById('message');//信息提示節(jié)點(diǎn)的引用

①通用方法：

	//在信息提示節(jié)點(diǎn)上設(shè)置提示信息
	function showMessage(clazz,msg){
		if(!clazz){
			nmsg.innerHTML = '';
			nmsg.classList.remove('j-suc');
			nmsg.classList.remove('j-err');
		}else{
			nmsg.innerHTML = msg;
			nmsg.classList.add(clazz);
		}
	}
	//輸入驗(yàn)證失敗的邏輯
	function invalidInput(node,msg){
		showMessage('j-err',msg);
		node.classList.add('j-error');
		node.focus();
	}
	//當(dāng)用戶有輸入時，清除提示信息
	function clearInvalid(node){
		showMessage();
		node.classList.remove('j-error');
	}
	//提交表單以后，服務(wù)器沒有返回結(jié)果的這段時間，禁用登錄按鈕，防止用戶重復(fù)提交
	function disableSubmit(disabled){
		form.loginBtn.disabled = !!disabled;
		var method = !disabled?'remove':'add';
		form.loginBtn.classList[method]('j-disabled');
	}

	//驗(yàn)證密碼,注意：驗(yàn)證時機(jī)是提交表單的時候，不是點(diǎn)擊提交按鈕的時候。原因：用戶提交表單不一定是要點(diǎn)擊提交按鈕，還可以隱式提交
	form.addEventListener('submit', function(event){
		//密碼驗(yàn)證
		var input = form.password,
			pswd = input.value,
			emsg = '';
		if(pswd.length<6){
			emsg = '密碼長度必須大于6位';
		}else if(!/\d/.test(pswd)||!/[a-z]/i.test(pswd)){
			emsg = '密碼必須包含數(shù)字和字母';
		}
		//密碼驗(yàn)證不通過
		if(!!emsg){
			event.preventDefault();
			invalidInput(input,emsg);
			return;
		}
		//TODO 提交數(shù)據(jù)
	});

	//驗(yàn)證失敗之后的狀態(tài)恢復(fù)
	form.addEventListener('input', function(event){
		//還原錯誤狀態(tài)
		clearInvalid(event.target);
		//還原登錄按鈕狀態(tài)
		disableSubmit(false);
	});

	//從iframe中取出服務(wù)器返回結(jié)果并做處理
	var frame = document.getElementById('result');
	frame.addEventListener('load', function(event){
		try{
			var result = JSON.parse(frame.contentWindow.document.body.textContent);
			//還原登錄按鈕狀態(tài)
			disableSubmit(false);
			//識別登錄結(jié)果
			if(result.code === 200){
				showMessage('j-suc','登錄成功！');
				form.reset();
			}
		}catch(ex){
			//ignore
		}
	});