1. 取得<form>裡元素
   1. <form name="form1"> <input type="text" id="username" /><br /> <input type="password" id="password" /><br /> <input type="button" id="send" /> </form>
      1. 每一對<form>...</form>都解析為一個form物件， 可以透過document.forms集合來引用這些物件， 例如一個name屬性為"form1"：document.forms["form1"]來取得， 或使用表單在HTML中的索引來引用： document.forms[1]，引用第二個表單物件
      2. 每個表單中的元素，都包含在forms的elements集合中， 可以利用元素在集合中的位置或元素的name屬性來取得元素的引用。
         1. 以欄位名稱(name屬性)存取表單欄位
            1. document
            2. form1
            3. username
            4. password
            5. send
            6. var oform = document.forms["form1"];
            7. var getName = oform.elements.username.value;
            8. 取elements集合中name屬性為username的值
            9. var getName = oform.elements["username"].value;
            10. 以元素名稱來取值
            11. var getName = oform.elements[0].value;
            12. 表單和欄位都沒有指定name或id屬性， 可使用forms與elements的index位置存取欄位
            13. document
            14. forms[0] (form1)
            15. elements[0] (username)
            16. elements[1] (password)
            17. elements[3] (send)
            18. document.forms[0].elements[0].value;
            19. forms
            20. 所有表單物件是都<form>的物件集合
            21. elements
            22. 表單內所有欄位物件的集合
            23. forms與elements為一個Array Object， 依tag在HTML文件出現的順序來編號，index由0開始。 此方法，要注意tag順序的變動會影響JavaScript程式。
2. form
   1. 屬性
      1. action
         1. 存取form處理程式路徑
      2. elements
         1. Array，表單中所有表單欄位的集合
      3. enctype
         1. 表單向伺服器發送資料時，資料應該使用的編碼方法， 預設為「application/x-www-form-urlencoded」， 如果要上傳檔案，則「multipart/form-data」
      4. length
         1. 表單欄位的數量
      5. method
         1. 存取form資料傳送方法，有post與get
      6. name
         1. 表單的名稱，即<form>中的name屬性
      7. target
         1. form表單作用的框架
   2. 方法
      1. reset()
         1. 重設form欄位回預設值
      2. submit()
         1. 送出form欄位到伺服器
3. input
   1. 屬性
      1. 一般
         1. form
            1. 取得input屬於那一個form
         2. name
            1. name屬性
         3. type
            1. 類型
         4. value
            1. 設定或取得input的值
            2. 除下拉式功能表以外
         5. accessKey
            1. 此input的快捷鍵
         6. accept
            1. 顯示伺服器支援的ContentType清單
         7. defaultValue
            1. 設定或取得input的預設值
         8. disabled
            1. 設定input是否有作用，true為沒作用
         9. tabIndex
            1. 設定Tab鍵切換順序
      2. 文字
         1. maxLength
            1. 設定或取得input最大字元數
         2. readOnly
            1. 設定或取得input是否是一個唯讀input，true為是
         3. size
            1. 設定或取得input的尺寸
      3. disabled與readOnly
         1. disable會使欄位無效，內容值無法傳送或讀取
         2. readOnly會使欄位唯讀，但內容可傳送或讀取
   2. 方法
      1. input方法
         1. blur()
            1. 設定input失去處理權
         2. focus()
            1. 設定input擁有處理權
         3. select()
            1. 選取input，使用反白顯示文字內容，只可以使用在文字欄位
         4. click()
            1. 觸發onclick事件，button、checkbox、radio、reset、submit
      2. 如果使用input方法選擇文字欄位，需同時使用select()與focus()，欄位內容才會反白與取得處理權 obj.select(); obj.focus();
   3. 在button中使用submit()
      1. <input type="button" value="Submit" onclick="document.forms["form1"].submit();" />
      2. 如果使用submit()方法來提交表單，不會觸發<form>的onsubmit()事件， 這點與<input type="submit />或<input type="image" />提交按鈕不同。
      3. 防止使用者重覆按下提交按鈕
         1. <input type="button" value="Submit" onclick="this.disabled=true;this.form.submit();" />
   4. 滑鼠經過時自動選擇文字
      1. 在滑鼠經過時onmouseover="this.focus()"; 在取得處理權後，選取文字，onfocus="this.select()";
4. checkbox-radio
   1. 屬性
      1. checked
         1. 設定或取得是否選取或核取，選取或核取為true
      2. defaultChecked
         1. true預設選取或核取，checkbox或radio裡的checked屬性
   2. 被選取的值
      1. if (oRadio[i].checked) alert(oRadio[i].value);
   3. 設定選取
      1. document.forms["form1"].oRadio[i].checked = true;
   4. 全選、全不選、反選
      1. function changeBoxes(action) { var objForm = document.forms["form1"]; var CB = objForm.hobby; //取得checkbox屬性name=hobby的集合 for (var i=0,item; item = CB[i];i++){ if (action < 0) item.checked = !item.checked; //action傳入-1為反選 //利用!來相反所有選擇 else item.checked = action; // action傳入1(true)為全選 // action傳入0(false)為全不選 } }
5. select-option
   1. select物件就是<select>，其中disabled、form、name、tabIndex、type、value等屬性和input物件相同
   2. select屬性
      1. length
         1. 取得共有多少<option>
      2. multiple
         1. 設定或取得選擇是否複選，true為多選
      3. options
         1. 取得option物件集合，這是一個Array， 例：SB.options[2]表示<select>中的第3項
      4. selectedIndex
         1. 傳回選擇的選項index值，這是options的Index值， 例：SB.options[selectedIndex].value;
      5. size
         1. 設定欄位為下接式或清單，size大於1是清單方塊
      6. text
         1. 選項名稱
      7. type
         1. select類型，單選傳回select-one，複選select-multiple
   3. option屬性
      1. text
         1. 存取選擇文字
      2. defaultSelected
         1. option預設選項，即selected屬性
      3. index
         1. option陣列index位置，以0開始
      4. label
         1. 設定或取得選項說明文字
      5. selected
         1. 是否被選取，true為選取
   4. 取得<select>選取值
      1. function getSelectValue(selectName){ var objForm = document.forms["form1"]; var SB = document.elements[selectName]; //取得對應的select if (SB.type = "select-one") { //單選 var Choice = SB.selectedIndex; alert("Your Choice" + SB.options[Choice].text); } else { //複選 var Choice = new Array; for (var i=0,len=SB.options.length; i<len;i++){ if (SB.options[i].selected) Choice.push(SB.options[i].text); } alert("Your Choice" + Choice.join()); } }
   5. 新增、替代、刪除<option>
      1. 新增
         1. 使用Option()建構式直接新增
         2. var addOption = new Option(text, value, defaultSelected, selected);
         3. defaultSelected與selected預設為0(false)，可不設定。
         4. 通常會將<select>清單的length直接設定為新選項，即最後一項。
         5. SB.options[SB.options.length] = addOption;
         6. function addOption(selectName, optionIndex) { var objForm = document.forms["form1"]; var SB = objForm.elements[selectName]; var addOP = new Option("金剛", "King Kong"); //處理IE相容性 //先新增，再移動到指定Index SB.options[SB.options.length] = addOP; SB.insertBefore(addOP, SB.options[optionIndex]); }
      2. 替代
         1. SB.options[selectIndex] = addOption;
      3. 刪除
         1. SB.options[selectIndex] = null;
         2. function removeOption(selectName, optionIndex){ var objForm = document.forms["form1"]; var SB = objForm.elements[selectName]; SB.options[optionIndex] = null; }
6. textarea
   1. testarea物件就是<textarea>，其中accessKey、defaultValue、disabled、form、name、readOnly、tabIndex、type等屬性和input物件相同
   2. 屬性
      1. cols
         1. 每一行可以有多少字元
      2. rows
         1. 多少行(列)
   3. 限制使用者輸入字元數
      1. 由於<textarea>沒有<input>的maxlength，所以我們自訂一個屬性來使用
      2. <textarea name="comments" id="comments" cols="40" rows="4" maxlength="100" onkeypress="return lessThan(this);"></textarea>
      3. function lessThan(objTA){ //比較輸入字元數與「自訂屬性maxlength」的比較結果 return objTA.value.length < objTA.getAttribute("maxlength"); }
7. Regular Expression
   1. 基本字元
      1. \n
         1. 換行符號
      2. \r
         1. Enter
      3. \t
         1. Tab
      4. \xHex
         1. 16進位ASCII
      5. \xOct
         1. 8進位ASCII
      6. \符號
         1. 轉義，讓符號只是符號，無RE作用， 因為符號在RE裡有其他作用， \.代表.、\?代表?， 符號有： .、?、/、\、[、] {、}、(、)、+、*、|
   2. 字元集"["與"]"符號
      1. [abc]
         1. 代表英文a、b、c
      2. [a-z]
         1. 代表26個英文小寫
      3. [A-Z]
         1. 代表26個英文大寫
      4. [0-9]
         1. 代表數字0到9
      5. [a-zA-Z]
         1. 代表所有大小寫英文
      6. [^abc]
         1. 除了a、b、c以外任何字元
      7. -
         1. 英文或數字的一個範圍
      8. [^]
         1. 在[]裡的^為排除的意思，
   3. 常用範圍
      1. \w
         1. [0-9a-zA-Z_]，任何英數字和底線
      2. \W
         1. [^0-9a-zA-Z_]，也就是^\w的意思
      3. \d
         1. [0-9]，任何數字
      4. \D
         1. [^0-9]，也就是^\w的意思
      5. \s
         1. 比對空格，空白字元(space)、tab、 換行字元、return/enter
      6. .
         1. 點，比較任何字元，換行字元(newline)除外
   4. 語法
      1. var reName = /pattern/[g|i|gi];
         1. 使用變數來儲存pattern，遇/.../字串自動建立RegExp物件
         2. 把pattern被在"//"符號之間，就是你所有要過濾的規則，例如/[0-9]/
         3. [g|i|gi]選擇性參數，尋找方式
            1. g
            2. 比對字串中所有符合pattern字串的子字串, 如果沒有設定,將只找第一個符合pattern的字串
            3. i
            4. 不區分pattern字串的英文大小寫
         4. (1) var reJS = /[jJ]script/; (2) var reJS = /[jJ]ava[sS]cript/;
            1. (1)jscript(j小寫)和Jscript(J大寫)都符合 (2)2*2會出現四種符合的組合。javascript、javaScript、Javascript、JavaScript。
      2. ^開頭$結尾
         1. var reStar = /^This/; 找出開頭是This的字串，注意，此^不是放在[^]，位置不同作用不同 var reEnd = /bye.$/ 找出結尾是bye.的字串
            1. 開頭與結尾
            2. ^
            3. 比對字串開頭
            4. $
            5. 比較字串結尾
      3. var reID = /^[a-zA-Z]{1}[1-2]{1}[0-9]{8}/; 需要指定「出現次數」，例如身分證， A123456789，第一碼為英文，第二碼為男女，3-9碼為數字
         1. 量詞
            1. ?
            2. 0或1次
            3. *
            4. 0或多次
            5. +
            6. 1或多次
            7. {n}
            8. 出現n次
            9. {n,}
            10. 至少n次
            11. {n,m}
            12. n到m次
            13. ( )
            14. 集合字元或/和中介字元， 成為子樣式
            15. /(Hot)? ?Donuts/ 可比對出Donuts或Hot Donuts
            16. (red|blue) pill/ red pill或blue pill
      4. 定義好樣式(pattern)後，可使用test()方法來測試
         1. var regex = /^\d{5}/$; if (!regex.test(inputField.Value)) ...
   5. RegExp物件
      1. var objRE = new RegExp("pattern字串", "g|i|gi");
         1. 第一個pattern字串(不需放在//符號之間)，第二個為尋找方式的參數
      2. objRE.test(strValue);
         1. 使用RegExp物件的test()方法進行比對，符合回傳true
      3. String.match(objRE);
         1. 如果在JS字串變數需要尋找是否擁有符合RE pattern的子字串，此時請使用String物件的match()方法
         2. var str = "This is book."; var objRE = new RegExp("is", "g"); var result = str.match(objRE);
            1. document.write(result); // is, is，沒有會傳回null，有會傳回Array document.write(result.length); // 2, 傳回符合數