制作结果:
相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于form表单的实现</title>
<style>
form{
background-color:bisque;
width:30%;
height:420px
}
</style>
</head>
<body>
<form action="http://www.baidu.com/">
<div>
邮箱地址:
<input type="text" name="name" id="name">
@
<select name="email">
<option value="163.com">163.com</option>
<option value="163.com">qq.com</option>
<option value="163.com">126.com</option>
</select>
</div>
<br>
<div>
密码:
<input type="password" name="password">
</div>
<br>
<div>
性别:
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
</div>
<br>
<div>
验证码:
<input type="text">
<img src="验证码.png" title="这是验证码" width="20">
</div>
<br>
<div>
<button type="button">免费获取验证码</button>
</div>
<br>
<div>
备注:
<textarea name="tips" rows="5" cols="20" style="resize:none;"></textarea>
</div>
<br>
<div>
<button>提交</button>
</div>
<br>
<div>
<input type="checkbox" name="read">我已阅读并同意<a href="#">XXX协议</a> 和隐私政策。
</div>
</form>
</body>
</html>