歡迎大神評論指正！歡迎關注前端小白一鍋！

我們在創建表單的時候主要用到的表單控件有<form>、<input>、<select>、<textarea>、<fieldset>、<button>等，本文將列出在JavaScript中操作這些表單控件時會用到的一些屬性和方法。

HTMLFormElement類型（form元素）

在HTML中，表單是由<form>元素來表示的，而在JavaScript中，表單對應的則是HTMLFormElement類型，它繼承自HTMLElement類型，與其他HTML元素具有相同繁榮默認屬性，但我們重點要關注的是它自己獨有的屬性和方法。

acceptCharset屬性表示服務器能夠處理的字符集；

action屬性表示接受請求的服務器URL；

elements屬性表示表單中所有控件的集合；

enctype屬性表示請求編碼的類型；

length屬性表示表單中控件的數量；

method屬性表示將要發送的http請求類型，通常是“get”或“post”；

name屬性表示表單的名稱；

autocomplete 屬性規定輸入字段是否應該啟用自動完成功能。有兩個取值“on”（表示啟用）“off”表示關閉。自動完成允許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在字段中填寫的選項。

reset（）方法可以將所有表單域重置為默認值；

submit（）方法可以提交表單；

checkValidity（）方法可以顯示的驗證表單；

label元素

html For屬性用於關聯表單控件的激活行為（可使點擊label與點擊表單控件的行為一致），可關聯的元素有下列（ 設置了hidden的表單控件無法關聯）：button、input、keygen、meter、output、progress、select、textarea；

form屬性，可以修改元素的form屬性為相關聯表單Id（同時元素中對應的 for屬性也應該修改）。但是更改form屬性之後label並不能自動綁定到新表單對應的元素上，label.set Attribute('form','new Form Id');

input元素

type屬性可用於控制表單控件的外觀以及數據類型（默認為text），在不同的瀏覽器不同數據類型有不同的展示效果。

select元素

該元素用於指定選項表中需要選擇的選項。主要有三個子標籤select（構建選項表）、optgroup（選項分組）、option（選項內容）。

textarea元素

多行文本框，其屬性和方法如下：

name屬性表示文本框名；

value屬性存儲用戶輸入信息；

select()方法用於全選當前輸入的內容；

selectionStart屬性表示選中的內容的起始位置，無選中時返回當前光標所在位置；

selectionEnd屬性表示選中內容結束位置，無選中時返回光標位置；

selection Direction屬性表示文本選取方向（取值為forward或backward）；

setSelectionRange(start,end[,direction])（使用程序選中內容）

setRangeText(replacement[,start,end,[mode]])（設置內容範圍）

需要注意的是這些屬性和方法都是JavaScript調用DOM對象接口修改表單控件結構或外觀時使用的，他們與HTML中表單相關元素標籤及其屬性是一一對應的。

收藏轉發請先關注，原創不易，謝謝支持！