前端基础，表单、表格
程序员文章站
2022-03-03 23:29:13
...
表格作业代码
<!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>
表单作业效果
下一篇： ajax的前端与后端交互的方法