H5-表格、表單


一、表格

  1、表格標簽

    a、table  表格

    b、thead  表格頭

    c、tbody  表格主體

    d、tr  表格行

    e、th  元素定義表頭

    f、td  元素定義表格單元

  2、表格樣式重置

    a、table{border-collapse:collapse;}單元格間隙合並(默認:separate分隔)

    b、th,td{padding:0;}重置單元格默認填充

  3、單元格合並

    a、colspan屬性規定單元格可橫跨的列數。

      <td colspan="2"></td>

    

    b、a、colspan屬性規定單元格可橫跨的列數。

      <td rowspan="2"></td>

      

  4、縱向合並不要跨主體標簽進行合並。比如從thead到tbody;給表格添加背景顏色,優先考慮給tr/td

二、表單

  1、form  表單(action=“”  method=“”  post   get  delete    put)(<form action="https://www.baidu.com/s">)

  2、表單元素:<input type="類型" name="" value=""/>

    a、text  文本框    (outline:none;光標移入效果去掉。)

    b、password  密碼

    c、radio  單選

    d、checkbox  復選

    e、submit  提交

    f、reset  重置

    g、button  按鈕

    h、image  圖片作為提交按鈕<input type="image" src="圖片地址" value="后台提交的文字">顯示的文字

    i、file  上傳

    j、hidden  隱藏  <input type="hidden">(<input type="hidden" name="marriage" value="未婚">)

    k、date  日期選擇框  (H5新增類型,不兼容)

    l、time  時間選擇框  (H5新增類型,不兼容)

  3、IE6下 input 背景圖兼容

    input 的背景圖片會跟隨文字一起被擠走。
      解決辦法:不給input加背景,而是用一個額外的標簽包含input,然后給這個標簽加背景,並將input的背景、邊框等設置為none。

  

  4、input屬性:

    a、label標簽為input元素定義標注

    <input type="checkbox" name="" id="a">

    <lable for="a">········</lable>

    b、checked在頁面加載時默認選定的input元素。

    <input type="checkbox" name=""checked/>

    c、disabled屬性規定應該禁用input元素。

    <input type="checkbox" name="" disabled/>

  5、select/option下拉選框

    對高度的支持不兼容;

  6、textarea文本域

    各個瀏覽器下的默認滾動條顯示不兼容

    css3新增resize調整尺寸樣式屬性;

  7、outline輪廓線;

    A標簽輪廓線去除方法:

      a、<a herf="#" onfocus="this.blur();">······</a>

      b、<a herf="#"hidefocus>····</a>

  8、表單提交數據的方式:method

    a、.get    默認值
        通過地址欄講師局傳輸給后端服務器
      get  方式可以提交的最大數據是1024字節。
             只能提交文本信息

    b、post
      通過瀏覽器后台隱藏提交數據給后端服務器
     post方式本身提交的數據是沒有任何限制的,但是會受網絡鏈接超時,或者服務器最大允許提交文件大小的限制
         可以提交各種類型的數據。

  9、 表單布局注意事項

    1.不要挑戰用戶的習慣:比如像注冊,重置等按鈕,用戶已經習慣這些按鈕的順序和位置,我們在開發過程中,不要輕易改變這些按鈕的順序和位置。
    2.有風險的操作,都應當有的確認提示:比如重置按鈕,有可能用戶是誤點。

 

 


免責聲明!

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



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