收藏
批改状态：合格
老师批语：
复习：
表单：
1、form标签，具有两个属性，分别是action、method；
2、<fieldset>（为所有表单设置一个集合，包含住所有的表单）+<legend>（为包含住的所有表单命名）；
3、<input>的几个元素：type/name/id/value/required（必填项）/
4、type属性的值：
button：为普通按钮选项
checkbox：定义一个复选框
file：定义文件上传
hidden：定义隐藏输入字段
image：定义图片形式的按钮类型
password：定义为密码，输入则为掩码
radio：定义为单选框
reset：定义为重置按钮
submit：定义为提交按钮
text：定义为文本类型
5、<select value="label"><option value=""></option></select>定义下拉选择框
6、<textarea name="" rows="10" cols="80"></textarea>:定义一个文本域
7、<button>普通的提交按钮
-
jquer中表单选中的方法：
原生的CSS方法
$('input').css('color','red')。只选择了所有的inpt，但没有选中其他的表单控件元素
2.jq写法
$(':input').css('color','red')。选中了所有的表单控件
3.jq写法选中单纯的input元素
$('input:input').css('color'.'red')。选中input控件
4、jq写法选中password属性
$(':input:password').css('color'.'red')
5、jq写法选中button属性
$(':button').css('color'.'red')
6、jq写法选中text属性
$(':text').css('color'.'red')
7、jq写法选中file属性
$(':file').css('color'.'red')
8、原生的css方法选中password
$('input[type="password"]').css('color','red')
代码部分：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<style type="text/css">
fieldset {
height: 600px;
width: 200px;
margin: 80px auto;
}
</style>
<title>Document</title>
</head>
<body>
<form action="" method="post">
<fieldset id="">
<legend>用户注册界面</legend>
<p>用户名:<input type="text" name="" id="" value="" required="required" /></p>
<p>邮箱： <input type="email" name="" id="" value="" required="required" /> </p>
<p>密码:<input type="password" name="" id="" value="" required="required" /></p>
<p>确认密码:<input type="password" name="" id="" value="" required="required" /></p>
<p>性别:
<input type="radio" name="radio1" id="" value="" />男
<input type="radio" name="radio1" id="" value="" />女
</p>
<p>上传头像:<input type="file" name="" id="" value="点击上传" /></p>
<p>
web语言汇总
<input name="checkbox" value="" / checked="checked">jave
<input name="checkbox" type="checkbox" value="" />php
<input name="checkbox" type="checkbox" value="" />python
<input name="checkbox" type="checkbox" value="" />javescript
</p>
<p>
级别
<select value="label">
<option value="">新手</option>
<option value="">入门</option>
<option value="">中级</option>
<option value="">高手</option>
</select>
</p>
<p>
<textarea name="" rows="10" cols="80"></textarea>
</p>
<p>
<button type="submit">提交</button>
<button type="reset">取消</button>
</p>
</fieldset>
</form>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('button').css({
'background':'orange',
'width':'80px',
'height':'40px',
'border-radius':'10px',
'margin':'5px'
})
//利用css方法进行选中
$(':input').css('border-color','coral')
// /利用jqurey方法进行选择器选中/
// $('input:input').css({'background':'orange'})
// 利用jqurey方法，选中input中的所有input
$(':input[type="password"]').css({'background':'blue'})
// 利用jquery方法，选中input中的password属性
$(':input:password').css({'background':'yellow'})
// 利用jq方式进行改写
$(':file').css('background','#008000')
// 利用控制类型元素进行选择器选择
$(':text').css('background','black')
// 利用控制类型选择元素
$(':button').css('background','palevioletred')
</script>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
