运用表单相关知识编写了一个简单的注册页面
运行效果：
代码详情：
1.HTML代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注册页面</title> <link rel="stylesheet" href="css/03.css"> </head> <body> <div> <form action=""> <fieldset> <legend>信息注册</legend> <p> <label for="yhm">用户名：</label> <input type="text" id="yhm"> </p> <p> <label for="mm"> 密码： </label> <input type="password" placeholder="请输入密码" id="mm"> </p> <p><label for="">籍贯：</label> <select name="" id=""> <option value="">北京</option> <option value="" selected="selected">山东</option> <option value="">河南</option> </select> <select> <option value="">北京</option> <option value="" selected="selected">济南</option> <option value="">郑州</option> </select> <select name="" id=""> <option value="">中关村</option> <option value="" selected="selected">某某区</option> <option value="">某某区</option> </select> </p> <p> <label for="">性别:</label> <input type="radio" name="xb">男 <input type="radio" name="xb" checked="checked"> 女 </p> <p> <label for="">爱好：</label> <input type="checkbox">打游戏 <input type="checkbox">打篮球 <input type="checkbox">逛街 <input type="checkbox">抽烟，喝酒烫头 </p> <p> <label for="">请上传帅气的头像：</label> <input type="file" value="选择文件"> </p> <p> <label for="jszj">介绍自己：</label> <textarea name="jszj" id="" cols="30" rows="10"></textarea> </p> <p> <input type="submit" value="提交表单"> <input type="reset" value="重新填写"> </p> <p> <input type="submit" value="免费注册 开启寻爱之旅" id="zc"> </p> </fieldset> </form> </div> </body> </html>
2.CSS代码
textarea{ vertical-align: top; } #zc{ width: 300px; height:50px; background-color: #1CA3C9; color: #fff; border:0; }
