实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例
