<style>
fieldset{
border: 1px solid burlywood;
/* 改变字段集的边框线颜色 */
/*
width: 300px;
height: 300px;
也可进行宽高的设置
*/
}
legend{
border: 1px solid royalblue;
/* 缺口也可以设置边框线 */
text-align: center;
/* 可居中,左/右边显示 */
}
</style>
<body>
<h1>表单进阶-字段集</h1>
<fieldset>
<legend>性别</legend>
<!-- 打开缺口 -->
<input type="radio" name="sex">男<br>
<input type="radio" name="sex">女<br>
<!-- 对于单选按钮来说,属性上设置成radio就可以了,但要注意,只写个radio还是不行的,name属性也要有 -->
</fieldset>
<!-- 错误示例 -->
<fieldset>
<legend>性别
<input type="radio" name="sex">男<br>
<input type="radio" name="sex">女<br>
<!-- 注意:input框放进legend里面会导致单选框也在缺口中 -->
</legend>
<!-- 打开缺口 -->
</fieldset>
<fieldset>
<legend><img src="../img/01/海琴烟 同人 cosplay美女4K高清壁纸_彼岸图网.jpg" alt=""></legend>
<!-- 在缺口中放图片也是可以的 -->
<input type="radio" name="sex">男<br>
<input type="radio" name="sex">女<br>
</fieldset>
<fieldset>
<legend>爱好</legend>
<input type="checkbox" name="hobby">游泳<br>
<!-- 提供复选框,支持单选 -->
<input type="checkbox" name="hobby">k歌<br>
<input type="checkbox" name="hobby">跑步<br>
<input type="checkbox" name="hobby">健身<br>
<input type="checkbox" name="hobby">旅游<br>
<input type="checkbox" name="hobby">游戏<br>
<input type="checkbox" name="hobby">电影<br>
<input type="checkbox" name="hobby">看书<br>
<input type="checkbox" name="hobby">抽烟<br>
<input type="checkbox" name="hobby">喝酒<br>
</fieldset>
</body>
以下是源代码,需要请自取
<!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 burlywood;
/* 改变字段集的边框线颜色 */
/*
width: 300px;
height: 300px;
也可进行宽高的设置
*/
}
legend{
border: 1px solid royalblue;
/* 缺口也可以设置边框线 */
text-align: center;
/* 可居中,左/右边显示 */
}
</style>
</head>
<body>
<h1>表单进阶-字段集</h1>
<fieldset>
<legend>性别</legend>
<!-- 打开缺口 -->
<input type="radio" name="sex">男<br>
<input type="radio" name="sex">女<br>
<!-- 对于单选按钮来说,属性上设置成radio就可以了,但要注意,只写个radio还是不行的,name属性也要有 -->
</fieldset>
<!-- 错误示例 -->
<fieldset>
<legend>性别
<input type="radio" name="sex">男<br>
<input type="radio" name="sex">女<br>
<!-- 注意:input框放进legend里面会导致单选框也在缺口中 -->
</legend>
<!-- 打开缺口 -->
</fieldset>
<fieldset>
<legend><img src="../img/01/海琴烟 同人 cosplay美女4K高清壁纸_彼岸图网.jpg" alt=""></legend>
<!-- 在缺口中放图片也是可以的 -->
<input type="radio" name="sex">男<br>
<input type="radio" name="sex">女<br>
</fieldset>
<fieldset>
<legend>爱好</legend>
<input type="checkbox" name="hobby">游泳<br>
<!-- 提供复选框,支持单选 -->
<input type="checkbox" name="hobby">k歌<br>
<input type="checkbox" name="hobby">跑步<br>
<input type="checkbox" name="hobby">健身<br>
<input type="checkbox" name="hobby">旅游<br>
<input type="checkbox" name="hobby">游戏<br>
<input type="checkbox" name="hobby">电影<br>
<input type="checkbox" name="hobby">看书<br>
<input type="checkbox" name="hobby">抽烟<br>
<input type="checkbox" name="hobby">喝酒<br>
</fieldset>
</body>
</html>