表單的基礎知識 在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物件。 當富文字中存在表單時，表單是不能提交的，只能使用程式碼進行提交。