在HTML中，表單是由<form>元素來組成的。在js中，表單對應的則是HTMLFormElement類型。它和其他HTML元素一樣具有相同的預設屬性。下麵是HTMLFormElement獨有的屬性和方法： acceptCharset:伺服器能夠處理的字元集，等價於HTML的accept-chars ...
在HTML中，表單是由<form>元素來組成的。在js中，表單對應的則是HTMLFormElement類型。它和其他HTML元素一樣具有相同的預設屬性。下麵是HTMLFormElement獨有的屬性和方法： acceptCharset:伺服器能夠處理的字元集，等價於HTML的accept-charset特性 action：接收請求的URL，等價於HTML中的action特性。 elements：表單中所有控制項的集合（HTMLCollection） enctype：請求的編碼類型 length：表單中控制項的數量 method:要發送的HTTP請求類型，通常是get或post name：表單的名稱 reset():將所有表單域重置為預設值 submit():提交表單 獲取表單引用的推薦方式 1.通過id屬性過的 2.通過document.forms獲取，在用name索引 提交表單的方式 1.用submit提交按鈕提交 2.from.submit()提交，不會驗證數據 3.ajax方式提交 重置表單 1.使用重置按鈕reset 2.form.reset() 3.自定義的清空表單方式 表單欄位 每個表單都有elements屬性，該屬性是表單中所有元素的集合。這個集合是一個有序表，其中包含著表單中的所有欄位。下麵是共有的表單欄位屬性： disabled:布爾值，表示當前欄位是否被禁用 form:指向當前欄位所屬表單的指針：只讀 name:當前欄位的名稱 readOnly:布爾值，表示當前欄位是否只讀 tabIndex:表示當前欄位的切換（tab）序號 type:當前欄位的類型 value:當前欄位被提交給伺服器的值。對文件欄位來說，這個屬性是只讀的，包含著文件在電腦中的路徑。 致謝屬性除了form意外，其他的欄位都可以使用js動態修改。 共有的表單欄位方法 focus():激活欄位，使其可以響應鍵盤事件 blur():失去焦點，觸發 在HTML5中，表單中新增加了autofocus屬性，自動把焦點移動到相應欄位。 共有的表單欄位事件 除了支持滑鼠鍵盤更改和HTML事件之外，所有的表單欄位都支持下列3個事件： blur，change，focus 文本框腳本 在HTML中，有兩種方式來表現文本框：一種是使用input元素的單行文本，另一種是使用textarea的多行文本框。使用input方式，必須添加type，設置為“text”。通過設置size特性，可以指定文本框內能夠顯示的字元數。value屬性可以設置文本框的初始值。maxlength特性則是用於指定文本框內可以接受的最大字元數。<textarea>可以指定cols和rows，確定大小。 上述兩種文本框都支持select()方法，這個方法主要用於選擇文本框中的所有文本。不接受任何參數。與這個方法對應的select事件，在選擇了文本框中的文本時事件觸發。 在獲取文本內容上，可以使用以下代碼獲取： textbox.value.substring(textbox.selectionStart,textbox.selectionEnd); 選擇部分文本的方法是setSelectionRange()方法。接收兩個參數：要選擇第一個字元的索引和最後一個字元的索引。要調用setSelectionRange()之前或之後立即將焦點設置到文本框。而IE中使用的方式是適用範圍來解決文本的問題。 操作剪貼板 以下是6個剪貼板事件 beforecopy：在發生複製操作前觸發 copy：在發生複製時觸發 beforecut：在發生剪貼前操作 cut：在發生加貼時操作 beforepaste：在發生黏貼操作前觸發 paste：在發生黏貼操作時觸發 要訪問剪貼板中的數據，可以使用clipboardData對象，在IE中，這個對象是window對象的屬性，在friefox，safari和chrome，這個對象是相應event對象的屬性。這個clipboardData對象有三個方法：getData(),setData(),clearData()。它接收一個參數，即要取得數據的格式。IE中：有兩種數據格式，“text”,"URL".在friefox，safari和chrome中，這個參數是一種MIME類型，不過可以用“text”代表“text/plain”.下麵是獲取剪貼板數據的方法： getClipboardText:function(event){ var clipboardData=(event.clipboardData||window.clipboardData); return clipboardData.getData("text"); } setClipboardText:function(event,value){ if(event.clipboardData){ return event.clipboardData.setData("text/plain",value); }else if(window.clipboardData){ return window.clipboardData.setData("text",value); } } 將這兩個方法放到EventUtil對象中。 另外，考慮易用性，可以使用自動換焦的方式來處理文本輸入。 HTML5約束驗證API
下麵的功能只有支持HTML5的瀏覽器才會支持。 1.必填約束欄位 在必填欄位中添加屬性required。它適用於<input>,<textarea>,<select>欄位。 使用下麵的代碼可以檢測瀏覽器是否支持required屬性： var isRequiredSupported="required" in document.createElement("input"); 2.其他輸入類型 為type增加了幾個值，這些值能反映數據類型的信息，而且還能提供一些預設的驗證。其中，“email”和“url”是兩個得到支持最多的類型，各瀏覽器也都為它們增加了定製的驗證機制。 var isEamilSupported=(document.createElement("input").type=="email"); 3.數值範圍 除了“email”和“URL”，HTML5還定義了另外幾個輸入元素。這幾個元素都要求填寫基於數字的值：“number”，“range”，“datetime”，“datetime-local”，“date”，“mouth”，“week”，“time”。目前瀏覽器對這些類型支持並不好，如果真想使用的話要小心。對這事數值類型的輸入元素可以指定min屬性，max屬性，step屬性。同時這些數值類型元素還有兩個方法：stepUp(),stepDown()。都接受一個參數，要在當前基礎上加上或減去的數值。 4.輸入模式 HTML5新增了pattern屬性，這個屬性的值是一個正則表達式，用於匹配文本框中的值。 可以使用以下代碼來檢測瀏覽器是否支持pattern屬性： var isPatternSupported="pattern" in document.createElement("input"); 5檢測有效性 使用checkValidity()方法可以檢測表單中的欄位是否有效。所有表單的欄位都有這個方法，如果檢查有效返回true。 input的validity屬性會給出什麼欄位有效和無效的具體信息。 6.禁用驗證 通過設置表單的novalidate屬性，可以是表單不進行驗證。用js獲取form之後，設置它的novalidate屬性為true，會禁用表單驗證。 選擇框文本 選擇框通過<select>和<option>元素創建的。除了共有的屬性和方法外，下麵的是特有的屬性和方法： add(newOption,relativeOption):向控制項中插入新<option>元素，其位置相關項relativeOption之前 multiple:布爾值，表示是否允許多項選擇，等價於HTML的multiple特性 options:控制項中所有<option>元素的HTMLCollection remove(index):移除給定位置的選項 selectedIndex:基於0的選中項的索引，如果沒有選中項的索引，則值為“-1”。 size:選擇框中的可見行數，等價於HTML的size特性。 在DOM中，每個<option>元素都有一個HTMLOptionElement對象表示。為了便於訪問，HTMLOptionElement對象添加了下列屬性： index：當前項在option集合中的索引 label：當前選項的標簽，等價於HTML中的label標簽 selected：布爾值，表示當前選項是否被選中。將這個屬性設置為true可以選中當前選項 text：選項的文本 value：選項的值，等價於HTML的value特性。 註意：選擇框的change事件與其他表單欄位的change事件觸發的條件不一樣，其他表單欄位的change事件是在值被修改且焦點離開當前欄位時觸發而選擇框的change事件只要選中了選項就會觸發。 添加選項的方法 1.創建option的節點，添加option的屬性，將節點添加到select節點下 2.直接添加屬性方式創建節點 3.用add方式添加節點 移動和重排都要改變option元素的index。 表單序列化 表單序列化的準則： 1：對錶單欄位的名稱和值進行URL編碼，使用和號（&）分隔 2：不發送禁用的表單欄位 3：只發送勾選的覆選框和單選按鈕 4：不發送type為“reset”和“button”的按鈕 5：多選框中每個選中的值單獨一個條目 6：在單擊提交按鈕提交表單的情況下，也會發送提交按鈕。否則不發送提交按鈕。也包括type為“image”的input元素 7：<select>元素的值，就是選中的<option>元素的value特性值 在表單序列化過程中，一般不包含任何按鈕手段，因為結果字元串可能是通過其他方式提交的。除此之外的其他上述規則應該遵循，以下是實現表單序列化的代碼： function serialize(form){ var parts=[],field=null,i,len,j,optLen,option,optionValue; for(i=0,len=form.elements.length;i<len;i++){ field=form.elements[i]; switch(field.type){ case "select-one": case "select-multiple": if(field.name.length){ for(j=0,optLen=field.options.length;j<optLen;j++){ option=field.options[j]; if(option.selected){ optValue=""; if(option.hasAttribute){ optValue=(option.hasAttribute("value")?option.value:option.text); }else{ optValue=(option.attributes["value"].specified?option.value:option.text); } parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(optValue)); } } } break; case undefined: case "file": case "submit": case "reset": case "button": break; case "radio": case "checkbox": if(!field.checked){break;} default: if(field.name.length){ parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value)); } } } return parts.join("&"); } 富文本編輯 富文本編輯又稱WYSISWG（所見即所得）。這一項技術的本質，就是在頁面中嵌入一個包含空HTML頁面的iframe。通過設置designMode屬性，這個空白的HTML頁面可以被編輯，而編輯對象則是該頁面<body>的HTML代碼。designMode屬性有兩個可能的值：“off”預設值和“on”。在設置為“on”時，整個文檔變得可編輯，然後就可以像使用文字處理軟體一樣。 使用contentededitable屬性 把它應用到給頁面中的任何元素，然後用戶可以立即編輯該元素，不需要iframe，空白頁和js，只要為元素設置contentededitable屬性即可。 它的屬性值有3個，true表示打開，false表示關閉，inhert表示從父元素那裡繼承。 操作富文本 與富文本編輯交互的方式，就是使用document.execCommand()。這個方法可以對文檔執行預定義的命令，而且可以應用大多數格式。可以為document.execCommand()方法傳遞3個參數：要執行的命令名稱，表示瀏覽器是否應該為當前命令提供用戶界面的一個布爾值和執行命令必須的一個值（不需要值，可設為null）。為了保證瀏覽器相容，需要設置第二個參數為false。 除了命令之外，還有一些與命令相關的方法。第一個方法是queryCommandEnabled(),可以檢驗是否可以針對當前選擇的文本或者當前插入字元處所在的位置執行相應的命令。這個方法接收一個參數：即要檢測的命令。如果允許返回true。 queryCommandState()方法用來確定是否已將指定的命令應用到了選擇的文本。 queryCommandValue()方法用於取得執行命令時傳入的值。 富文本選區 在富文本編輯器中，使用框架（iframe）的getSelection()方法，可以確定實際選擇的文本。這個方法是window對象和document對象的屬性，調用它返回一個表示當前選擇文本的selection對象。 當富文本中存在表單時，表單是不能提交的，只能使用代碼進行提交。
