系列文章目录
前言
这里是对表单做一个相对扩展。
一、单选框
我们可以通过input标签,制作一个单选框,并编辑内部属性。
我们先编辑以下代码:
<!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>
<input type="radio" name="aaa" id="good">
<label for="good">非常满意</label>
</div>
<div>
<input type="radio" name="aaa" checked="checked">非常满意
</div>
<div>
<input type="radio" name="aaa">非常满意
</div>
<div>
<input type="radio" name="aaa">非常满意
</div>
</body>
</html>
运行后,查看结果为:
接下来我们对代码进行解释:
- type=“radio” :是指单选框前面的圆圈,用于点击选中,单击就会点亮。
- name=“aaa” :aaa是笔者自定义的变量,意思是在aaa组中,代表的是aaa中只能选一个。
- checked=“checked” :是指默认点亮,放在哪个选项,哪个选项就会在刷新之后自动点亮。
- label标签:需要配合input标签的id属性,在for中填入id,就可以实现单击文字选择选项。
- disable:在input中加入disable可以禁用该选项。
二、复选框(多选功能)
复选框与单选框基本相同,这里只列举代码,不做过多说明:
<!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>
*{
padding: 10px;
}
</style>
</head>
<body>
<h1>你的爱好是?</h1>
<div>
<div>你的爱好有</div>
<div>
<input type="checkbox" name="aaaa" id="1">
<label for="1">1111</label>
<input type="checkbox" name="aaaa" id="2">
<label for="2">2222</label>
<input type="checkbox" name="aaaa" id="3">
<label for="3">3333</label>
</div>
</div>
</body>
</html>
运行结果为:
与单选框相比,只有type="checkbox"发生了改变,由圆点变成了方框。
三、上传文件
代码示例如下:
<!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>
*{
padding: 5px;
}
</style>
</head>
<body>
<div>
<div>上传文件:</div>
<div>
<input type="file" name="" id="">
</div>
<div>上传图片:</div>
<form>
<input type="image" src="图片链接" height="100px" width="100px">
</form>
<div>隐藏按钮</div>
<div>
<input type="hidden">
</div>
</div>
</body>
</html>
以上是具体用法,结果可以自己运行一下,这里不做展示。
部分内容需要后端配合,无法完全展示。
四、下拉菜单
经常用于省市选择等,用途广泛。
以下是示例代码:
<!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>
.a{
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<h1 class="a">下拉菜单部分</h1>
<div class="a">
<div>你是哪个省的</div>
<select size="1">
<option>妈妈生的</option>
<option>吉林</option>
<option>辽宁</option>
<option>广东</option>
<!--
multiple:代表多选,用在select中
option:
1. value,提供给后端需要用到的值
2. select, 默认选中
-->
</select>
</div>
</body>
</html>
multiple:代表多选,用在select中
option:
- value,提供给后端需要用到的值
- select, 默认选中
运行结果如下所示:
五、文本域(文本输入框)
我们输入以下代码:
<!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>
*{
position: relative;
top: 10px;
left: 10px;
}
textarea{
resize: none;
}
</style>
</head>
<body>
<h1>多行文本输入框</h1>
<div>
<textarea cols="30" rows="10" placeholder="请输入你想说的话"></textarea>
</div>
</body>
</html>
运行后查看结果:
其中,resize的值可以为vertical,horizontal,both,none,分别代表允许竖直,允许水平,任意拉伸,禁止拉伸。
六、字段集
示例代码如下:
<!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{
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>字段集</h1>
<fieldset>
<legend>个人信息</legend>
<input type="radio" name="aa">man
<br>
<input type="radio" name="aa">woman
</fieldset>
</body>
</html>
运行后查看结果:
fieldset、legend都可以理解为普通的标签,应用也与其他的标签差不多,均可以使用css来改变,用于框住,注释等。
总结
以上就是表单扩展进阶内容,希望对你有所帮助。