Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4.表单过滤器</title> </head> <body> <!-- form[action method=post]>fieldset>legend{用户注册}+p{用户名:}*4>input[type=text name required] --> <form action="" method="post"> <fieldset> <legend>用户注册</legend> <p>用户名:<input type="text" name="name" required=""></p> <p>邮箱:<input type="email" name="email" required=""></p> <p>密码:<input type="password" name="psw1" required=""></p> <p>确认密码:<input type="password" name="psw2" required=""></p> <p>性别: <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女 </p> <p>上传头像: <input type="file" name="" value=""></p> <p>WEB语言: <input type="checkbox" name="lang[]" value="javascript">JavaScript <input type="checkbox" name="lang[]" value="php">PHP <input type="checkbox" name="lang[]" value="Java">Java <input type="checkbox" name="lang[]" value="Python">Pthon <p>级别: <select name="level" id=""> <option value="0">小白</option> <option value="1">入门</option> <option value="2">中级</option> <option value="3">高级</option> <option selected="4">去火星吧</option> </select></p> <p> <textarea name="" id="" cols="40" rows="5"></textarea></p> <p> <button type="submit" name="submit">提交</button> <button type="reset" name="reset">重填</button> </p> </fieldset> </form> </body> </html> <script type="text/javascript" src="./js/jquery-3.3.1.js"></script> <script type="text/javascript"> //1.根据类型来选择表单控件元素 //css的选择方法,仅选择了input标签 // $('input').css('background-color','lightgreen') //jquery的写法:<input>text ra // $(':input').css('background-color','lightgreen') // css:input ===== jquery:input:input // $(':input[type="password"]').css('background-color','lightgreen') // // jquery进行改写: // $(':input:password').css('background-color',"lightgreen" ) //2.根据表单控件的特征来选择元素:file image // $(':file'),css('background-color',"lightgreen" ) // $(':text').css('background-color',"lightgreen") $('button:submit').css({ 'background-color':'orange', 'color':'htil', 'font-size':'1.2em', 'border' :'none', 'width':'90px', 'height':'40px' }) </script>
点击 "运行实例" 按钮查看在线实例