对表单里的控件分组,
UA样式表
fieldset {
display: block;
margin-inline-start: 2px;
margin-inline-end: 2px;
padding-block-start: 0.35em;
padding-inline-start: 0.75em;
padding-inline-end: 0.75em;
padding-block-end: 0.625em;
min-inline-size: min-content;
border-width: 2px;
border-style: groove;
border-color: threedface;
border-image: initial;
}
legend {
display: block;
padding-inline-start: 2px;
padding-inline-end: 2px;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
}
例子
<form action="#" method="GET">
<fieldset>
<legend>选择性别</legend>
<input type="radio" name="sex" value='male' id="male_btn" form="dd">
<label for="male_btn">男</label><br />
<input type="radio" name="sex" value='female' id="female_btn" form="dd">
<label for="female_btn">女</label>
</fieldset>
<input type="submit" form="dd"/>
</form>
输出结果