仅用HTML和CSS实现勾选复选框后表单结果页链接在新标签打开

原代码问题说明 #

• 核心逻辑错误：表单提交的跳转目标由 <form> 标签自带的target属性控制，你将target作为普通表单参数提交给搜索引擎，搜索引擎不会识别处理该参数，因此无法实现新标签页打开效果。
• 代码不符合要求：滑块上的oninput属性属于JavaScript代码，违反了作业禁止使用JS的要求，需要删除。

纯HTML+CSS实现方案 #

实现思路 #

利用CSS的:checked伪类选择器，配合兄弟元素选择器，根据复选框的勾选状态切换两个仅target属性不同的提交按钮的显示状态，全程不需要JS参与。

完整代码 #

HTML代码

<!-- 复选框前置，方便CSS选择控制 -->
<p>
  <label for="newTab">New Tab</label>
  <input id="newTab" type="checkbox">
</p>

<!-- 两个仅target属性不同的空表单 -->
<form action="https://www.google.com/search" id="normalForm"></form>
<form action="https://www.google.com/search" id="newTabForm" target="_blank"></form>

<fieldset> 
  <legend>Google search</legend>
  <p>
    <label for="search">Search</label>
    <!-- form属性关联两个表单，两个表单都能拿到该字段值 -->
    <input id="search" name="q" type="text" form="normalForm newTabForm">
  </p>
  <p>
    <label for="hits">Number of hits</label>
    <input id="hits" type="range" min="1" max="10" value="5" name="num" form="normalForm newTabForm">
  </p>
  <!-- 两个提交按钮分别归属不同表单，控制显示隐藏 -->
  <input type="submit" value="Start search" form="normalForm" class="submit-normal">
  <input type="submit" value="Start search" form="newTabForm" class="submit-newtab">
</fieldset>

CSS代码

/* 原有样式保留 */
fieldset{
    display: table;
}
p{
    display: table-row;
}
label{
    font-family: Arial;
    padding: 10px;
    display: table-cell;
}
input{
    margin-left: 30px;
    display: table-cell;
}
/* 新增控制提交按钮显示隐藏的样式 */
.submit-newtab {
    display: none;
}
#newTab:checked ~ fieldset .submit-normal {
    display: none;
}
#newTab:checked ~ fieldset .submit-newtab {
    display: inline-block;
}

实现说明 #

• 所有公共表单字段通过form属性同时关联两个表单，无论点击哪个提交按钮都能正常提交搜索参数。
• 未勾选复选框时，默认显示普通提交按钮，提交后在当前页跳转结果。
• 勾选复选框后，自动切换显示带新标签页属性的提交按钮，提交后会在新标签页打开结果。

内容的提问来源于stack exchange，提问作者Tobias2712