表单元素使用

- 要完成的效果:
- 代码实现:

要完成的效果:

在这里插入图片描述

代码实现:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{height: 20px;width: 20px;}.right{text-align: right;}table tr td input,select,textarea{margin-left: 20px;}#submit{margin-left: 10%;padding: 3px 10px;background-color: yellow;}#reset,#cancel{background-color: rgba(43, 43, 104, 0.6);padding: 3px 5px;}.box{border: 2px solid greenyellow;padding-left: 10px;margin-left: 30%;margin-right: 20%;}span{font-size: 10px;text-align: right;}#login{font-size: 10px;text-align: right;}</style>
</head>
<body><div class="box"><form action=""><table><tr><td class="right">用户名</td>    <td><input type="text" name="usename" size="15" maxlength="5" placeholder="请输入用户名"></td></tr><tr><td class="right">密码</td><td><input type="password" name="password " placeholder="请输入密码"></td></tr><tr><td class="right"> email</td><td><input type="text" name="emile"></td></tr><tr><td class="right">姓名</td><td><input type="text" name="name"></td></tr><tr><td class="right"> 手机号</td><td><input type="text" name="tel"></td></tr><tr> <td class="right">性别</td><td><input type="radio" name="sex" value="man" id="man"><label for="man"> <img src="men.png"> 男  </label><input type="radio" name="sex" value="woman" id="woman" checked><label for="woman"><img src="women.png" >女</td></label></tr><tr><td class="right">爱好 </td><td><input type="checkbox" name="hobdy" value="0">吃<input type="checkbox" name="hobdy" value="1">喝<input type="checkbox" name="hobdy" value="2" checked>玩<input type="checkbox" name="hobdy" value="3">乐</td></tr><tr><td class="right">出生日期 </td><td><input type="text" name="" id=""></td></tr><tr><td class="right">所在学院</td><td><select><option value="0">--请选择--</option><option value="1">机电工程学院</option><option value="2">材料科学与工程学院</option><option value="3" selected>计算机科学与工程学院</option><option value="4">化学与工程学院</option><option value="5">数学与统计学院</option><option value="6">电气与电子工程学院</option></select> </td></tr><tr><td><p>自我介绍</p> </td> <td><textarea name="自我介绍" cols="60" rows="5">计算机科学与工程学院前身电子工程系是吉林工学院1978年复校后最早的五个系之一,1989年成立计算机及电子工程系,1999年更名为计算机科学与工程学院。1978年开设电子计算机及其应用本科专业,1998年更名为计算机科学与技术专业.在研究生层面具有计算机科学与技术、信息与通信工程两个一级学科硕士点和计算机技术,电子与通信工程两个专业学位硕士点；在本科生层面具有计算机科学与技术、电子信息、网络工程、软件工程四个本科专业.</textarea></td></tr><tr><td class="right">验证码</td><td><input type="text"> <img src="../code.png" alt=""></td></tr></table><input type="submit"  name="register" value="注册" id="submit"> <input type="reset" name="reset" value="重填" id="reset"><input type="button" name="cancel" value="取消" id="cancel"><div id="login">已有账号<a href="#">立即注册?</a></div></form></div>
</body>
</html>