HTML5對於表單的增強Demo

餘二五發表於2017-11-15
HTML

HTML5對錶單有了極大的增強，不僅加了很多表單屬性而且加了許多型別的表單元素，

下面例子就對所有新增的表單屬性和表單元素做了一個演示

 



    

  1. <!DOCTYPE html> 
    2. 

  2.  
    3. 

  3. <head> 
    4. 

  4. <link rel=“stylesheet” href=“css/common.css” type=“text/css”> 
    5. 

  5. <script type=“text/javascript” src=“js/validateform.js”></script> 
    6. 

  6. <meta charset=“UTF-8”> 
    7. 

  7. <title>HTML5 表單DEMO</title> 
    8. 

  8. </head> 
    9. 

  9.  
    10. 

  10. <h3>Part1：新增的input 元素的屬性</h3><br> 
    11. 

  11.  
    12. 

  12. <form method=“post” action=“action1.jsp”> 
    13. 

  13.  
    14. 

  14. <!– 文字框的placeholder(佔位符）屬性，這個屬性可以用於未輸入狀態時的文字提示 –> 
    15. 

  15. 實驗1：demo 文字框的placeholder屬性，這個屬性可以用於未輸入狀態時的文字提示 <br> 
    16. 

  16. 輸入textfield:<input type=“text” placeholder=“請輸入內容到文字框” /> 
    17. 

  17. <br><br> 
    18. 

  18.  
    19. 

  19. <!– autofocus可以讓頁面開啟時，這個控制元件自動獲得焦點 –> 
    20. 

  20. 實驗2：demo autofocus屬性，這個屬性可以讓某控制元件自動獲得焦點<br> 
    21. 

  21. 輸入搜尋文字:<input type=`search` autofocus/> 
    22. 

  22. <br><br> 
    23. 

  23.  
    24. 

  24. <!– list屬性可以和datalist配合起來使用，當用獲得焦點時候可以讓給使用者提示，否則讓使用者自己輸入內容 –> 
    25. 

  25. 實驗3：demo list屬性，這個屬性可以和datalist配合，當使用者獲得焦點時候給使用者提示<br> 
    26. 

  26. 輸入文字（有提示哦）：<input type=“text” name=“charles” list=“charles info” > 
    27. 

  27. <datalist id=“charles info” stype=“display:none;”> 
    28. 

  28.     <option value=“charles wang”>charles wang</option> 
    29. 

  29.     <option value=“charles_wang888”>charles_wang888</option> 
    30. 

  30.     <option value=“charles王子”>charles王子</option> 
    31. 

  31. </datalist> 
    32. 

  32. <br><br> 
    33. 

  33.  
    34. 

  34.  
    35. 

  35. </form> 
    36. 

  36.  
    37. 

  37. <hr> 
    38. 

  38. <h3>Part2：新增的input 元素的型別</h3><br> 
    39. 

  39.  
    40. 

  40. <form method=“post” action=“action2.jsp”> 
    41. 

  41.  
    42. 

  42. <!– url型別表明專門輸入url的文字框,必須是協議名+地址，否則提示報錯–> 
    43. 

  43. 輸入url: <input name=“url1” type=“url”  size=“60” value=“http://www.sina.com.cn”/> 
    44. 

  44. <br><br> 
    45. 

  45.  
    46. 

  46. <!– email型別表明專門輸入郵箱地址 –> 
    47. 

  47. <!– 注意，每個元素都可以用pattern，來使用正規表示式來校驗輸入，比如我這裡就給出了郵箱地址的正規表示式 –> 
    48. 

  48. 輸入郵箱地址:<input name=“email1” type=“email”   size=“60”  value=“charles_wang888@126.com” pattern=“^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$”/> 
    49. 

  49. <br><br> 
    50. 

  50.  
    51. 

  51. <!– datetime型別可以輸入UTC日期和時間,並且進行有效性檢查，這個Opera支援，Firefox不支援–> 
    52. 

  52. 選擇大好時間：<input name=“datetime1” type=“datetime” required=“true”/> 
    53. 

  53. <br><br> 
    54. 

  54.  
    55. 

  55. <!– number 型別可以輸入數字，可以上下箭頭選擇增減，並且進行校驗 –> 
    56. 

  56. 輸入數字:<input name=“number1” type=“number” value=“25” min=“10” max=“25” step=“5”/> 
    57. 

  57. <br><br> 
    58. 

  58.  
    59. 

  59. <!– range型別可以輸入一定範圍內的數值，具有最小值和最大值 ，可以設定 ，值用滑動條指定–> 
    60. 

  60. 選擇數值：<input name=“range1” type=“range” value=“25”  min=“0”  max=“100” step=“5”/> 
    61. 

  61. <br><br> 
    62. 

  62.  
    63. 

  63. <input type=“submit”/> 
    64. 

  64.  
    65. 

  65. </form> 
    66. 



最後效果圖是：


 




部分控制元件比如<date> <datetime> <range>控制元件在Firefox 11上不支援，所以我的截圖是用的Opera 11瀏覽器的截圖












本文轉自 charles_wang888 51CTO部落格，原文連結：http://blog.51cto.com/supercharles888/853312，如需轉載請自行聯絡原作者












相關文章