Blogger Information
Blog 5
fans 0
comment 0
visits 2624
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
003.html 之表单演示
清石
Original
511 people have browsed it

html 之表单演示

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="stylesheet" type="text/css" href="css/style0.css" />
  6. <title>会员注册表</title>
  7. </head>
  8. <body>
  9. <h3 class="title">会员注册</h3>
  10. <form action="check.php" method="POST" class="register" enctype="multipart/form-data">
  11. <table style="text-align: right; font-size: 20px;" border="0" width="500" cellspacing="10" cellpadding="5" tex>
  12. <tr>
  13. <td><label for="username">用户:</label></td>
  14. <td style="text-align: left;"><input type="text" id="username" value="" style="width: 350px;height: 30px;"
  15. placeholder="请输入6位以上的用户名" /></td>
  16. </tr>
  17. <tr>
  18. <td><label for="email">邮箱:</label></td>
  19. <td style="text-align: left;"><input type="email" id="email" value="" style="width: 350px;height: 30px;"
  20. placeholder="demo@email.com" /></td>
  21. </tr>
  22. <tr>
  23. <td><label for="password">密码:</label></td>
  24. <td style="text-align: left;"><input type="password" name="password" id="password" style="width: 350px;height: 30px;"
  25. required placeholder="6位以上字母和数字" onblur="isEmpty(this)" /></td>
  26. </tr>
  27. <tr>
  28. <td><label for="password2">确认:</label></td>
  29. <td style="text-align: left;"><input type="password" name="password2" id="password2" style="width: 350px;height: 30px;"
  30. required placeholder="与上面保持一致" onblur="isEmpty(this)" /></td>
  31. </tr>
  32. <tr>
  33. <td><label for="secret">性别:</label></td>
  34. <td style="text-align: left;">
  35. <input type="radio" name="secret" id="male" value="male" /><label for="male">男性</label>
  36. <input type="radio" name="secret" id="female" value="female" /><label for="female">女性</label>
  37. <input type="radio" name="secret" id="secret" value="secret" checked /><label for="secret">保密
  38. </label>
  39. </td>
  40. </tr>
  41. <tr>
  42. <td><label for="#">爱好:</label></td>
  43. <td style="text-align: left;">
  44. <input type="checkbox" name="hoppy[]" id="yx" value="yx" checked /><label for="yx">游戏</label>
  45. <input type="checkbox" name="hoppy[]" id="ly" value="yx" /><label for="ly">旅游</label>
  46. <input type="checkbox" name="hoppy[]" id="sy" value="yx" checked /><label for="sy">摄影</label>
  47. <input type="checkbox" name="hoppy[]" id="xs" value="yx" /><label for="xs">写生</label>
  48. </td>
  49. </tr>
  50. <tr>
  51. <td><label for="edu">学历:</label></td>
  52. <td style="text-align: left;">
  53. <select name="edu" id="edu" style="width: 100px;height: 30px;">
  54. <option value="1">小学</option>
  55. <option value="2">初中</option>
  56. <option value="3">高中</option>
  57. <option value="4" selected>大专</option>
  58. <option value="5">本科</option>
  59. </select>
  60. </td>
  61. </tr>
  62. <tr>
  63. <td><label for="user-pic">头像:</label></td>
  64. <td style="text-align: left;">
  65. <input type="hidden" name="MAX_FILE_SIZE" value="80000" />
  66. <input type="file" name="user_pic" id="user-pic" />
  67. <div class="user-pic" style="grid-column: 2"></div>
  68. </td>
  69. </tr>
  70. <tr>
  71. <td><label for="user-resume">简历:</label></td>
  72. <td style="text-align: left;">
  73. <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
  74. <input type="file" name="resume" id="user-resume" />
  75. <div class="user-resume" style="grid-column: 2"></div>
  76. </td>
  77. </tr>
  78. <tr>
  79. <td ><label for="comment">备注:</label></td>
  80. <td style="text-align: left;">
  81. <textarea
  82. name="comment"
  83. id="comment"
  84. cols="47"
  85. rows="8"
  86. placeholder="不能超过150字"
  87. oninput="show(this)"
  88. onselect="this.style.color='red'"
  89. ></textarea>
  90. <!-- <span class="tips">还能输入 <em>40</em>个字</span> -->
  91. </td>
  92. </tr>
  93. </table>
  94. <div style="text-align: center;">
  95. <button style="width: 150px; ">注册</button>
  96. <button style="width: 150px;" type="reset">重置</button>
  97. </div>
  98. </form>
  99. <script src="js/demo4.js" type="text/javascript" charset="utf-8"></script>
  100. </body>
  101. </html>

效果图如下:
表单演示

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:看上去不错呀
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post