html中的表單元素

1. form元素

    from元素主要是定義表單,其中

    action  —— 表示表單提交的頁面

    method  —— 表示表單的請求方式,有post和get兩種,默認爲get

    enctype —— 表示瀏覽器對發送給服務器的數據所採用的編碼格式,有三種

                           application/x-www-form-urlencoded(默認編碼,不能將文件上傳到服務器)

                           multipart/form-data(用於上傳文件到服務器)

                            text/plain(未規範的編碼,不建議使用,不同瀏覽器理解不同)

    name ——表示表單名稱,以便程序調用

    target —— 設置提交時的目標位置:_blank、_parent、_self、_top

    autocomplete —— 設置瀏覽器記住用戶輸入的數據,實現自動完成表單,默認爲on自動完成,如果不想自動完成設置爲off

    novalidate —— 設置是否執行客戶端數據有效性檢查

2. input元素

    input元素默認情況會出現一個單行文本框,其屬性有:

    autofocus —— 讓光標聚焦在某個input元素上,讓用戶直接輸入

    disabled —— 禁用input元素

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

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

    type —— input元素的類型,其屬性有

                    text —— 一個單行文本框,默認,其額外屬性有:

                                   list —— 指定爲文本框提供建議值的datalist元素,其值爲datalist元素的id值

                                   maxlength —— 設置文本框最大字符長度

                                   pattern —— 用於輸入驗證的正則表達式

                                   placeholder —— 輸入字符的提示

                                   readonly —— 文本框處於只讀狀態

                                   disabled —— 文本框處於禁用狀態

                                   size —— 設置文本框寬度

                                   value —— 設置文本框初始值

                                   required —— 表明用戶必須輸入一個值,否則無法通過輸入驗證

                    password—— 隱藏字符的密碼框,額外屬性有:

                                            maxlength —— 設置密碼框最大字符長度

                                            pattern —— 用於輸入驗證的正則表達式                                        

                                            placeholder —— 輸入密碼的提示

                                            readonly —— 密碼框處於只讀狀態

                                            disabled —— 密碼框處於禁用狀態

                                           size —— 設置密碼框寬度

                                           value —— 設置密碼框初始值

                                           required —— 表明用戶必須輸入同一個值

                    search —— 搜索框,在某些瀏覽器鍵入內容會出現叉標記取消,其額外屬性與text一致

                    submit、reset、button —— 生成一個提交按鈕、重置按鈕、普通按鈕

                    number、range —— 只能輸入數值的框、只能輸入在一個數值範圍的框,其額外屬性有:

                                                       list ——  指定爲文本框提供建議值的datalist元素,其值爲datalist元素的id值

                                                       min —— 設置可接受的最小值

                                                       max —— 設置可接受的最大值

                                                       readonly —— 文本框處於只讀狀態

                                                       required —— 表明用戶必須輸入一個值,否則無法通過輸入驗證

                                                       step —— 指定上下調節值的步長

                                                       value —— 指定初始值

                    checkbox、radio —— 複選框、單選框

                                                         checked —— 設置複選框、單選框是否爲勾選狀態

                                                         required —— 表示用戶必須勾選,否則無法通過驗證

                                                         value —— 設置複選框、單選框勾選狀態時提交的數據,默認爲on

                    image、color —— 生成一個圖片按鈕,顏色代碼按鈕

                    email、tel、url —— 生成一個檢測電子郵件、號碼、網址的文本框

                    date、month、time、week、datetime、datetime-local —— 獲取日期和時間,額外屬性與number一致

                    hidden —— 生成一個隱藏控件

                    file —— 生成一個上傳控件

                                  accept —— 指定接受的MIME類型

                                  required —— 表明用戶必須提供一個值,否則無法通過驗證

    name —— 定義input元素的名稱,以便接受到相應的值

    value —— 默認起始值

3. label元素

    關聯input,添加說明標籤

4. fieldset 元素

    對錶單進行編組

    name —— 給分組定義一個名稱

    form —— 讓表單外的分組與表單掛鉤

    disabled —— 禁用分組內的表單

5. legend元素

    添加分組說明標籤,給分組加上一個標題

6. button元素

    添加一個按鈕,其type值有;

    submit —— 表示按鈕的作用是提交表單,默認

    reset —— 表示按鈕的作用是重置表單

    button —— 表示按鈕爲一般性按鈕,沒有任何作用

    對於type值爲submit時,按鈕還會提供額外的屬性

    form —— 指定按鈕關聯的表單

    formaction —— 覆蓋form元素的action屬性

    formenctype —— 覆蓋form元素的enctype屬性

    formmethod —— 覆蓋form元素的method屬性

    formtarget —— 覆蓋form元素的target屬性

    formnovalidate ——覆蓋form元素的novalidate屬性

7. select元素

     生成一個下拉列表進行選擇,其屬性:

     name —— 設定提交時的名稱

     disabled —— 將下拉列表禁用

     form —— 將表單外的下拉列表與某個表單掛鉤

     size —— 設置下拉列表的高度

     multple —— 設置是否可以多選

     autofocus —— 獲取焦點

     required —— 選擇驗證,設置後必須選擇才能通過

8. textarea元素

    生成一個可變更大小的多行文本框,其屬性有:

    name —— 設定提交時的名稱

    form —— 將表單外的多行文本框與某個表單掛鉤

    readonly —— 設置多行文本框只讀

    disabled —— 設置多行文本框禁用

    maxlength —— 設置最大可輸入的字符長度

    autofocus —— 獲取焦點

    placeholder —— 設置輸入時的提示信息

    rows —— 設置行數

    cols —— 設置列數

    wrap —— 設置是否插入換行符,有soft和hard兩種

    required —— 設置必須輸入值,否則無法通過驗證

     

    

發佈了44 篇原創文章 · 獲贊 29 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章