Shrikant Dhayje
shriekdj

shriekdj

Building Website from Scratch - Part 6

Adding search bar and Hero Section to My Site

Shrikant Dhayje's photo
Shrikant Dhayje
·Mar 2, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Preface.
  • Section Addition in <body> tag.
  • Search Bar and Label Configuration..
  • Pull Request
  • GitHub Repo

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 name attribute of input tag 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>

Pull Request


GitHub Repo

 
Share this