1、表单进阶-单选框
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<h1>表单进阶-单选框</h1>
<div>你觉得这个网页好看吗</div>
<div>
<!--
单选框type值是radio
name 组名，组名相同，表示是同一组的，同一组中只能选择一个
checked 默认选中
-->
<input type="radio" name="a" checked="checked">好看
<!--
以下这样写和上一句代码效果是一样的
<input type="radio" name="a" checked>好看
-->
</div>
<div>
<input type="radio" name="a">一般
</div>
<div>
<input type="radio" name="a">不好看
</div>
<div>
<input type="radio" name="a">超级难看
</div>
<div>
<div>你的性别</div>
<div>
<input type="radio" name="b" id="man">
<!-- 写了label之后，点击文字之后也能选中 -->
<!-- for里面的值是以上代码id里面的值 -->
<label for="man">男</label>
</div>
<div>
<input type="radio" name="b" id="woman">
<label for="woman">女</label>
</div>
</div>
</body>
</html>2、表单进阶-复选框
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<h1>表单进阶-复选框（多选）</h1>
<div>
<div>你的爱好有：</div>
<div>
<!--
checked 默认值
没有写label，点击文字后没有反应，只有点击文字前边的框框才能选中
-->
<input type="checkbox" name="a" checked>唱歌
</div>
<div>
<input type="checkbox" name="a">跳舞
</div>
<div>
<input type="checkbox" name="a">吃饭
</div>
<div>你会的的技术：</div>
<div>
<input type="checkbox" name="b" id="html">
<!-- 拥有label后点击文字也能选中 -->
<label for="html">html</label>
</div>
<div>
<input type="checkbox" name="b" id="css">
<label for="css">css</label>
</div>
<div>
<input type="checkbox" name="b" id="js">
<label for="js">js</label>
</div>
</div>
</body>
</html>3、表单进阶-上传文件和隐藏字段
（1）上传文件
<div>
<div>请截图说明</div>
<div>
<!-- 上传文件 -->
<!-- 能打开本地存储文件的位置并选择图片上传，但是只能在后边显示文件名，目前没啥用处 -->
<input type="file" name="" id="">
</div>
</div>效果：
上传之前：
上传之后：
（2）图片按钮
<div>
<div>图片按钮 -代替提交按钮(input type="submit")</div>
<form>
<input type="image" src="2.jpg">
</form>
</div>效果：
（3）隐藏按钮
<div>
<div>隐藏按钮</div>
<input type="hidden" name="" id="" value="带给后端的个人信息">
</div>效果：
（4）禁用
<div>
<div>禁用实现</div>
<div>禁用，只读</div>
<div>
<!-- 属性设置为disabled="disbled"就能实现 -->
<button disabled="disbled">注册</button>
<br>
<input type="radio" disabled>不满意
<br>
<input type="text" disabled value="11111">
<!-- readonly 只读，改不了里边的东西 -->
<input type="text" readonly value="22222">
</div>
</div>效果：
4、表单进阶-下拉菜单
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<h1>表单进阶-下拉菜单</h1>
<div>
<div>你的收货地址</div>
<!--
select 支持的属性
1、size 显示几个
2、multiple 多选，选多个
-->
<!--
option 支持的属性
1、value 提供给后端需要用到的value值
2、selected 默认选中
-->
<select>
<option>广西</option>
<option>广东</option>
<option>河南</option>
<option>四川</option>
<option>山东</option>
</select>
<h3>利用了属性size</h3>
<select size="3">
<option>广西</option>
<option>广东</option>
<option>河南</option>
<option>四川</option>
<option>山东</option>
</select>
<h3>利用了属性multiple</h3>
<!-- 按住Ctrl键就可以多选 -->
<select size="3" multiple>
<option>广西</option>
<option>广东</option>
<option>河南</option>
<option>四川</option>
<option>山东</option>
</select>
</div>
</body>
</html>5、表单进阶-文本域（多行文本输入框）
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
textarea{
width: 300px;
height: 200px;
resize: both;
/*
resize 重新设置大小，值有vertical 垂直方向可以改变大小
horizontal 水平方向可以改变大小
both 两个方向都可以改变大小
none
*/
}
</style>
</head>
<body>
<h1>多行文本输入框-文本域</h1>
<div>
<!--
一般不使用这两个属性，一般使用css设置样式控制
cols 输入可显示的列数
rows 输入可显示的行数
placeholder 提示文字
提前设置好的值写在textarea双标签标签内部
注意和input的区别，input设置提前值在value属性中设置
-->
<textarea cols="30" rows="10" placeholder="请输入你的意见">双标签内部</textarea>
</div>
</body>
</html>6、表单进阶-字段集
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
fieldset{
width: 200px;
height: 100px;
border: 2px solid red;
}
legend{
border: 2px solid green;
}
</style>
</head>
<body>
<h1>表单进阶-字段集</h1>
<fieldset>
<legend>性别</legend>
<input type="radio" name="a">男
<br>
<input type="radio" name="a">女
</fieldset>
<fieldset>
<legend>性爱好</legend>
<input type="checkbox" name="a">唱歌
<br>
<input type="checkbox" name="a">跳舞
</fieldset>
</body>
</html>
576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
