第六十七節，html表單元素

標籤：

html表單元素

 

學習要點：
　　1.表單元素總匯
　　2.表單元素解析

本章主要探討HTML5中表單元素，表單元素用於擷取使用者的輸入資料。

 

一．表單元素總匯

HTML5的表單中，提供了各種可供使用者輸入的表單控制項。

          元素名稱                                        說明

            form          表示HTML表單

            input         表示用來收集使用者輸入資料的控制項

          textarea        表示可以輸入多行文本的控制項

           select         表示用來提供一組固定的選項

           option         表示提供提供一個選項

          optgroup        表示一組相關的option元素

           button         表示可用來提交或重設的表單按鈕（或一般按鈕）

          datalist        定義一組提供給使用者的建議值

          fieldset        表示一組表單元素

           legend         表示fieldset元素的說明性標籤

            label         表示表單元素的說明標籤

           output         表示計算結果

 

二．表單元素解析

1.<form>定義表單

<form method="post" action="http: www.haosou.com/">

         <button>提交</button>

</form>

解釋：<form>元素主要是定義本身是一組表單。

 

          元素名稱                                       說明

           action         表示表單提交的頁面

      　method         表示表單的請求方式：有POST和GET兩種，預設GET

                    　　 表示瀏覽器對發送給伺服器的資料所採用的編碼格式。有三種：application/x-www-form-urlencoded（預設編碼，enctype        不能將檔案上傳到伺服器）、multipart/form-data （用於上傳檔案到伺服器）、text/plain （未規範的編碼，不 建議使用，不同瀏覽器理解不同）

        name         設定表單名稱，以便程式調用

      target         設定提交時的目標位置：_blank、_parent、_self、_top設定瀏覽器記住使用者輸入的資料，實現自動完成表單。預設

 

   autocomplete

 

                     為on自動完成，如果不想自動完成則設定off。

 

 

 

    novalidate       設定是否執行用戶端資料有效性檢查，後面課程講解。

 

 

 

  使用get提交資料

 

method="get"

 

 

 

  喪失自動提示功能

 

autocomplete="off"

 

 

 

  使用_blank建立目標

 

target="_blank"

 

 

 

2.<input>表示使用者輸入資料

 

<input name="user">

 

 

 

解釋：<input>元素預設情況會出現一個單行文字框，有五個屬性。

 

 

 

      屬性名稱                                    說明

 

 

 

     autofocus       讓游標聚焦在某個input元素上，讓使用者直接輸入

 

 

 

     disabled        禁用input元素

 

 

 

   autocomplete  單獨設定input元素的自動完成功能

 

 

 

       form          讓表單外的元素和指定的表單掛鈎提交

 

 

 

       type          input元素的類型，內容較多，將在下節課展開講解

 

 

 

        name         定義input元素的名稱，以便接收到相應的值

 

 

 

   聚焦游標

 

<input name="user" autofocus>

 

 

 

  禁用input

 

<input name="user" disabled>

 

 

 

  禁止自動完成

 

 

 

 

 

<input name="user" autocomplete="off">

 

 

 

  表單外的input

 

<form method="get" id="register">

 

     ...

 

</form>

 

<input name="email"form="register">

 

 

 

3.<label>添加說明標籤

 

<p><labelfor="user">使用者名稱：<inputid="user"name="user"></label></p>

 

解釋：<label>元素可以關聯input，讓使用者體驗更好。且更加容易設定CSS樣式。

 

 

 

4.<fieldset>對錶單進行編組

 

<fieldset>...</fieldset>

 

 

 

解釋：<fieldset>元素可以將一些表單元素組織在一起，形成一個整體。

 

 

 

     屬性名稱                                   說明

 

 

 

       name         給分組定義一個名稱

 

 

 

       form         讓表單外的分組與表單掛鈎

 

 

 

     disabled       禁用分組內的表單

 

 

 

5.<legend>添加分組說明標籤

 

<fieldset>

 

 

 

    <legend>註冊表單</legend>

 

</fieldset>

 

 

 

解釋：<legend>元素給分組加上一個標題。

 

 

 

6.<button>添加按鈕

 

<button type="submit">< button>

 

 

 

解釋：<button>元素添加一個按鈕，type屬性有如下幾個值：

 

 

 

      值名稱                                   說明

 

 

 

      submit        表示按鈕的作用是提交表單，預設

 

 

 

       reset        表示按鈕的作用是重設表單

 

 

 

      button        表示按鈕為一般性按鈕，沒有任何作用

 

 

 

  提交表單

 

<button type="submit">提交</button>

 

 

 

  重設表單

 

<button type="reset">重設</button>

 

 

 

 

 

   普通按鈕

 

<button type="button">按鈕</button>

 

 

 

對於type屬性為submit時，按鈕還會提供額外的屬性。

 

 

 

      屬性名稱                                        說明

 

 

 

        form          指定按鈕關聯的表單

 

 

 

    formaction        覆蓋form元素的action屬性

 

 

 

   formenctype  覆蓋form元素的enctype屬性

 

 

 

    formmethod        覆蓋form元素的method屬性

 

 

 

    formtarget        覆蓋form元素的target屬性

 

 

 

 formnovalidate 覆蓋form元素的novalidate屬性

 

 

 

   表單外關聯提交

 

<button type="submit" form="register">提交</button>

 

第六十七節，html表單元素