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})(\]?)/;
  92.           return reg1.test( email );
  93.         }
  95.         function register()
  96.         {
  97.           var frm  = document.forms['formUser'];
  98.           var username  = Utils.trim(frm.elements['username'].value);
  99.           var email  = frm.elements['email'].value;
  100.           var password  = Utils.trim(frm.elements['password'].value);
  101.           var age  = Utils.trim(frm.elements['age'].value);
  102.           var date  = Utils.trim(frm.elements['date'].value);
  103.           var course =  frm.elements['course'] ? Utils.trim(frm.elements['course'].value) : '';
  105.           var msg = "";
  106.           // 检查输入
  107.           if (username.length == 0)
  108.           {
  109.             msg += '请填写账号' + '\n';
  110.           }
  111.           else if (username.match(/^\s*$|^c:\\con\\con$|[%,\'\*\"\s\t\<\>\&\\]/))
  112.           {
  113.             msg += '账号格式不正确' + '\n';
  114.           }
  115.           else if (username.length < 3)
  116.           {
  117.             msg += '账号不能少于3个字符' + '\n';
  118.           }
  120.           if (email.length == 0)
  121.           {
  122.             msg += '请填写邮箱' + '\n';
  123.           }
  124.           else
  125.           {
  126.             if ( ! (Utils.isEmail(email)))
  127.             {
  128.               msg += '邮箱格式不正确' + '\n';
  129.             }
  130.           }
  131.           if (password.length == 0)
  132.           {
  133.             msg += '请填写密码' + '\n';
  134.           }
  135.           else if (password.length < 6)
  136.           {
  137.             msg += '密码太短' + '\n';
  138.           }
  139.           if (/ /.test(password) == true)
  140.           {
  141.             msg += '密码不能为空' + '\n';
  142.           }
  143.           if (age.length == 0)
  144.           {
  145.             msg += '请填写年龄' + '\n';
  146.           }
  147.           if (date.length == 0)
  148.           {
  149.             msg += '请填写生日' + '\n';
  150.           }
  151.           if (course == 0)
  152.           {
  153.             msg += '请选择课程' + '\n';
  154.           }
  156.           if (msg.length > 0)
  157.           {
  158.             alert(msg);
  159.             return false;
  160.           }
  161.           else
  162.           {
  163.             return true;
  164.           }
  165.         }   
  166.         </script>
  167.     </body>
  168. </html>

更多相关文章

  1. table和form的使用
  2. 大前端第二天第一个作业
  3. 学习，是脱贫致富的捷径
  4. 普通人打工，用创业心态干好8小时工作
  5. 工作中线程的启动
  6. 怎么在日常工作中践行逻辑思维能力？
  7. --save 和 --save-dev 的作用和区别简单描述
  8. 如何对接口参数的描述进行集中管理
  9. 接口文档生成工具 一键生成文档 ApiPost

随机推荐

  1. 详解Go 中方法与函数的区别
  2. go是开源语言吗？
  3. 解析Go中的多态 -无需interfaces
  4. go语言和Java语言的区别是什么？
  5. 用Go实现进制之间的转化
  6. 详解 Golang 通道 Chan
  7. go语言和python有什么区别？
  8. go-carbon1.2.4发布了！新增系列时间比较方
  9. 你知道go程序的基本要素吗
  10. Go语言有没有优势？