web(四)html表單類標簽


表單類標簽

  操作者用於輸入信息,並將信息提交給服務器的標簽集合。

  表單標簽介紹

      form標簽:表單元素(其余標簽)標簽的容器標簽

      input標簽:用於用戶信息輸入的標簽。

      button標簽:按鈕標簽。

      select/option標簽:下拉框標簽。

      textarea標簽:文本域標簽。

      lable標簽:修飾輸入元素的文字標簽。

 

  表單元素標簽公有的屬性(html4標准)

      id:表單標簽的唯一索引,一般在js中根據唯一索引獲取表單元素。

      name:表單標簽的名稱,在提交數據時,以name屬性作為實際值的索引。

      disabled:禁用當前表單元素。

      readonly:規定表當前表單元素為只讀元素。

      value:設定或獲取當前表單元素的輸入值。

      accessKey:訪問當前元素的快捷鍵,非表單類屬性,但通常用在表單元素中。

 

  form標簽:輸入標簽項的容器,封裝子輸入標簽,主要作用如下

      設定當前表單提交的目標服務器地址。

      設定提交的http請求類型。

      設定提交數據的編碼格式。

      通過js可以在提交前驗證數據的合法性。

      

      method的設定

        取值范圍

          get:聲明本次請求的目的是從服務器獲取數據。

          post:聲明本次請求的目的是向服務器傳送數據。

        get與post的區別

          目的不同

          提交方式不同(一個在響應頭,一個在響應體)

          提交數據長度不同,get:不超過255個字符,post理論上不受限制。

          安全性get在地址欄顯示信息,不安全。

          緩存機制不同,get請求的地址會保存到瀏覽器的訪問歷史記錄中,post不會。

 

      enctype的設定的取值范圍

          

 

  input標簽用來聲明一組用於用戶輸入信息的標簽,使用type屬性可以設定輸入的類型。

  input標簽的分類

    輸入類

        text:文本框,type的默認值,

        password:密碼框,密碼框的文字以黑點方式顯示。

        hidden:隱藏框,元素不顯示,可以通過此標簽提交用戶不可見信息如id等。

      私有屬性(具備表單標簽的公有屬性)

        maxlength:限定輸入字符的長度。

<input type="text" value="userName" name="text" maxlength="10" />
<input type="password" value="password" name = "password" maxlength="10" />

 

    選擇類

        checkbox:多選框。

        radio:單選框,表單中name屬性相同的radio,只能有一個被選中。

      私有屬性(具備表單標簽的公有屬性)

        checked:設定是否被選中,在html中只要聲明此屬性就被選中

<input type="radio" name = "sex"  value = "1"/></br>
<input type="checkbox" name="fav" checked="false" value="1"/>

 

    文件類

        file:文件選擇框。

      私有屬性(具備表單標簽的公有屬性)

        multiple:設定是否可以多選,在html中只要聲明此屬性就可以多選。

        accept:設定選擇文件的mime類型,多個類型用逗號分隔開。

<input type="file" name = "file" multiple accept="image/gif, image/jpeg"/>

 

    按鈕類

         button:按鈕標簽。

        image:圖片按鈕標簽。

        submit:提交按鈕標簽,默認行為是提交當前form表單。

        reset:重置按鈕標簽,默認行為是當前表單恢復到網頁初始化狀態。

<input type="submit" value = "提交" />
<input type="reset" value = "重置" />

        button標簽:按鈕標簽,非閉合標簽,可以在該標簽內部插入其他html元素,因此可以定義出功能強大的按鈕。

      私有屬性(具備表單標簽的公有屬性)

        type:按鈕的類型。

        reset:重置類型按鈕

        submit:提交類型按鈕

        button:不同按鈕,無默認行為。

<button type="submit"><div>大家好</div></button>

  

   下拉框標簽:使用select、option兩個標簽聲明下拉框。  

<select name="pro" >
    <option value="1">北京</option>
    <option value="2">上海</option>
</select>

      select標簽私有屬性

        multiple:規定可選擇多個選項。

        size:規定可見下拉框選項的數量。

      option標簽私有屬性

        selected:當前下拉明細項是否被選中。

  

  textarea標簽:設定多行的文本輸入控件。

    私有屬性(具備表單標簽的公有屬性)

      cols:規定文本區內的可見寬度。

      rows:規定文本區內的可見行數。

      maxlength:文本輸入的最大字符數量。

<textarea name = "introduce" maxlength="500" cols="20" rows="10"></textarea>

  label元素:輸入標簽的文字描述標簽,可以代替輸入標簽響應用戶的操作。

      私有屬性說明

         for:輸入標簽的id屬性值。

<label for="sex1"></label>
<input id = "sex1" type="radio" name = "sex"  value = "1"/>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM