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

دسته بندی: آموزش
سطح مقاله: ساده
زمان مطالعه: 5 دقیقه
۱۶ شهریور ۱۳۹۸

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

فهرست محتوای این مقاله

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

در ویدئوی آموزشی بالا شما با نحوه طراحی و ساخت یک فرم جستجوی زیبا با استفاده از CSS و Jquery آشنا خواهید شد. در این پروژه شما می توانید با مباحث مختلفی آشنا شوید که از جمله آن ها می توان به موارد زیر اشاره کرد :

  • کار با انیمیشن ها
  • شناخت متدهای پایه Jquery
  • استایل دهی با استفاده از CSS
  • و...

سرچ باکس چیست و چطور کار می‌کند؟

ساخت بخش جستجو سایت با زبان برنامه نویسی HTML

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

در حالت کلی و بسیار ساده منظور سرچ باکس یک فرم HTML است که با CSS ظاهر زیبایی به آن داده شده است. همچنین می‌توان با جاوا اسکریپت یا کتابخانه‌هایی مثل جی کوئری ظاهر سرچ باکس را زیباتر و پویاتر هم کرد. پس از طراحی فرم، کاربر داخل آن عبارتی را تایپ می‌کند و دکمه (Button) مربوط به ارسال را می‌زند. در این قسمت با یک Method مثل Get یا Post محتویات آن عبارت برای سرور ارسال می‌شود. حالا نوبت زبان برنامه نویسی سمت سرور است که کنترل این بخش را به عهده بگیرد. بعد از پردازش به وسیله زبان سمت سرور نتایج جستجو در قالب یک فایل Json برمی‌گردد و به کاربر نشان داده می‌شود.

یک سرچ باکس خوب چه ویژگی‌هایی دارد؟

چطور با html سرچ باکس بسازیم؟

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

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

  •  ظاهر جذابی داشته باشد.
  • در جایگاه خوبی قرار گرفته باشد.
  • با توجه به نیاز سایت طراحی شود.
  • از قابلیت‌هایی مثل پیشنهاد خودکار (AUTO-SUGGESTION) استفاده کند.

جمع بندی

همانطور که دیدید، آموزش ساخت سرچ باکس در HTML یکی از پروژه های بسیار خوب برای تمرین طراحی سایت است. زیرا در این پروژه شما باید با زبان های HTML و CSS به کار کنید و سپس با استفاده از Jquery به تکمیل این فرم بپردازید. سون لرن در این مسیر همراه شماست، پس اگر در این مسیر هرگونه سوال یا ابهامی برای شما به وجود آمد با ما درمیان بگذارید.

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

نظرات کاربران

وطن پور

خیلی ممنون از زحمات شما استفاده کردم

خريد خودرو

سلام آموزش خوبی بود ممنون از سایت خوب و زحمات شما

میوند بارکزی

ممنون دوست عزیز لطف دارید .
موفق باشید!!

فرید

خیلی خنک بود دوست عزیز 😳 😛 ❓

elnaz

ببخشید این خطی که نوشتین چیه؟؟::-webkit-input-placeholder
این جز کدهای css است؟من توی آمو.شهای css شبیه این کد ندیدم تا به حال…..ممنون می شم بگین

لقمان آوند

سلام
خیر جز کدهای استاندارد css نیست و کدی مخصوص مرورگرهای کروم و سافاری هست که موتور رندرینگشون webkit هست .
این کد برای استایل دهی به placeholder فیلد های متنی استفاده میشه گویا !

محمد

ممنون خیلی مفید بود ❓

میوند

خواهش میکنم موفق باشید ❓

hassani

آموزش مفیدی بود
ممنونم
ان شاالله موفق بشی ❓ ❓

میوند

مرسی
خوشحالم که براتون مفید بود
موفق باشید

iamreza

بسیار عالی؛ تبریک بابت نویسنده شدن شما. امیدوارم موفق و سعادتمند باشی 🙂 ❓

میوند

سلام
ممنون لطف دارید
موفق و سربلند باشید

افشین زندی

سلام داداش.
آموزش خیلی خوبی بود. امیدوارم موفق باشی
ممنون

میوند

سلام داداش
خوشحال شدم که خوشت اومد
موفق باشی 😉 ❓ ❓

رضا قاسم نژادیان

سلام میوند جان
مطلب جالب و خوبی بود ❓ ❓
موفق باشی

میوند

سلام رضا جان
ممنون داداش
موفق باشی ❓ ❓

آرمین

ممنون میوند جان مطلب جالب و کاربردی بود ❓

میوند

سلام آرمین جان
لطف داری
امیدوارم مفید واقع شده باشه
موفق باشی ❓ ❓

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل