1. 程式人生 > >前端HTML表單的屬性和使用

前端HTML表單的屬性和使用

1、分類           1、input 組元素           2、textarea 元素           3、select 和 option 選項框           4、其他元素         2、input 元素           1、語法                <input> 或 <input/>           2、屬性                1、type                     根據不同的type屬性值,可以建立各種型別的輸入控制元件,比如:文字框,密碼框,複選框,按鈕 等... ...                2、value                     控制元件的值即要提交給伺服器的資料                3、name                     控制元件的名稱,伺服器要用                     命名規範:匈牙利命名法                          控制元件的縮寫+功能名稱                4、disabled                     該屬性只要出現在標籤中,表示的是 禁用該控制元件           3、input的具體控制元件                1、文字框與密碼框                     文字框:明文顯示使用者輸入的資料                          <input type="text">                     密碼框:密文顯示使用者輸入的資料                          <input type="password">                     屬性                          1、name                               縮寫:txt                               ex:                                    1、建立一個文字框,表示 接受 使用者名稱稱(Username)                                    <input type="text" name="txtUsername">                                    2、建立一個密碼框,表示 接受 使用者密碼(Userpwd)                                    <input type="password" name="txtUserpwd">                          2、value                               1、表示控制元件的值                               2、表示控制元件的預設值                          3、maxlength                               限制輸入的字元數                          4、readonly                               只讀-只能看,不能改                               該屬性只要出現在標記中,就是隻讀的意思,不需要給值                               readonly 與 disabled 的區別                               1、readonly 只能看,不能改,但是可以被提交給伺服器
                              2、disabled 只能看,不能改,但是不能提交給伺服器                     注意:對於input來講,如果不寫 type 或者 type值寫錯的時候,預設都是文字框                2、單選按鈕和複選框                     單選按鈕:type="radio"                     複選框:type="checkbox"                     屬性:                          1、name                               定義名稱                               radio縮寫:rdo                               checkbox縮寫:chk                               還可以對控制元件進行分組,一組單選按鈕和複選框,名稱必須相同                               對於單選按鈕:一組中的單選按鈕,最多隻能有一個被選中                          2、checked                               設定預設被選中                3、按鈕                     1、提交按鈕                          功能固定化,負責將表中中的表單控制元件提交給伺服器                          <input type="submit">                     2、重置按鈕                          功能固定化,負責將所有表單控制元件的值恢復為初始值                          <input type="reset">                     3、普通按鈕                          無功能,執行客戶端的指令碼(JS)                          <input type="button">                     屬性:                          1、name                               縮寫:btn                          2、value                               按鈕上的顯示文字                4、隱藏域 和 檔案選擇框                     1、隱藏域                          不希望被使用者看見,但是要提交給伺服器的資訊                          <input type="hidden">                          name :txt+功能名稱                          value :值                     2、檔案選擇框                          上傳檔案所用                          <input type="file">                          name : txt+功能名稱      3、textarea - 多行文字域           作用:允許使用者錄入多行資料到表單控制元件中           語法:<textarea></textarea>           屬性:                1、name                     縮寫:txt+功能名稱                2、readonly                     只讀                3、cols                     指定文字區域的列數, 變相設定當前元素寬度                4、rows                     指定文字區域的行數,變相設定當前元素高度      4、選項框           1、分類                1、下拉選項框                2、滾動列表           2、語法                1 、<select></select> 建立選項框                     屬性:                          1、name                               縮寫:sel+功能名稱                          2、size                              取值 大於1的話,則為滾動列表
                              否則就是下拉選項框                          3、multiple                              設定多選,該屬性出現在 <select>中,那麼就允許多選(針對滾動列表)                2、<option>顯示文字</option> 選項                     屬性:                          1、value                               選項的值                          2、selected                               預選中                               注意:如果不設定selected屬性的話,那麼選項框中的第一項會預設被選中
。      5、其他元素           1、為控制元件分組                <fieldset></fieldset> : 為控制元件分組                <legend></legend> : 為分組指定一個標題           2、<label> 元素                功能:關聯 文字 與表達元素的,點選文字時,如同點選表單元素一樣                語法:                     <label>文字</label>                     屬性:                          for :表示與該label相關聯的表單控制元件元素的ID值 <input id="man"  name="sex"   value="男"><label  for="man">男</label></input> 4、其他常用標記      1、浮動框架           1、作用                可以在一個瀏覽器視窗中同時顯示多個頁面文件          2、語法                <iframe>內容</iframe>                內容:當瀏覽器不支援<iframe>元素時,將顯示該文字作為描述資訊                屬性:                     1、src                          要引入頁面的URL                     2、width                     3、height                     4、frameborder                          浮動框架的邊框,如果不想要,可以設定為 0           3、注意               該標籤,主要針對的是 靜態頁面的引入   動態頁面中 有專門 引入頁面的方式      2、摘要與細節           1、作用                允許使用者對某些資訊進行展開和收縮           2、語法                <details></details> 用於定義細節                <summary></summary> 用於定義細節中的標題      3、度量元素           1、作用                定義一個度量衡           2、語法                <meter>文字</meter>                屬性:                     1、min :定義度量範圍的最小值,預設為0                     2、max :定義度量範圍的最大值,預設為1,一般情況下,將max值設定為 100                     3、value :度量值,顯示在度量元素上的數值,預設為0      4、時間元素           1、作用                用於關聯時間的不同表現形式           2、語法                <time>文字</time>                屬性:                     datetime :文字所對應的 日期時間,如果日期和時間同時設定的話,日期和時間之間用“T”分割      5、高亮文字顯示           1、作用                以突出背景顏色的方式顯示文字           2、語法                <mark>文字</mark>