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

  ‏سطح ساده
‏  5 دقیقه
۱۶ شهریور ۱۳۹۸
آموزش ساخت سرچ باکس در HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

جمع بندی

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

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

 

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

محمدرضا

سلام خسته نباشید خداقوت بنده با استفاده از بوت استرپ 5 یه جدول طراحی کردم حالا میخوام یه باکس سرچ بزنم ک کاربر به محز وارد کردن اون li مدنظر خودش رو پیدا کنه هرچه کردم موفق نشدم خیلی خیلی ممنون میشم اگه کمکم کنید

اگر امکانش هس یه راهنمایی به ایمیلم بفرستین:

mohammadrezaazimnejad45@gamil.com

با تشکر

نازنین کریمی مقدم

درود
شما میتونید از همین آموزش هم استفاده کنید، منتها باید مشخص کنید که بین داده جدول سرچ بزنه و در خروجی کل ردیف رو برگردونه.
یک راه بهتر استفاده از جی کوئری هست. پیشنهاد میکنم این نمونه کد w3schools رو ببینید.

محمدحسین

چرا اون موستون وقتی دارید تایپ میکندی کوچک بزرگ میشه؟
خیلی باحاله
اگه افزونه ای هست نصب کردید براش میگید؟

Ali

سلامی مجدد
خیر کد هام هیچ اروری نمیدی
من می تونم آیدی تلگرام یا همچین چیزی داشته باشم ازتون تا کد هام رو نشونتون بدم؟؟؟

نازنین کریمی مقدم

سلام.
شما میتونید کدهاتون رو به بخش پشتیبانی تلگراممون که آیدیش در پایین صفحه سایت هست، بفرستید.

Ali

سلام و خسته نباشید به تمامی اعضای سایت سون لرن
می خواستم بدونم چرا من با اینکه تمامی کد هایی که توی ویدئو گفتید رو نوشتم سرچ باکس باز نمیشه؟؟؟
تمامی حالت ها رنگ ها همشون اعمال میشه ولی روش که کلیک می کنم باز نمی شه

نازنین کریمی مقدم

درود. کدتون خطا نمیده؟
برای بررسی بهتر که خطا داره یا نه، میتونید با زدن کلید f12 روی مرورگر کروم و رفتن به تب console، این مورد رو چک کنید.
چون قاعدتا اگه باز نمیشه یجای کد اشتباه عمل میکنه و در کنسول خطاها با رنگ قرمز مشخص میشن.

ابوالفضل

در قسمت تگ اسکریپت https://ajax.googleapis.com/ajax/libs/ jquery/5.4.1/jquery.min.js
همچین فایلی وجود ندارن شاید غلط ادرسشو نوشتم لطفاً بگید

نازنین کریمی مقدم

سلام.
اون عدد ورژن رو در آدرس اشتباه نوشتید. 5.4.1 نداریم. باید اصلاح کنید به: 3.4.1
احتمالا بخاطر محتوای ویدیویی خطای دید داشتید 🙂

سعید

با سلام

عذر میخوام دوباره وقتتون رو میگیرم.
مشکل خطاهای فایل js رو حل کردم. فقط اینکه چرا اون خط چشمک زن از سمت راست هستش ؟ در آموزش برعکس و صحیح از سمت چپ به راست بود. اما برای من برعکسه عمل میکنه ! چطور میتونم این رو تغییر بدم ؟

تشکر

نازنین کریمی مقدم

درود. خوشحالم که تونستید مشکلتون رو برطرف کنید.
احتمالا به این خط استایلی دادید که باعث شده راست چین بشه. اول استایل خود اون باکس و بعد استایل div و … مربوط بهش رو چک کنید.
راه های زیادی برای چپ چین شدن در CSS وجود داره که یکیش استفاده از dir هست.

سعید

طی دیدگاه بنده در ۲۵ مهرماه؛
روشی که فرمودید رو انجام دادم و متاسفانه خطاهای فایل js نمایش داده شد !
اگر لطف کنید من به پشتیبان تلگرام هم پیام دادم و عکس کد های نوشته شده ام رو فرستادم، لطفا این موضوع رو بررسی کنید.
باتشکر

نازنین کریمی مقدم

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

سعید

با سلام

ممنون از آموزش مفیدتون!.

من همه ی مراحل رو پیش بردم اما فکر میکنم مشکل از مسیر نوشتن فایل js هستش. من کد هارو نوشتم و آخرش که بنا به اموزش مدرس ویدیو نشان داده نشد و ایشون دوباره کدهایی رو اضافه کردن تا درست شه من تا اونجا هم پیش رفتم (یعنی آخر مسیر) اما سرچ باکس من باز نمیشه !

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

لطفا راهنمایی کنید.

نازنین کریمی مقدم

سلام. کدتون خطا نمیده؟
برای بررسی بهتر که خطا داره یا نه، میتونید با زدن f12 روی مرورگر کروم و رفتن به تب console، این مورد رو چک کنید.

احسان

چرا دانلود نمیشه ؟؟؟

parsa ranjeh

برای چی وقتی در قسمت transition کد زدم; ارور میده و transition رو انجتم نمیده لطفا کمک کنید. کد هم کاملا درسته ولی در ویژوال استودیو کد ارور میده

با تشکر از شما🎓

محمد حسن

سلام
خیلی خوب بود
مرسی

ashkan

kheyli khooob bood mrc vagean

حامد

ممنون از مطلب بسیار عالیتون
من میخوام در فرم جست و جو چندین خط رو بتونم وارد کنم واسه همین بخش طراحی فرم به جای تگ input از تگ textarea استفاده کردم، ولی با ایجاد این تغییر دیگه فرم جست و جو باز و بسته نمیشه.
لطفا کمکم کنید.
تشکر

ما در سون لرن با محدودسازی دسترسی آزاد به اینترنت مخالفیم     اطلاعات بیشتر