Links shown after hitting submit should be opened in a new tab-CodePudding

So I have a homework where we have to create a form with several elements in it. One of them is a checkbox and after it is checked the links shown in the resulting page should be opened in a new tab. NO Javascript, ONLY html and 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 is the code that I tried but I just couldn't get it to work. And sorry if the code is a bit messy, we are now just about a month into html and I'm only at the beginning of learning :)

CodePudding user response：

For google search there no url parametr target=_blank You must set parametr newwindow=1.

Part of your code (checkbox field) with working parametr:

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

CodePudding user response：

You probably can't achieve this without JS

This little script in onclick switch form target to _blank (new tab) if input is checked or _self (same tab) if not.

You must add id attribute to your form, in this example i used "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>