form表单补充属性
-
- 首先介绍第一个使内容分块的属性
-
- 表单字段级：fieldset
- 第二部分是定义标题的元素
-
- 表单字段级的标题：legend
- 还有最后一部分的文本的属性
-
- 文本域：textarea
- 完整代码
文章由自己的学习历程总结而来，仅供大家参考，欢迎大家交流学习。
今天我们一起通过制作一个复杂表单的案例来了解表单的补充属性有哪些？
和我们之前见过的表单不同，在这个表单中，有一些我们没有见过的结构，如：
带有横线的个人信息的标题，以及分块的设置。
首先介绍第一个使内容分块的属性
表单字段级：fieldset
表单字段级：对于表单内容可以分组和嵌套
在这一步中，我们可以根据图片上的内容将表单大概的分为两个大部分，一部分为个人信息，第二部分为其他信息，以此建立表单框架
<form action="">
<span>*号所在项为必填项</span>
<fieldset>
</fieldset>
<fieldset>
</fieldset>
</form>
第二部分是定义标题的元素
表单字段级的标题：legend
legend可以让标题显示出边框，如图所示。
如果想只出现个人信息上面的一条横线，那么只需要保留fieldset的上面的边框线即可。这里顺便把第一部分的表单内容给写出来了，如下代码：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form{
width: 418px;
height: 508px;
border: 1px solid #eeeeee;
margin: 100px auto;
padding: 30px;
}
span{
margin-left: 280px;
}
fieldset{
padding: 0;
border: none;
border-top: 1px solid #c9dca6;
padding-left: 10px;
}
legend{
padding: 0 10px;
}
p{
margin-left: 54px;
}
.f-title{
font-size: 25px;
font-weight: bold;
}
</style>
</head>
<body>
<form action="">
<span>*号所在项为必填项</span>
<fieldset>
<legend class="f-title">个人信息</legend>
<p>
<label for="name">姓名*</label>
<input type="text" id="name">
</p>
<p>
<label for="address">地址*</label>
<input type="text" id="address">
</p>
<p>
<label for="">出生*</label>
<select>
<option value="">1990</option>
<option value="">1991</option>
<option value="">1992</option>
</select>
<select>
<option value="">4月</option>
<option value="">5月</option>
<option value="">6月</option>
</select>
<select>
<option value="">23日</option>
<option value="">24日</option>
<option value="">25日</option>
</select>
</p>
<p>
<label for="man">男</label>
<input type="radio" name="sex" id="man">
<label for="woman">女</label>
<input type="radio" name="sex" id="woman">
</p>
</fieldset>
<fieldset>
</fieldset>
</form>
</body>
</html>
在其他信息的部分有涉及到fieldset的嵌套，直接给嵌套在大的fieldset中即可
还有最后一部分的文本的属性
文本域：textarea
textarea有两个css属性
resize: none; 取消文本域的拖拽效果
outline: none; 取消框的选中效果
在规定了文本域大小之后，我们可以通过设置css属性，改变文本框的效果，在未设置**resize: none; **时，文本框可以随意拖动改变大小，设置属性为none后，固定文本框的大小。
另外一个outline是在点击文本框时，会有一个变蓝色的效果，设置为none后不改变文本框的点击颜色。
完整代码
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form{
width: 418px;
height: 508px;
border: 1px solid #eeeeee;
margin: 100px auto;
padding: 30px;
background: linear-gradient(to bottom,#fefefe,#e0e0e0);
}
span{
margin-left: 280px;
}
fieldset{
padding: 0;
border: none;
border-top: 1px solid #c9dca6;
padding-left: 10px;
}
legend{
padding: 0 10px;
}
p{
margin-left: 54px;
}
.f-title{
font-size: 25px;
font-weight: bold;
}
textarea{
width: 220px;
height: 110px;
/* overflow: scroll; */
/* 取消文本域的拖拽效果 */
resize: none;
}
#provide{
margin-left: 148px;
}
</style>
</head>
<body>
<form action="">
<span>*号所在项为必填项</span>
<fieldset>
<legend class="f-title">个人信息</legend>
<p>
<label for="name">姓名*</label>
<input type="text" id="name">
</p>
<p>
<label for="address">地址*</label>
<input type="text" id="address">
</p>
<p>
<label for="">出生*</label>
<select>
<option value="">1990</option>
<option value="">1991</option>
<option value="">1992</option>
</select>
<select>
<option value="">4月</option>
<option value="">5月</option>
<option value="">6月</option>
</select>
<select>
<option value="">23日</option>
<option value="">24日</option>
<option value="">25日</option>
</select>
</p>
<p>
<label for="man">男</label>
<input type="radio" name="sex" id="man">
<label for="woman">女</label>
<input type="radio" name="sex" id="woman">
</p>
</fieldset>
<fieldset>
<legend class="f-title">其他信息</legend>
<fieldset>
<legend>你喜欢这个表单吗？*</legend>
<label for="">喜欢</label>
<input type="radio" name="like">
<label for="">不喜欢</label>
<input type="radio" name="like">
</fieldset>
<fieldset>
<legend>你喜欢什么运动？*</legend>
<input type="checkbox">足球
<input type="checkbox">篮球
<input type="checkbox">篮球
</fieldset>
<fieldset>
<legend>请写下你的建议*</legend>
<textarea name="" id=""></textarea>
</fieldset>
<label for="provide"></label>
<input type="submit" value="提交个人信息" id="provide">
</fieldset>
</form>
</body>
</html>