DEV Community

Shrikant Dhayje
Shrikant Dhayje

Posted on • Originally published at codewithshriekdj.netlify.app on

Building Website from Scratch - Part 6

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>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Pull Request

Adding Search Bar and Hero Section #15

Preface.

So Now I Made Some Changes About an Search Bar.

I Created the Search bar 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>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Pull Request

https://github.com/shriekdj/site-from-scratch/pull/15


GitHub Repo

https://github.com/shriekdj/site-from-scratch


GitHub Repo

GitHub logo shriekdj / site-from-scratch

Here I Will Create My Site from Start to Finish.

Site From Scratch By @shriekdj

Here I Will Create My Site from Start to Finish.

I Will Now Speed Up The Process.




Star The Repo 😉 If you like.

Top comments (0)