html表單

一、表單

(1)表單的作用:與用戶進行交互,提供表單元素讓用戶輸入

(2)表單元素:

   文本框(text): 單行,基本輸入

   列表框(select):提供多個項讓用戶選擇

   單選框(radio) :用戶只能選擇其中一項

   複選框(checkbox):用戶可以選擇多項

   密碼框(password):輸入敏感數據

   文本域(textarea):多行文本

   文件域(file):   讓用戶選擇文件

   注:輸入(text,password,textArea),選擇(select,radio,checkbox,file),按鈕(button,submit,reset,image)

 

   普通按鈕:   button

   提交按鈕:   submit(將表單中用戶輸入的數據提交到服務器)

   重置按鈕:   reset, 還原到初始狀態(與清空近似)

   圖片提交按鈕:image

   隱藏域: hidden,隱式提交的數據,用戶不可見

(3)表單標記:form

  <form   action="數據提交的地址"   method="提交的方式">

     ...表單元素

  </form>

   注:1.一個網頁中可以有多個form

      2.表單元素需要寫在form標記中

      3.提交方式有post密文提交(例登錄信息), get地址欄顯示提交(例搜索引擎)

(4)表單元素標記:input,select,button,textarea

   1.input

    <input   type="表單元素的類型"   name="表單元素的名字"  value="值"  size="大小"maxlength="最大長度"

    checked="true|false" src="圖片提交按鈕的路徑"/>

     注:a.文本域和列表框不能使用input標記

        b.取名時儘量讓名字有意義,例:  chkLike= chk類型,like作用 

        c.單選框複選框同組的名字要相同 

        d.單選框和複選框的值不可見,只用於提交,例:<input type="radio" value="1"/>男

          男是提示作用,1會提交到服務器  

        e.size是指寬度,maxlength允許輸入的字數

        f.checked用於單複選,是否選中,默認不選中

        g.不帶type,默認是文本框

   2.texarea文本域

     <textarea   cols="總列數"   rows="總行數"  name="名字">值</textarea>

    注:textarea沒有value屬性

       值可以直接使用空格和回車

   3.select...option列表框

                          <select  name="sltShengfen">

                                     <option>湖南</option>

                                     <option>湖北</option>

                                     <option  selected="true">江西</option>

                                     <option>江蘇</option>

                            </select>

   4.button按鈕

     <button type="reset|button|submit">內容</button>

     注:<button>與<input>比較:

        <button>更靈活,可以插圖片和使用文字,也可局部設置格式

        <input> 更通用,除了文本域和列表框,它都可實現

     注2:省略type,默認爲button

 

二、小知識:

1.<!--註釋 -->

2.特殊符號  &開頭;結束

 &lt;   表<

 &gt;   表>

 &nbsp; 表空格

 

 &quot; 表引號

 &copy; 版權符號

 

3.表單的readonly和disabled

 (1)readonly用於輸入框 ,disabled用於按鈕

 (2)readonly表示只讀,disabled禁用

  (3)如果文本框使用readonly表示只讀,但數據可以提交

     但使用disabled不僅是隻讀,框中數據不能被提交

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章