前端基础,表单、表格
程序员文章站
2023-12-21 17:34:10
...
表格作业代码
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>表格作业</title> <style type="text/css"> table{ border-collapse: collapse; width: 800px; margin: 0 auto; } .t-head{ background-color: RGB(162,200,236); height: 15px; } .yixiang{ background-color: RGB(230,239,254); } </style> </head> <body> <table border="1" cellspacing="0" cellpadding="4"> <tr> <th class="t-head" colspan="6"></th> </tr> <tr> <td colspan="4" class="yixiang">--- 基 本 资 料 ---</td> <td rowspan="8" width="200"></td> </tr> <tr> <td>姓 名:</td> <td>中文网</td> <td>性 别:</td> <td>未知</td> </tr> <tr> <td>学 历:</td> <td>小学</td> <td>身 高:</td> <td>CM</td> </tr> <tr> <td>籍 贯:</td> <td>广东</td> <td>出身年月:</td> <td>1999-09-09</td> </tr> <tr> <td>毕业院校:</td> <td colspan="3">汕头大学</td> </tr> <tr> <td>主修专业:</td> <td colspan="3">前端 => 大前端</td> </tr> <tr> <td>工作经验:</td> <td>未知</td> <td>目前年薪:</td> <td>保密</td> </tr> <tr> <td>有效证件:</td> <td>身份证</td> <td>证件号码:</td> <td>******************</td> </tr> <tr> <td colspan="5" class="t-head"></td> </tr> <tr> <td colspan="5" class="yixiang">--- 求 职 意 向 ---</td> </tr> <tr> <td>寻求职位:</td> <td colspan="4">前端开发</td> </tr> <tr> <td>求职地区:</td> <td colspan="2">罗湖区 福田区</td> <td>工资待遇:</td> <td>面议</td> </tr> <tr> <td>自我评价:</td> <td colspan="4">做事塌实认真,能吃苦耐劳;学习潜力强,能够很快的理解新事物;性格开朗,诚实正直,谦和自信,乐于进取乐于奉献,勤奋好学,用心上进,有较强的社会适应潜力。工作踏实,认真细致,具有强烈的事业心和工作职责心,善于处理人际关系,具有极佳的团队合作精神。</td> </tr> <tr> <td colspan="5" class="t-head"></td> </tr> <tr> <td colspan="5">--- 教 育 培 训 ---</td> </tr> <tr align="center"> <td colspan="2">起止时间</td> <!-- <td></td> --> <td colspan="">院校名称</td> <td colspan="">主修专业</td> <td colspan="">学历</td> </tr> <tr align="center"> <td colspan="2">2009.09~2012.07</td> <td colspan="">汕头大学</td> <td colspan="">计算机</td> <td colspan="">中专</td> </tr> <tr> <td colspan="5" class="t-head"></td> </tr> <tr> <td colspan="5" class="yixiang">--- 工 作 经 验 ---</td> </tr> <tr align="center"> <td>就职公司:</td> <td colspan="2">深圳电路有限公司</td> <td>公司行业:</td> <td colspan="">其他</td> </tr> <tr> <td align="center">就职时间:</td> <td align="center" colspan="2">2011年12月至今</td> <td align="center">就职部门:</td> <td align="center" colspan="">技术部</td> </tr> <tr> <td align="center">工作描述:</td> <td colspan="4">成绩属于过去,未来仍需努力,今后会不断总结经验,改进不足,并不断学习各种专业知识,加强自我修养,提高业务和管理水平,在未来的人生道路上努力拼搏,勇敢开拓,再铸辉煌,为工程咨询事业灿烂的明天和美好的未来而奉献毕生精力。</td> </tr> <tr> <td class="t-head" colspan="5"></td> </tr> <tr> <td colspan="5" class="yixiang">--- 联 系 方 式 ---</td> </tr> <tr> <td>联系电话:</td> <td colspan="4">181********</td> </tr> <tr> <td>联络手机:</td> <td colspan="4">181********</td> </tr> <tr> <td>电子邮件:</td> <td colspan="4"><span style="text-decoration: underline;">123456789@163.com</span></td> </tr> <tr></tr> </table> </body></html>
表格作业效果图
表单作业代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业表单练习</title> <style type="text/css"> form{ border: 1px solid black; width: 300px; padding: 10px; margin: 0 auto; } input{ margin: 10px auto; } select{ margin: 10px auto; } textarea{ margin: 10px auto; } button{ margin: 10px auto; width: 60px; height: 30px; } .btn2{ background-color: white; border: 1px solid gray; border-radius: 10px; } </style> </head> <body> <form action="login.php" method="post" style="display: block;"> <legend>用户注册</legend> 账号:<input type="text" name="" id="" value="" placeholder="不超过8个字符" maxlength="16" /> <br> 密码:<input type="password" name="" id="" value="" placeholder="6-16个字符" maxlength="16" /> <br> 邮箱:<input type="text" name="" id="" value="" placeholder="example@mail.com" /> <br> 年龄:<input type="number" name="" id="" value="" /> <br> 生日:<input type="date" name="" id="" value="" /> <br> 课程: <select> <option value="html">html</option> <option value="css">css</option> <option value="javascript">javascript</option> </select> <br> 爱好: <input type="checkbox" name="habit" id="game" value="game"> <label for="game">打游戏</label> <input type="checkbox" name="habit" id="movie" value="movie"> <label for="movie">看电影</label> <input type="checkbox" name="habit" id="code" value="code"> <label for="code">撸代码</label> <br> 性别: <input type="radio" name="sex" id="male" value="male"> <label for="male">男</label> <input type="radio" name="sex" id="female" value="female"> <label for="female">女</label> <input type="radio" name="sex" id="secret" value="secret"> <label for="secret">保密</label> <br> 简介: <textarea rows="5" cols="30"></textarea> <br> <button type="button">提交</button> <button type="button" class="btn2">Ajax</button> </form> </body></html>