ساخت سرچ باکس در html یکی از تکنیک‌هایی است که برای طراحی وبسایت‌تان الزامیست. هر کاربری که وارد سایت شما می‌شود، به دنبال موضوعی خاص آمده و هدفی دارد. اگر شما به بازدیدکنندگان در جستجوی مطالب موردنظرشان کمک نکنید، کاربر سایت شما را ترک می‌کند. ساخت کادر جستجو در html یکی از راه‌هایی است که می‌توانید کاربرانتان را برای رسیدن به هدفشان کمک کنید و آمار بازدید سایت را بالاتر ببرید.

در این مقاله از سایت سبزلرن به آموزش ساخت سرچ باکس در html می‌پردازیم و به شما می‌گوییم که برای ساخت جستجو در html باید به چه نکاتی توجه کنید، پس با ما همراه باشید.

آموزش ساخت سرچ باکس در html

در این آموزش ساخت سرچ باکس در html شما یاد می‌گیرید که چطور یک باکس سرچ با استفاده از زبان‌های html، css و جاوا اسکریپت بسازید. شما می‌توانید با ساخت سرچ در html، امکان جستجو در دیتابیس سایت را برای کاربران‌تان فراهم کنید. کاری که نیاز است انجام دهید این است:

• ساخت کادر جستجو در html
• استایل دهی فرم جستجو با Css
• متصل کردن آن به گوگل با جاوا اسکریپت

این سرچ باکس اینطور عمل می‌کند که با جستجوی یک عبارت توسط کاربر، موتور جستجوی گوگل آن عبارت را در سایت شما سرچ کرده و نتایج را در یک صفحه‌ی جدید به کاربر نمایش می‌‌دهد. در ادامه آموزش ساخت سرچ باکس در html را با هم بررسی می‌کنیم.

ساخت کادر جستجو در html

اولین چیزی که برای ساخت سرچ در html نیاز داریم، خود نوار سرچ یا کادر جستجو هست. برای این کار ما به چند المان در html نیاز داریم:

• <form>: این تگ برای ساخت کادر جستجو در html است.
• <input>: برای دریافت ورودی از کاربر برای جستجو استفاده می‌شود.
• <button>: برای ثبت درخواست کاربر و شروع جستجو به کار می‌رود.

کد ساخت سرچ در html به صورت زیر می‌شود:

<form id="form"> <input type="search" id="query" name="q" placeholder="Search..."&gt; <button>Search</button> </form>

کد بالا هر چیزی که برای ساخت کادر جستجو در html نیاز داریم را در خود دارد. یکسری ویژگی برای input در این کد تعریف شده که در ادامه جزییات آن‌ها را با هم بررسی می‌کنیم:

• Type: این ویژگی مشخص می‌کند که چطور ورودی در صفحه ظاهر شود. حتما می‌دانید که انواع مختلفی از ورودی‌ها مثل رمز عبور و چک باکس ورود دارند که می‌توان برای این ویژگی تعریف کرد. برای ساخت سرچ باکس در html ما از حالت search برای تایپ استفاده کردیم.

• Id: تنظیم یک شناسه می‌تواند برای رفرنس دادن باکس ورودی از جاوا اسکریپت برای استفاده‌های بعدی کمک کند.

• Name: معمولا برای این نام از q برای نمایش query box استفاده می‌شود.

• Placeholder: این متن یک راهنما برای چیزی است که کاربر در ورودی وارد کرده است و به صورت کمرنگ در باکس ورودی نمایش داده می‌شود. مثل شکل زیر:

برای ساخت جستجو در html ما از نوع search برای ورودی استفاده کردیم؛ اما، نوع متنی هم وجود دارد. اینکه کدامیک از این دو نوع را باید برای ساخت سرچ باکس در html  انتخاب کنید، شاید کمی گیج کننده باشد. می‌توان گفت هر دو ورودی تقریبا یکسانند؛ ولی نوع search یکسری قابلیت‌های اضافه دارد. مثلا در برخی مرورگرها یک آیکن ضربدر برای حذف کردن متنی که وارد کرده‌اید هم کنار ورودی اضافه می‌کند. مثل شکل زیر:

پیشنهاد می‌کنیم برای ساخت سرچ باکس در html از همین نوع search استفاده کنید. کار ما برای ساخت جستجو در html هنوز تمام نشده. ما باید دو تغییر مهم دیگر به فرم خودمان بدهیم تا صفحه‌ خوان‌ها هم بتوانند فرم ما را تحلیل کنند. یکی از نکاتی که بهتر است در هنگام ساخت سرچ باکس در html به آن توجه کنید، قابلیت دسترسی تمامی کاربران به آن است. یعنی هر کاربری با هر نوع سیستمی بتواند از سایت شما استفاده کند.

افرادی که نابینا هستند، معمولا از صفحه خوان ها برای دسترسی به محتوای وب استفاده می کنند. این صفحه خوان ها می توانند محتوای سایت شما را با صدای بلند برای فرد بخوانند تا وی متوجه گشت و گذار خود شود. برای اینکه یک صفحه برای صفحه خوان ها هم عملیاتی باشد باید از ویژگی های دستوری aria در html استفاده کنید. مثلا برای ساخت سرچ باکس در html باید از دستور aria label کمک بگیرید.

• با استفاده از ویژگی role با مقدار search به صفحه‌ خوان اعلام کنیم که این یک ابزار سرچ است. صفحه خوان ابزاری کمکی است که افراد دچار ناتوانی برای دسترسی به محتوای وب استفاده می‌کنند.

• با استفاده از ویژگی aria-label یک متنی برای سرچ باکس در html قرار می‌گیرد که صفحه خوان آن را با صدای بلند برای افراد ناتوان یا نابینا می‌خواند. مثلا در این باکس ما عبارت “Search through site content” یا همان جستجو در محتوای سایت را قرار دادیم.

کد نهایی ساخت باکس جستجو در html به شکل زیر در می‌آید:

<form id="form" role="search"> <input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content"> <button>Search</button> </form>

خب تا اینجای کار بخش ساخت جستجو در html انجام شد، حالا باید به سراغ Css سرچ باکس برویم و به آن استایل بدهیم.

استایل دهی با css

همانطور که گفتیم بعد از ساخت سرچ باکس در html، شما می‌توانید برای سرچ باکس خود استایل دهی با css انجام دهید و ظاهر بهتری برای آن ایجاد کنید. یکی از مزیت‌های استایل برای جعبه جستجو این است که کاربر سریع‌تر آن را پیدا می‌کند. مثلا یک آیکن ذره بین یا دکمه‌های اضافه می‌تواند ظاهر بهتری به سرچ باکس شما بدهد.

آیکن‌‌ها و رنگ‌ها می‌توانند ظاهر بهتری به سرچ باکس شما بدهند. خب ببینیم که چطور باید این کار را انجام دهیم. کد css برای ساخت سرچ باکس در html به شکل زیر است:

form {

  background-color: #4654e1;

  width: 300px;

  height: 44px;

  border-radius: 5px;

  display: flex;

  flex-direction: row;

  align-items: center;

}

همانطور که مشاهده می‌کنید ما یک طول و عرض برای فرم مشخص کردیم. و با قابلیت flex نمایش آیتم‌ها را تنظیم کردیم.

حال به تغییر ظاهر سرچ باکس می‌پردازیم:

input {

  all: unset;

  font: 16px system-ui;

  color: #fff;

  height: 100%;

  width: 100%;

  padding: 6px 10px;

}

خط اول یعنی all: unset تنظیمات کادر جستجو را بازنشانی می‌کند. خط بعدی سایز و نوع فونت متنی که در باکس نوشته می‌شود را مشخص می‌کند. همچنین طول و عرض باکس متن مورد جستجو مشخص شده  کمی هم پدینگ برای حاشیه‌ی اطراف نوشته در داخل باکس تنظیم کردیم.

کد Css بعدی برای تغییر و تنظیم مشخصات placeholder است. شاید کمی عجیب به نظر برسد ولی ما می‌خواهیم این متن پیشفرض داخل ورودی سرچ باکس را هم استایل بدهیم. معمولا به صورت پیشفرض این متن به رنگ خاکستری است، حال رنگ و شفافیت آن را تغییر می‌دهیم:

::placeholder {

  color: #fff;

  opacity: 0.7;

}

آخرین تغییراتی که در css برای ساخت سرچ در html  اعمال می‌کنیم، استایل دهی دکمه‌ی سرچ است. شما می‌توانید این دکمه را تغییر شکل دهید یا اینکه با آیکن سرچ جایگزین کنید. در این مثال ما نیز دکمه را با آیکن سرچ جایگزین کردیم. برای این کار ما کد html دکمه را با یک svg تغییر دادیم. این svg یک فایل تصویر است که قرار است به جای دکمه قرار بگیرد.

<form role="search" id="form">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>
    <svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
  </button>
</form>

خب برای استایل دهی با Css این دو المان باید دستور زیر را وارد کنیم:

button {

  all: unset;

  cursor: pointer;

  width: 44px;

  height: 44px;

}




svg {

  color: #fff;

  fill: currentColor;

  width: 24px;

  height: 24px;

  padding: 10px;

}

دستور all: unset; برای تنظیم مجدد دکمه به حالت پیشفرض در مرورگرهای مختلف به کار می‌رود. طول و عرض دکمه را به مقدار 44 پیکسل تنظیم کردیم. طول، عرض و رنگ آیکن را نیز تغییر دادیم. اکنون ساخت باکس جستجو در html و Css انجام شده و  باید به سراغ جاوا اسکریپت برویم.

ساخت سرچ باکس با جاوا اسکریپت

برای ساخت سرچ باکس با جاوا اسکریپت کاری که باید انجام دهید ان است که سرچ بار خود را به سرچ گوگل متصل کنید. برای این کار شما به قطعه کد برای کارهای زیر نیاز دارید:

• یک event listener برای فرم تا بفهمیم چه وقت کسی دکمه‌ی سرچ را فشار می‌دهد.
• دریافت مقدار متنی از باکس پرس و جو
• ساخت آدرس گوگل که سرچ را در سایت ما انجام می‌دهد.
• باز کردن یک تب جدید با گوگل و query جستجو

حتما می‌دانید که با استفاده از دستور site: گوگل امکان سرچ یک موضوع در یک سایت خاص را فراهم می‌کند. مثلا اگر بخواهید عبارت lazy loading را در سایت مثلا pagedart.com جستجو کنید، باید دستور زیر را در باکس سرچ گوگل وارد کنید:

site:pagedart.com lazy loading

بنابراین شما می‌توانید گوگل را برای سایت خودتان استفاده کنید؛ یعنی فیلتر سایتتان را روی نتایج گوگل قرار دهید تا فقط در محتوای سایت شما سرچ کند و نتایج سایت شما را نشان دهد. این قابلیت همان چیزی است که ما قرار است برای ساخت سرچ باکس در html و جاوا اسکریپت از آن کمک بگیریم. کدی که باید برای این کار استفاده کنید، به شکل زیر است:

const f = document.getElementById('form');

const q = document.getElementById('query');

const google = 'https://www.google.com/search?q=site%3A+';

const site = 'example.com';




function submitted(event) {

  event.preventDefault();

  const url = google + site + '+' + q.value;

  const win = window.open(url, '_blank');

  win.focus();

}




f.addEventListener('submit', submitted);

اولین کاری که باید انجام دهیم این است که برخی از متغیرها را به فرم و جعبه ورودی اضافه کنیم. سپس آدرس گوگل را تنظیم کنیم و این متغیرها را به آن اختصاص دهیم:

const f = document.getElementById('form');

const q = document.getElementById('query');

const google = 'https://www.google.com/search?q=site%3A+';

const site = 'example.com';

حال تابعی می‌نویسیم که وقتی کاربر دکمه‌ی سرچ را زد، یک تب جدید گوگل برای او باز شود و عبارت وارد شده را در سایت جستجو کرده و نتایج را در تب جدید نمایش دهد:

function submitted(event) {

  event.preventDefault();

  const url = google + site + '+' + q.value;

  const win = window.open(url, '_blank');

  win.focus();

}

آخرین خط کدی که باید بنویسیم، کد زیر است:

f.addEventListener('submit', submitted);

این کد یک listener به فرم اضافه می‌کند. وقتی دکمه‌ی سرچ را بزنید، تابع سرچ اجرا می‌شود. حال اگر شما سرچ کوئری را وارد کنید و روی دکمه‌ی سرچ کلیک کنید، یک تب جدید برای شما باز می‌شود که نتایج سایت را به شما نشان خواهد داد. خب کار ساخت سرچ باکس در html نیز تمام شد، با این دستوارتی که گفتیم شما می توانید به راحتی یک سرچ باکس عملیاتی و کارآمد برای سایت خودتان طراحی کنید.

راه حل کامل

در این مقاله آموزش ساخت سرچ باکس در html را به شما نشان دادیم و با هم مرحله به مرحله جلو رفتیم. کد زیر دستور کامل ساخت سرچ در html را نشان می‌‌دهد:

<!DOCTYPE html>
<html lang='en' class=''>
  <head>
    <meta charset='UTF-8'>
    <title>Search Bar Demo</title>
    <style>
        body {
        background-color: #3745c2;
        margin: 200px 40%;
      }

      form {
        background-color: #4654e1;
        width: 300px;
        height: 44px;
        border-radius: 5px;
        display:flex;
        flex-direction:row;
        align-items:center;
      }

      input {
        all: unset;
        font: 16px system-ui;
        color: #fff;
        height: 100%;
        width: 100%;
        padding: 6px 10px;
      }

      ::placeholder {
        color: #fff;
        opacity: 0.7; 
      }

      svg {
        color: #fff;
        fill: currentColor;
        width: 24px;
        height: 24px;
        padding: 10px;
      }

      button {
        all: unset;
        cursor: pointer;
        width: 44px;
        height: 44px;
      }
    </style>
  </head>
  <body>
    <form role="search" id="form">
      <input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content">
      <button>
        <svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
      </button>
    </form>
    <script>
      const f = document.getElementById('form');
      const q = document.getElementById('query');
      const google = 'https://www.google.com/search?q=site%3A+';
      const site = 'pagedart.com';

      function submitted(event) {
        event.preventDefault();
        const url = google + site + '+' + q.value;
        const win = window.open(url, '_blank');
        win.focus();
      }

      f.addEventListener('submit', submitted);
    </script>
  </body>
</html>

نکاتی برای ساخت باکس جستجو در html به بهترین شکل

همان‌طور که گفتیم سرچ باکس قابلیتی است که روی تجربه‌ی کاربران و سئوی سایت شما تاثیر زیادی دارد و باید به بهترین شکل آن را طراحی کنید. برای ساخت جستجو در html بهتر است به نکات زیر توجه داشته باشید:

• تا حد امکان آن را قابل مشاهده و برجسته طراحی کنید.

• از طرح‌های ساده ولی کاربردی استفاده کنید.

• سرچ باکس را در محلی قرار دهید که کاربر انتظار دارد.

• در تمامی صفحات سرچ باکس را قرار دهید.

• سرچ باکس را برای تمامی افراد و صفحه‌خوان‌ها در دسترس قرار دهید.

• سایز کادر جستجو را به اندازه‌ی کافی بزرگ در نظر بگیرید.

• حتما سرچ باکس خود را استایل دهید؛ اما، نه بیش از حد.

• حتما از آیکن ذره بین در سرچ باکس استفاده کنید.

• یک دکمه‌ی بازگشت برای برگشتن کاربر به حالت قبل از سرچ حتما در نظر بگیرید.

• برای اجرای سرچ در سایت، کاربر را مجبور به لاگین کردن نکنید.

• پیشنهادات جستجو به کاربر ارائه دهید.

• جستجوهای اخیر را به کاربران نمایش دهید.

• متن جستجو شده را حفظ کنید تا کاربر در دفعات بعدی مجددا تایپ نکند.

• قابلیت سرچ عبارت‌های مترادف را نیز فعال کنید.

• قابلیت تصحیح خودکار به سرچ اضافه کنید.

• قابلیت سرچ صوتی را نیز به سرچ باکس اضافه کنید.

حرف آخر

سرچ باکس یکی از مهم‌ترین بخش‌ها در هر سایت است که کاربران شما را در سایت راهنمایی می‌کند. طراحی یک سرچ باکس قدرتمند و حرفه‌ای می‌تواند تاثیر زیادی روی سئوی سایت شما بگذارد. در این مقاله به آموزش ساخت سرچ باکس در html پرداختیم و گفتیم که برای ساخت کادر جستجو در html شما به سه مرحله زیر نیاز دارید:

• ساخت یک فرم با کمک html
• استایل دهی با استفاده از Css
• کد جاوااسکریپت برای تعامل با فرم و استفاده از موتور گوگل

همچنین در این مقاله به شما گفتیم که برای ساخت در html، چطور باید به موتور گوگل متصل شوید از قابلیت‌های سرچ این موتور جستجو استفاده کنید. در واقع شما از توان گوگل برای سایت خودتان بهره‌مند می‌شوید. در پایان یکسری نکاتی که به شما در بهتر شدن ساخت باکس جستجو در html کمک می‌کند را ارائه کردیم. امیدواریم با روش‌ گفته شده برای ساخت باکس جستجو در html بتوانید قابلیت جستجوی حرفه‌ای را به سایت خودتان اضافه کنید.

اگر به زبان html علاقمندید و دوست دارید این زبان را به شکلی اصولی و حرفه ای یاد بگیرید ما به شما دوره رایگان آموزش صفر تا صد html سایت سبزلرن را پیشنهاد می کنیم.

منبع: https://pagedart.com/blog/how-to-add-a-search-bar-in-html/

سوالات متداول

• آیا می‌توان بدون استفاده از موتور گوگل هم برای سایت موتور جستجو طراحی کرد؟

بله شما می‌توانید با استفاده از موتورهای جستجوی دیگر مثل یاهو، بینگ و… را نیز برای موتور جستجو سایتتان استفاده کنید.

• آیا می‌توان برای یک لیست مشخص در html، سرچ باکس طراحی کرد؟

بله شما می‌توانید به راحتی لیست خود را در html تعریف کنید و یک موتور جستجو برای این لیست بسازید.