欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML学习(二) 表单的制作习作

程序员文章站 2022-03-03 23:13:50
...

表单的制作练习

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>form表单</title>
    6. 

  6.     <style>
    7. 

  7.         div{
    8. 

  8.             width: 300px;
    9. 

  9.             height: 510px;
    10. 

  10.             border: 1px solid #a8c6ea;
    11. 

  11.             margin: 20px auto;
    12. 

  12.             line-height: 35px;
    13. 

  13.             padding: 20px 20px;
    14. 

  14.         }
    15. 

  15.         label:first-child {
    16. 

  16.             font-weight: bolder;
    17. 

  17.             font-size: 16px;
    18. 

  18.         }
    19. 

  19.     </style>
    20. 

  20. </head>
    21. 

  21. <body>
    22. 

  22. <div>
    23. 

  23.     <form action="#">
    24. 

  24.         <label>用户注册</label><br>
    25. 

    26. 

  26.         账号: <input name="user" type="text" placeholder="不超过八个字母"><br>
    27. 

  27.         密码: <input name="pasWd" type="password" placeholder="6-16个字符"><br>
    28. 

  28.         邮箱: <input name="e-mail" type="email" placeholder="example@mail.com"><br>
    29. 

  29.         年龄: <input name="eg" type="text" style="width: 30px"><br>
    30. 

  30.         生日: <input name="year" type="date"><br>
    31. 

  31.         课程: <select>
    32. 

  32.         <option value="1">HTML5</option>
    33. 

  33.         <option value="2">CSS</option>
    34. 

  34.         <option value="2">JavaScript</option>
    35. 

  35.         <option value="2">PHP</option>
    36. 

  36.     </select><br>
    37. 

    38. 

  38.         爱好:
    39. 

  39.         <label><input  name="aiHao" type="checkbox" value="">打游戏</label>
    40. 

  40.         <label><input  name="aiHao" type="checkbox" value="">看电影</label>
    41. 

  41.         <label><input  name="aiHao" type="checkbox" value="">撸代码</label><br>
    42. 

    43. 

  43.         性别:
    44. 

  44.         <label><input  name="sex" type="radio">男</label>
    45. 

  45.         <label><input  name="sex" type="radio">女</label>
    46. 

  46.         <label><input  name="sex" type="radio">保密</label><br>
    47. 

  47.         简介: <textarea name="" id="" cols="30" rows="10"></textarea><br>
    48. 

    49. 

  49.         <input type="submit" name="tiJiao" value="提交">
    50. 

  50.         <input type="button" name="ajax" value="Ajax">
    51. 

    52. 

    53. 

  53.     </form>
    54. 

  54. </div>
    55. 

  55. </body>
    56. 

  56. </html>
    57.

效果图如下HTML学习(二) 表单的制作习作

上一篇： 练习做导航

下一篇： php打印输出中文乱码怎么办

推荐阅读