【问题标题】:Links shown after hitting submit should be opened in a new tab点击提交后显示的链接应在新选项卡中打开
【发布时间】:2021-12-09 07:59:18
【问题描述】:

所以我有一个作业,我们必须创建一个包含多个元素的表单。其中之一是复选框,选中后,结果页面中显示的链接应在新选项卡中打开。没有 Javascript,只有 html 和 css!

fieldset{
    display: table;
}

p{
    display: table-row;
}

label{
    font-family: Arial;
    padding: 10px;
    display: table-cell;
    
}

input{
    margin-left: 30px;
    display: table-cell;
}
<form action="https://www.google.com/search">
        
            <fieldset> 
                
                <!--Google search/field-->
                <legend>Google search</legend>

                <p>
                <label for="search">Search</label>
                <input id="search" name="q" type="text">
                </p>
                

                <!--Google search/slider-->
                <p>
                <label for="hits">Number of hits</label>
                <input id="hits" type="range"
                        min="1" max="10" value="5"
                        oninput="rangeValue.innerText = this.value"
                        name="num">
                </p>
                

                <!--Google search/Checkbox-->
                <p>
                <label for="newTab">New Tab</label>
                <input id="newTab" type="checkbox" 
                        name="target" value="_blank">
                </p>

                <!--Start search-->
                <input type="submit" value="Start search">
                
            </fieldset>
</form>

At 是我尝试过的代码,但我无法让它工作。 抱歉,如果代码有点乱,我们现在才刚学习 html 一个月,而我才刚刚开始学习 :)

【问题讨论】:

    标签: html forms input checkbox


    【解决方案1】:

    对于谷歌搜索,没有 url 参数 target=_blank 您必须设置参数newwindow=1。

    带有工作参数的部分代码(复选框字段):

    <!--Google search/Checkbox-->
    <p>
    <label for="newTab">New Tab</label>
    <input id="newTab" type="checkbox" 
    name="newwindow" value="1">
    </p>
    

    【讨论】:

      【解决方案2】:

      如果没有 JS,你可能无法做到这一点

      如果检查输入,则 onclick 切换表单中的这个小脚本目标为 _blank(新选项卡),否则,目标为 _self(相同选项卡)。

      您必须在表单中添加 id 属性,在此示例中我使用了“myForm”

                  <p>
                  <label for="newTab">New Tab</label>
                  <input id="newTab" type="checkbox" onclick="if(this.checked) document.getElementById('myForm').setAttribute('target', '_blank'); else document.getElementById('myForm').setAttribute('target', '_self')">
                  </p>
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2014-05-08
        • 2017-06-29
        • 2012-04-25
        • 1970-01-01
        • 1970-01-01
        • 2022-07-30
        • 1970-01-01
        相关资源
        最近更新 更多