Blogger Information
Blog 5
fans 1
comment 0
visits 4790
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
创建table表格和创建form表单并JS判断
自带光芒
Original
640 people have browsed it

1、创建table表格

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>homework1</title>
  7. <style>
  8. body{color:#000;}
  9. td{background: #fff;}
  10. .hd1{height:20px;background: #A6C6EC;}
  11. .hd2{height:20px;background: #EAEDFC;}
  12. a{color:#000;}
  13. </style>
  14. </head>
  15. <body>
  16. <table width="800" align="center" border="0" cellpadding="5" cellspacing="1" bgcolor="#aaa">
  17. <tr><td colspan="5" class="hd1"></td></tr>
  18. <tr><td colspan="5" class="hd2">-------基本资料-------</td></tr>
  19. <tr>
  20. <td width="125">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</td>
  21. <td width="200">马小姐</td>
  22. <td width="125">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</td>
  23. <td width="200"></td>
  24. <td rowspan="7" width="150"></td>
  25. </tr>
  26. <tr>
  27. <td>学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历:</td>
  28. <td>中专</td>
  29. <td>身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高:</td>
  30. <td>CM</td>
  31. </tr>
  32. <tr>
  33. <td>籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯:</td>
  34. <td>广东</td>
  35. <td>出生年月:</td>
  36. <td>1991-12-01</td>
  37. </tr>
  38. <tr>
  39. <td>毕业院校:</td>
  40. <td colspan="3">汕头市科技中学</td>
  41. </tr>
  42. <tr>
  43. <td>主修专业:</td>
  44. <td colspan="3">管理学 => 会计学</td>
  45. </tr>
  46. <tr>
  47. <td>工作经验:</td>
  48. <td>未知</td>
  49. <td>目前年薪:</td>
  50. <td>100万</td>
  51. </tr>
  52. <tr>
  53. <td>有效证件:</td>
  54. <td>身份证</td>
  55. <td>证件号码:</td>
  56. <td>******</td>
  57. </tr>
  58. <tr><td colspan="5" class="hd1"></td></tr>
  59. <tr><td colspan="5" class="hd2">-------求职意向-------</td></tr>
  60. <tr>
  61. <td style="background: #B0D0F9;">寻求职位:</td>
  62. <td colspan="4" style="background: #B0D0F9;">出纳员、会计文员</td>
  63. </tr>
  64. <tr>
  65. <td>求职地址:</td>
  66. <td colspan="2">罗湖区 福田区</td>
  67. <td>工资待遇:</td>
  68. <td>面议</td>
  69. </tr>
  70. <tr>
  71. <td>自我评价:</td>
  72. <td colspan="4">本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责本人对待工作认真负责</td>
  73. </tr>
  74. <tr><td colspan="5" class="hd1"></td></tr>
  75. <tr><td colspan="5" class="hd2">-------教育培训-------</td></tr>
  76. <tr>
  77. <td align="center">起止时间</td>
  78. <td colspan="2" align="center">就读院校名称</td>
  79. <td align="center">主修专业</td>
  80. <td align="center">学历</td>
  81. </tr>
  82. <tr>
  83. <td align="center">2009.09-2012.07</td>
  84. <td colspan="2" align="center">汕头市科技中专</td>
  85. <td align="center">会计电算化</td>
  86. <td align="center">中专</td>
  87. </tr>
  88. <tr><td colspan="5" class="hd1"></td></tr>
  89. <tr><td colspan="5" class="hd2">-------工作经验(1)-------</td></tr>
  90. <tr>
  91. <td align="center">就职公司:</td>
  92. <td colspan="2" align="center">深圳市照明电器有限公司</td>
  93. <td align="center">公司行业:</td>
  94. <td align="center">其他</td>
  95. </tr>
  96. <tr>
  97. <td align="center">就职时间:</td>
  98. <td colspan="2" align="center">2011年12月至今</td>
  99. <td align="center">就职部门:</td>
  100. <td align="center">财务部</td>
  101. </tr>
  102. <tr>
  103. <td align="center">公司性质:</td>
  104. <td colspan="2" align="center">其他</td>
  105. <td align="center">就职职位:</td>
  106. <td align="center">出纳员</td>
  107. </tr>
  108. <tr>
  109. <td align="center">工作描述:</td>
  110. <td colspan="4">工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容工作描述内容</td>
  111. </tr>
  112. <tr><td colspan="5" class="hd1"></td></tr>
  113. <tr><td colspan="5" class="hd2">-------联系方式-------</td></tr>
  114. <tr>
  115. <td align="center">联系电话:</td>
  116. <td colspan="4">13212312312</td>
  117. </tr>
  118. <tr>
  119. <td align="center">联系手机:</td>
  120. <td colspan="4">13212312312</td>
  121. </tr>
  122. <tr>
  123. <td align="center">电子邮件:</td>
  124. <td colspan="4"><a href="mailto:abc@qq.com">abc@qq.com</a></td>
  125. </tr>
  126. </table>
  127. </body>
  128. </html>

2、创建form表单和JS判断

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>homework2</title>
  7. <style>
  8. body{background:#fff; font-size:14px; font-family:"宋体",Verdana, Arial; line-height:150%; margin:5px 0 0 0; padding:0; color:#000;}
  9. div{margin:0 auto; padding:0;}
  10. h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form,img,p{
  11. margin:0; padding:0; border:none; list-style-type:none;
  12. }
  13. a{color:#000;}
  14. .regbox{width: 500px;}
  15. .regbox .hd{font-size: 18px;font-weight: bold;padding-bottom: 20px;}
  16. .regbox ul{margin-bottom: 10px;}
  17. .regbox ul:after{content:'.';clear: both;font-size: 0;}
  18. .regbox li{float: left;}
  19. .regbox .inputbox{padding:0 5px;border:1px solid #ccc;height: 25px;line-height: 25px;}
  20. </style>
  21. </head>
  22. <body>
  23. <div class="regbox">
  24. <div class="hd">
  25. 用户注册
  26. </div>
  27. <div class="bd">
  28. <form name="formUser" action="user.php" method="post" onSubmit="return register()">
  29. <ul>
  30. <li>账号:</li>
  31. <li><input type="text" name="username" maxlength="8" placeholder="不超过8个字符" class="inputbox"></li>
  32. </ul>
  33. <ul>
  34. <li>密码:</li>
  35. <li><input type="password" name="password" maxlength="16" placeholder="6-16个字符" class="inputbox"></li>
  36. </ul>
  37. <ul>
  38. <li>邮箱:</li>
  39. <li><input type="text" name="email" placeholder="example@mail.com" class="inputbox"></li>
  40. </ul>
  41. <ul>
  42. <li>年龄:</li>
  43. <li><input type="number" name="age" style="width: 50px;" class="inputbox"></li>
  44. </ul>
  45. <ul>
  46. <li>生日:</li>
  47. <li><input type="date" name="date" class="inputbox"></li>
  48. </ul>
  49. <ul>
  50. <li>课程:</li>
  51. <li><select name="course" id="course"><option value="0">请选择</option><option value="HTML5">HTML5</option><option value="PHP">PHP</option></select></li>
  52. </ul>
  53. <ul>
  54. <li>爱好:</li>
  55. <li><input type="checkbox" name="like" id="like1" value="打游戏"><label for="like1">打游戏</label> <input type="checkbox" name="like" id="like2" value="看电影"><label for="like2">看电影</label> <input type="checkbox" name="like" id="like3" value="撸代码"><label for="like3">撸代码</label></li>
  56. </ul>
  57. <ul>
  58. <li>性别:</li>
  59. <li><input type="radio" name="sex" id="sex1" value="1"><label for="sex1"></label> <input type="radio" name="sex" id="sex2" value="2"><label for="sex2"></label> <input type="radio" name="sex" id="sex3" checked><label for="sex3" value="0">保密</label></li>
  60. </ul>
  61. <ul>
  62. <li>简介:</li>
  63. <li><textarea name="intro" style="padding:5px;border:1px solid #ccc;width:200px;height: 100px;"></textarea></li>
  64. </ul>
  65. <div style="clear: both;"></div>
  66. <ul>
  67. <li style="padding-left: 40px;">
  68. <input name="act" type="hidden" value="act_register" >
  69. <input name="Submit" type="submit" value="提交">
  70. </li>
  71. </ul>
  72. </form>
  73. </div>
  74. </div>
  75. <script type="text/javascript">
  76. var Utils = new Object();
  77. Utils.trim = function( text )
  78. {
  79. if (typeof(text) == "string")
  80. {
  81. return text.replace(/^\s*|\s*$/g, "");
  82. }
  83. else
  84. {
  85. return text;
  86. }
  87. }
  88. Utils.isEmail = function( email )
  89. {
  90. var reg1 = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)/;
  91. return reg1.test( email );
  92. }
  93. function register()
  94. {
  95. var frm = document.forms['formUser'];
  96. var username = Utils.trim(frm.elements['username'].value);
  97. var email = frm.elements['email'].value;
  98. var password = Utils.trim(frm.elements['password'].value);
  99. var age = Utils.trim(frm.elements['age'].value);
  100. var date = Utils.trim(frm.elements['date'].value);
  101. var course = frm.elements['course'] ? Utils.trim(frm.elements['course'].value) : '';
  102. var msg = "";
  103. // 检查输入
  104. if (username.length == 0)
  105. {
  106. msg += '请填写账号' + '\n';
  107. }
  108. else if (username.match(/^\s*$|^c:\\con\\con$|[%,\'\*\"\s\t\<\>\&\\]/))
  109. {
  110. msg += '账号格式不正确' + '\n';
  111. }
  112. else if (username.length < 3)
  113. {
  114. msg += '账号不能少于3个字符' + '\n';
  115. }
  116. if (email.length == 0)
  117. {
  118. msg += '请填写邮箱' + '\n';
  119. }
  120. else
  121. {
  122. if ( ! (Utils.isEmail(email)))
  123. {
  124. msg += '邮箱格式不正确' + '\n';
  125. }
  126. }
  127. if (password.length == 0)
  128. {
  129. msg += '请填写密码' + '\n';
  130. }
  131. else if (password.length < 6)
  132. {
  133. msg += '密码太短' + '\n';
  134. }
  135. if (/ /.test(password) == true)
  136. {
  137. msg += '密码不能为空' + '\n';
  138. }
  139. if (age.length == 0)
  140. {
  141. msg += '请填写年龄' + '\n';
  142. }
  143. if (date.length == 0)
  144. {
  145. msg += '请填写生日' + '\n';
  146. }
  147. if (course == 0)
  148. {
  149. msg += '请选择课程' + '\n';
  150. }
  151. if (msg.length > 0)
  152. {
  153. alert(msg);
  154. return false;
  155. }
  156. else
  157. {
  158. return true;
  159. }
  160. }
  161. </script>
  162. </body>
  163. </html>
Correcting teacher:PHPzPHPz

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