Building Website from Scratch - Part 6
Adding search bar and Hero Section to My Site
Play this article
Preface.
So Now I Made Some Changes About an Search Bar.
I Created the Search bar and Hero Section on Home Page of The Website.
Section Addition in <body> tag.
I Added Given Code in body tag before main tag and after header tag.
<form method="GET" action="/search">
<label>Search Here : </label>
<input type="search" name="search-key" placeholder="Enter Your Query" />
<input type="submit" />
</form>
Search Bar and Label Configuration..
I added the for attribute to label tag.
By Doing this Whenever we click the label element it automatically clicked to input bar as well.
The
nameattribute ofinputtag is used by back-end server as key name for dictionary of inputs in form.
<label for="search-id">Search Here : </label>
<input type="search" id="search-id" name="search-key" placeholder="Enter Your Query" />
Also Hero Section In main tag added
Like Given Below.
<section class="hero">
<img src="#" alt="Hero Section Image" />
<h1 class="page-title">Home Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>