form簡(jiǎn)介

<form>是HTML中的一個(gè)元素廊谓，它表示文檔中的一個(gè)區(qū)域，這個(gè)區(qū)域包含了交互控件彩扔，用于向web服務(wù)器提交信息妆档。

除全局屬性外，<form>還有如下一些屬性：

• accept-charset：一個(gè)以空格或逗號(hào)分隔（在HTML5中虫碉，僅能以空格作為分隔符）的列表贾惦，這個(gè)列表包括了服務(wù)器支持的字符編碼。瀏覽器以這些編碼被列舉的順序使用它們敦捧。默認(rèn)值是一個(gè)保留字符串“UNKNOWN”须板。這個(gè)字符串指的是，和包含這個(gè)<form>元素的文檔相同的字符編碼绞惦。
• action：處理<form>表單數(shù)據(jù)的程序所在的URL地址逼纸，即向何處提交表單數(shù)據(jù)。
• autocomplete：用于設(shè)置<input>元素是否能夠有默認(rèn)值济蝉，這個(gè)默認(rèn)值是由瀏覽器自動(dòng)補(bǔ)全的杰刽。這個(gè)設(shè)置可以被<form>的子元素的 autocomplete 屬性覆蓋。
  有兩個(gè)取值：off（瀏覽器不會(huì)自動(dòng)補(bǔ)全）王滤，on（瀏覽器會(huì)根據(jù)用戶之前在form中輸入的值自動(dòng)補(bǔ)全）贺嫂。
• enctype：提交給服務(wù)器的表單數(shù)據(jù)內(nèi)容的MIME類型，有三個(gè)取值：
  application/x-www-form-urlencoded（屬性未指定時(shí)的默認(rèn)值）雁乡，multipart/form-data（用于 type為 "file" 的 <input>元素）第喳，
  text/plain (HTML5)。
  enctype值可以被<button>或者<input>元素中的 formenctype 屬性覆蓋踱稍。
• method：向?yàn)g覽器提交form表單的HTTP方法曲饱，有兩種方法：
  post方法：表單數(shù)據(jù)被包含在請(qǐng)求體中發(fā)送給服務(wù)器；
  get方法：表單數(shù)據(jù)會(huì)被追加到查詢字符串中發(fā)送給服務(wù)器珠月。
  這個(gè)值可以被<button>或者<input>元素中的 formmethod 屬性覆蓋扩淀。
• name：指定form的名稱。
• novalidate：這個(gè)屬性是一個(gè)布爾屬性啤挎，指定了是否對(duì)表單提交的數(shù)據(jù)進(jìn)行驗(yàn)證驻谆。這個(gè)屬性可以被<button>或<input>的formnovalidate屬性覆蓋。
• target：指定<form>提交后，在哪里顯示響應(yīng)胜臊。有以下幾種取值：
  _self：默認(rèn)值勺卢，在當(dāng)前文檔頁(yè)面加載返回值；
  _blank：在新窗口加載返回值象对；
  _parent：在父級(jí)上下文中加載黑忱，如果沒(méi)有父級(jí)，按_self執(zhí)行织盼；
  _top：如果是HTML 4文檔杨何，清空當(dāng)前文檔，加載返回內(nèi)容沥邻；如果是HTML5危虱，在頂級(jí)上下文內(nèi)加載返回值。如果沒(méi)有父級(jí)唐全，按_self執(zhí)行埃跷。
  iframename: 指定的frame中加載。

form表單控件

1.<input>

<input>是form表單中最常用的輸入對(duì)象之一邮利，具有如下屬性：

• type：設(shè)置控件的類型弥雹，默認(rèn)為text。
  根據(jù)type屬性的不同延届，<input>有不同的作用剪勿，<input>的常見(jiàn)type如下：
  • button：無(wú)缺省行為按鈕。
  • radio：?jiǎn)芜x按鈕方庭。必須使用 value 屬性定義此控件被提交時(shí)的值厕吉，使用checked指示控件是否被默認(rèn)選擇。在同一個(gè)“單選按鈕組”中械念，所有單選按鈕的 name 屬性使用同一個(gè)值头朱； 一個(gè)單選按鈕組中，同一時(shí)間只有一個(gè)單選按鈕可以被選擇龄减。
  • checkbox：復(fù)選框项钮。必須使用 value 屬性定義此控件被提交時(shí)的值，使用 checked 屬性指示控件是否被選擇希停，也可以使用 indeterminate 指示復(fù)選框在一種不確定狀態(tài)烁巫。
  • color：用來(lái)指定顏色的控件。
  • date：用來(lái)輸入日期的控件宠能。
  • datetime：基于UTC時(shí)區(qū)的日期時(shí)間輸入控件程拭。
  • datetime-local:用于輸入日期時(shí)間的控件，不包含時(shí)區(qū)棍潘。
  • month：輸入年月的控件，不帶時(shí)區(qū)。
  • week：用于輸入一個(gè)由星期-年組成的日期亦歉，日期不包括時(shí)區(qū)恤浪。
  • time：用于輸入不含時(shí)區(qū)的時(shí)間控件。
  • email：用于編輯email的字段肴楷，當(dāng)提交表單時(shí)水由，會(huì)自動(dòng)地對(duì) email 字段的值進(jìn)行驗(yàn)證。合適的時(shí)候可以使用 :valid 和 :invalid CSS 偽類赛蔫。
  • tel：用于輸入電話號(hào)碼的控件砂客。
  • url：用于編輯URL的字段。
  • file：此控件可以讓用戶選擇文件呵恢。使用 accept 屬性可以定義控件可以選擇的文件類型鞠值。
  • hidden：不顯示在頁(yè)面上的控件，但它的值會(huì)被提交到服務(wù)器渗钉。
  • image：圖片提交按鈕彤恶，必須使用 src 屬性定義圖片的來(lái)源及使用 alt 定義替代文本。
  • number：用于輸入浮點(diǎn)數(shù)的控件鳄橘。
  • password：用于輸入值被掩蓋的單行文本字段声离，可以用maxlength指定輸入值的最大長(zhǎng)度。
  • range：用于輸入不精確值控件瘫怜。
  • reset：用于將表單所內(nèi)容設(shè)置為缺省值的按鈕术徊。
  • submit：用于提交表單的按鈕。
  • search：用于輸入搜索字符串的單行文本字段鲸湃，如果換行會(huì)從輸入的值中自動(dòng)移除赠涮。
  • text：?jiǎn)涡凶侄危瑩Q行會(huì)將自動(dòng)從輸入的值中移除唤锉。
• accept：如果該元素的 type 屬性的值是file,則該屬性表明了服務(wù)器端可接受的文件類型世囊；否則它將被忽略。
• autocomplete：設(shè)置是否自動(dòng)填充窿祥，如果type屬性的值是hidden株憾、checkbox、radio晒衩、file嗤瞎，或?yàn)榘粹o類型（button、submit听系、reset贝奇、image），則本屬性被忽略靠胜。
• autofocus：設(shè)置在頁(yè)面加載時(shí)自動(dòng)獲得焦點(diǎn)掉瞳，如果type屬性設(shè)置為隱藏則不能應(yīng)用毕源。
• autosave：設(shè)置保存填寫(xiě)數(shù)據(jù)，如果type的屬性的值是search陕习，當(dāng)頁(yè)面加載時(shí)霎褐，之前的搜索項(xiàng)目會(huì)在下拉菜單中出現(xiàn)。
• checked：如果該元素的type屬性的值為radio或者checkbox该镣，則該布爾屬性的存在與否表明了該控件是否是默認(rèn)選擇狀態(tài)冻璃。
• disabled：表示此控件被禁用，在禁用的控件中损合， click事件將不會(huì)被分發(fā)省艳，且禁用的控件的值在提交表單時(shí)也不會(huì)被提交 。如果type屬性為hidden嫁审，此屬性將被忽略跋炕。
• form：設(shè)置與此控件關(guān)聯(lián)的<form>表單，該屬性的值與所關(guān)聯(lián)的<form>的id一致土居。
• formaction：表示處理<input>提交信息的程序的URI枣购，如果指定了，將重寫(xiě)<input>所屬<form>的action屬性擦耀。
• formenctype：如果<input>的類型是submit或image棉圈，此屬性值指定提交表單到服務(wù)器的內(nèi)容類型，如果指定了眷蜓，將重寫(xiě)所屬<form>的enctype屬性分瘾。
• formmethod：如果<input>的類型是submit或image，此屬性指定了提交表單的HTTP方法吁系。
• height： 如果type屬性是image德召，此屬性指定image的顯示高度。
• width：如果type屬性是image汽纤，此屬性指定image的顯示寬度上岗。
• list：這個(gè)屬性可為用戶預(yù)設(shè)一組輸入選項(xiàng)，其值與同一文檔中的 <datalist>的id一致蕴坪。
• max：設(shè)置日期或數(shù)字的最大值肴掷。
• min：設(shè)置日期或數(shù)字的最小值。
• multiple：當(dāng)type屬性為email或file時(shí)背传，設(shè)置用戶是否可以輸入多個(gè)值呆瞻。
• name：設(shè)置控件的名稱。
• pattern：檢查輸入值的正則表達(dá)式径玖。
• placeholder：提示用戶可能的輸入值痴脾。
• readonly：設(shè)置輸入值是否不可修改；如果type是hidden梳星，range赞赖，color滚朵，checkbox，radio前域，file或button始绍，則該屬性可忽略。
• required：設(shè)置用戶在提交表單時(shí)該控件的值必填话侄。
• spellcheck：設(shè)置拼寫(xiě)檢查。
• src：如果type為image学赛，該屬性設(shè)置了image的source年堆。
• value：設(shè)置控件的初始值，除了type是checkbox或radio時(shí)必須指定value的值盏浇，其他情況下該屬性是可選的变丧。

2.<button>

<button>表示一個(gè)可以點(diǎn)擊的按鈕，<button>元素比<input>元素更易樣式化绢掰，<button>元素內(nèi)部可以添加內(nèi)聯(lián)HTML內(nèi)容（如<em>痒蓬，<strong> 甚至<img>），并使用:after和:before偽元素實(shí)現(xiàn)復(fù)雜的渲染滴劲。但是不可以放圖像映射攻晒，因?yàn)樗鼘?duì)鼠標(biāo)和鍵盤(pán)敏感的動(dòng)作會(huì)干擾按鈕的行為。

<button>有如下常見(jiàn)屬性：

• autofocus：一個(gè)布爾屬性班挖，規(guī)定頁(yè)面加載時(shí)按鈕自動(dòng)獲得輸入焦點(diǎn)鲁捏。
• disabled：設(shè)置用戶不能與按鈕進(jìn)行交互。
• form：表示<button>元素關(guān)聯(lián)的<form>元素（它的表單擁有者）萧芙。
• formaction：表示處理<button>提交信息的程序的URI给梅，如果指定了，將重寫(xiě)<button>所屬<form>的action屬性双揪。
• formenctype：如果<button>是的類型是submit动羽，此屬性值指定提交表單到服務(wù)器的內(nèi)容類型。如果指定了渔期，將重寫(xiě)<button>所屬<form>的enctype屬性运吓。
• formnovalidate：此屬性指定<button>提交時(shí)不需要驗(yàn)證。如果指定了擎场，它會(huì)重寫(xiě)<button>所屬<form>的novalidate屬性羽德。
• formtarget：如果<button>是submit類型，此屬性指定表單數(shù)據(jù)提交后在哪里顯示響應(yīng)迅办。如果指定了宅静，它會(huì)重寫(xiě)<button>所屬<form>的target屬性。
• name：指定<button>的名稱站欺。
• type：指定<button>的類型姨夹。包括：submit纤垂，reset，button和menu磷账。
• value：指定<button>的初始值峭沦。

3.<select>，<optgroup>逃糟，<option>吼鱼，<datalist>

<select>可創(chuàng)建選項(xiàng)菜單，菜單內(nèi)的選項(xiàng)為<option>绰咽，可由<optgroup>分組菇肃。
<select>具有如下屬性：

• autofocus：讓一個(gè)對(duì)象在頁(yè)面加載后自動(dòng)獲得焦點(diǎn)。
• disabled：禁用下拉列表取募。
• form：指定<select>所關(guān)聯(lián)的<form>表單琐谤。
• multiple：設(shè)置select是否可以多選，默認(rèn)為單選玩敏。
• name：指定控件名稱斗忌。
• required：規(guī)定用戶提交表單時(shí)，select的值不能為空旺聚。
• size：規(guī)定下拉列表可見(jiàn)選項(xiàng)的數(shù)量织阳。
  <optgroup>會(huì)創(chuàng)建包含在<select>中的一組<option>選項(xiàng)，有兩個(gè)屬性：
• disabled 該選項(xiàng)組中的選項(xiàng)被禁用翻屈。
• label 設(shè)置選項(xiàng)組的名字陈哑。
  <option>可以在設(shè)置彈出窗口或其他項(xiàng)目列表中的菜單項(xiàng)，有如下屬性：
• disabled：設(shè)置選項(xiàng)不可選伸眶。
• label：表示選項(xiàng)含義惊窖。
• selected：設(shè)置初始被選中的選項(xiàng)。
• value：設(shè)置選項(xiàng)被選中時(shí)厘贼，提交給表單的值界酒。
  例如：

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option disabled>Option 2.1</option>
    <option selected>Option 2.2</option>
  </optgroup>
</select>

<datalist>包含了一組<option>元素，規(guī)定了輸入域的選項(xiàng)列表嘴秸。如果需要把<datalist>綁定到輸入域毁欣，則輸入域的list屬性需引用<datalist>的id，<option>元素一定要設(shè)置value的值岳掐。
例如：

<input list="list" name="input">
<datalist id="list">
    <option value="1">
    <option value="2">
    <option value="3">
</datalist>

4.<label>

<label>元素用于為表單控件設(shè)置標(biāo)注凭疮，建立文字標(biāo)簽與表單控件的關(guān)系，點(diǎn)擊<label>元素串述，相應(yīng)的表單控件會(huì)獲得焦點(diǎn)执解。
<label>元素具有如下屬性：

• accesskey：設(shè)置從鍵盤(pán)訪問(wèn)該元素的快捷鍵。
• for：規(guī)定<label>綁定到哪個(gè)表單元素纲酗，for的值設(shè)置為該元素的id衰腌。
• form：指定<label>所屬的<form>新蟆。
  用法如下：

<!-- for舉例 -->
<label for="option1">option1</label>
<input type="radio" name='option' id='option1'>
<!-- 嵌套舉例 -->
<label>option2<input type="radio" name='option'></label>

5.<textarea>

<textarea>表示一個(gè)多行文本編輯控件，包含如下屬性：

• autocomplete：設(shè)置是否自動(dòng)補(bǔ)全右蕊。
• autofocus：設(shè)置頁(yè)面加載后自動(dòng)獲得焦點(diǎn)琼稻。
• cols：設(shè)置文本域的可視列數(shù)（高度）。
• rows：設(shè)置文本域的可視行數(shù)（高度）饶囚。
• disabled：設(shè)置禁用文本域帕翻。
• form：指定所屬<form>。
• maxlength：設(shè)置允許用戶輸入字符的最大長(zhǎng)度（Unicode）萝风。
• minlength：設(shè)置允許用戶輸入字符的最小長(zhǎng)度（Unicode）熊咽。
• name：設(shè)置元素的名稱。
• placeholder：占位符闹丐，用于提示用戶輸入的內(nèi)容。
• readonly：設(shè)置用戶不可以修改文本被因，但是可以點(diǎn)擊和選擇卿拴。
• required：提示用戶該元素必填。
• wrap：指定文本換行的方式梨与，有兩個(gè)取值：hard（文本達(dá)到最大寬度時(shí)堕花，瀏覽器自動(dòng)插入換行符），soft（文本達(dá)到最大寬度時(shí)不會(huì)自動(dòng)插入換行符）粥鞋。

6.<fieldset>和<legend>

<fieldset>通常用于對(duì)表單內(nèi)的控件進(jìn)行分組缘挽，<legend>用于給<fieldset>命名。

  <fieldset>
    <legend>Title</legend>
    <input type="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>

參考

• MDN
• 了解HTML表單之13個(gè)表單控件