آموزش ساخت سرچ باکس در 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 استفاده کردم، ولی با ایجاد این تغییر دیگه فرم جست و جو باز و بسته نمیشه.
لطفا کمکم کنید.
تشکر
وطن پور ۲۱ اسفند ۱۳۹۷، ۱۵:۰۷
خیلی ممنون از زحمات شما استفاده کردم
خريد خودرو ۱۷ شهریور ۱۳۹۴، ۱۶:۲۵
سلام آموزش خوبي بود ممنون از سايت خوب و زحمات شما
میوند بارکزی ۱۷ شهریور ۱۳۹۴، ۲۰:۴۶
ممنون دوست عزیز لطف دارید .
موفق باشید!!
فرید ۱۱ تیر ۱۳۹۴، ۲۱:۰۱
خیلی خنک بود دوست عزیز :oops: :razz: :?:
elnaz ۰۸ تیر ۱۳۹۴، ۲۱:۱۱
ببخشید این خطی که نوشتین چیه؟؟::-webkit-input-placeholder
این جز کدهای css است؟من توی آمو.شهای css شبیه این کد ندیدم تا به حال.....ممنون می شم بگین
لقمان آوند ۰۹ تیر ۱۳۹۴، ۰۱:۰۷
سلام
خیر جز کدهای استاندارد css نیست و کدی مخصوص مرورگرهای کروم و سافاری هست که موتور رندرینگشون webkit هست .
این کد برای استایل دهی به placeholder فیلد های متنی استفاده میشه گویا !
محمد ۰۲ تیر ۱۳۹۴، ۱۶:۰۸
ممنون خیلی مفید بود :?:
میوند ۰۲ تیر ۱۳۹۴، ۱۸:۵۸
خواهش میکنم موفق باشید :?:
hassani ۲۹ خرداد ۱۳۹۴، ۱۶:۰۷
آموزش مفیدی بود
ممنونم
ان شاالله موفق بشی :?: :?:
میوند ۲۹ خرداد ۱۳۹۴، ۱۷:۵۲
مرسی
خوشحالم که براتون مفید بود
موفق باشید
iamreza ۲۹ خرداد ۱۳۹۴، ۱۵:۱۲
بسیار عالی؛ تبریک بابت نویسنده شدن شما. امیدوارم موفق و سعادتمند باشی :smile: :?:
میوند ۲۹ خرداد ۱۳۹۴، ۱۵:۵۶
سلام
ممنون لطف دارید
موفق و سربلند باشید
افشین زندی ۲۹ خرداد ۱۳۹۴، ۱۲:۱۸
سلام داداش.
آموزش خیلی خوبی بود. امیدوارم موفق باشی
ممنون
میوند ۲۹ خرداد ۱۳۹۴، ۱۲:۳۲
سلام داداش
خوشحال شدم که خوشت اومد
موفق باشی :wink: :?: :?:
رضا قاسم نژادیان ۲۹ خرداد ۱۳۹۴، ۱۱:۰۰
سلام میوند جان
مطلب جالب و خوبی بود :?: :?:
موفق باشی
میوند ۲۹ خرداد ۱۳۹۴، ۱۲:۳۰
سلام رضا جان
ممنون داداش
موفق باشی :?: :?:
آرمین ۲۹ خرداد ۱۳۹۴، ۱۰:۳۵
ممنون میوند جان مطلب جالب و کاربردی بود :?:
میوند ۲۹ خرداد ۱۳۹۴، ۱۲:۲۹
سلام آرمین جان
لطف داری
امیدوارم مفید واقع شده باشه
موفق باشی :?: :?: