Here is a search form with two tabs:
Let's walk through all the pieces of this code.
First, we start with a div that will contain our search box. <div> tags hold pieces of HTML and keep them all together, just like a bin for holding books.
<div>
Then, we have a list. <ul> tags create lists. Inside ul tags are list items which use the <li> tag.
<ul>
<li class="active"><a data-toggle="tab" href="#jstor">JSTOR</a></li>
<li><a data-toggle="tab" href="#googlescholar">Google Scholar</a></li>
</ul>
<div>
For each of our tabs, we have another div. Inside this div are all the pieces of a form, including the form action, method, target, etc.
<div class="tab-pane fade in active" id="jstor">
<form action="https://www.jstor.org/action/doBasicSearch?" method="get" role="form" target="_blank"><input class="form-control" id="Query" name="Query" placeholder="Find scholarly articles" required="" type="text" value="" /> <input class="btn btn-info btn-sm btn-submit" type="submit" value="Search JSTOR" /> </form>
</div>
<div class="tab-pane fade" id="googlescholar">
<form action="https://scholar.google.com/scholar?" method="get" target="_blank"><input class="form-control" id="q" name="q" placeholder="Find scholarly articles, case law, and patents" required="" type="text" /> <input class="btn btn-info btn-sm btn-submit" type="submit" value="Search Google Scholar" /> </form>
</div>
Finally, we close out our original two div tags.
</div>
</div>