Blogger Information
Blog 87
fans 0
comment 0
visits 59305
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第十四节课作业:4.表单过滤器
黄忠倚的博客
Original
510 people have browsed it

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post