代码效果
源代码
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>0922作业</title> <style> [class="id"] { color: green; background-color: rgb(255, 0, 200); } [class="mima"] { color: rgb(47, 0, 255); background-color: rgb(255, 219, 14); } [class="sq"] { color: rgb(47, 0, 255); background-color: rgb(255, 219, 14); } [class="cz"] { color: rgb(47, 0, 255); background-color: rgb(255, 0, 200); } </style> </head> <body> <h2>会员注册</h2> <form action=""> <fieldset> <legend>必填项</legend> <div class="id"> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入中文或英文" required autofocus /> </div> <div class="mima"> <label for="password">密 码：</label> <input type="password" id="password" name="password" required /> </div> </fieldset> <fieldset> <legend>补充信息</legend> <div> <label for="gender">性 别：</label> <input type="radio" name="gender" id="male" value="male" /><label for="male" >男人</label > <input type="radio" name="gender" id="female" value="female" /><label for="female" >女人</label > <input type="radio" name="gender" id="secret" value="secret" checked /><label for="secret">保密</label> </div> <div> <label>个人爱好：</label> <input type="checkbox" id="game" value="game" checked /><label for="game" >玩游戏</label > <input type="checkbox" id="mm" value="mm" /><label for="m" >看美女</label > </div> <div> <label>选择会员：</label> <select name="level"> <option value="1" selected>一级会员</option> <option value="2">二级会员</option> <option value="3">三级会员</option> </select> </div> <div> <label for="">搜索关键字:</label> <input type="search" name="search" list="keywords" /> <datalist id="keywords"> <option value="美女">美女</option> <option value="帅哥">帅哥</option> <option value="大叔">大叔</option> </datalist> </div> <div> <label for="tel">手 机：</label> <input type="text" id="tel" name="tel" placeholder="请输入手机号码" /> </div> <div> <label for="email">邮 箱：</label> <input type="email" id="email" name="email" placeholder="请输入邮箱如:1@1.com" /> </div> </fieldset> <button text-align="center" class="sq">申 请</button> <button type="reset" class="cz">重 置</button> </form> </body></html>
