:: فقط تا پایان فروردین 👈 ۳۵٪ تخفیف ویژه به همراه هدیه 5 میلیون تومانی
۰ ثانیه
۰ دقیقه
۰ ساعت
۵۲ دیدگاه نظر محمد انوری
آموزش ساخت سرچ باکس در HTML
آموزش ساخت سرچ باکس در HTML

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

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

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

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

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

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

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

بیشتر بخوانید: CSS چیست و چرا باید از آن استفاده کنیم؟

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

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

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

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

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

جمع بندی

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

۵۲ دیدگاه
ما همه سوالات و دیدگاه‌ها رو می‌خونیم و پاسخ میدیم
مهدی ۲۹ مهر ۱۴۰۲، ۱۸:۵۷

اموزش داده شده اشتباه بود من همون کد‌ها را نوشتم ولی مال من مثل استاد کار نکرد

نازنین کریمی مقدم ۳۰ مهر ۱۴۰۲، ۱۰:۱۰

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

۲۲ شهریور ۱۴۰۲، ۱۹:۴۵

سرچ با کسی که مخصوص متن‌های همون صفحه html باشه وجود دار ه؟

نازنین کریمی مقدم ۲۲ مهر ۱۴۰۲، ۰۹:۰۶

درود متوجه منظورتون نشدم چه کاری رو میخواید انجام بدید دقیقا؟

۲۲ شهریور ۱۴۰۲، ۱۹:۳۴

من code box برا کدام میخوام که شبیه سایت‌ها بتونم بدو نه اجرا شدن کد‌ها کدام پررنگ زیبا نمایش بد چکار باید انجام بدم

نازنین کریمی مقدم ۲۲ مهر ۱۴۰۲، ۰۹:۰۰

درود میتونید راهکارهای این تاپیک استک رو ببینید که با استایل مدیریت کرده، یا از کتابخانه‌های اضافه کردن ادیتور استفاده کنید. پیشنهاد بنده اینه که اگر صرفا جهت نمایش و زیبایی هست از کتابخانه استفاده نکنید که سنگین نشه. https://stackoverflow.com/questions/5793214/creating-programming-code-box-on-my-website-w-xhtml-css

۲۴ اردیبهشت ۱۴۰۲، ۱۸:۳۸

عالی بود

۰۹ فروردین ۱۴۰۲، ۱۶:۱۹

سلام ممنون از ویدئوی خوبتان اگر بخواهیم سرچ باکس ما، صفحه ی thml مورد نظر ما را (که اطلاعات سرچ شده در سرچ باکس درونش هست) را باز کنه، باید چه کار کنیم؟ چگونه باید به پایگاه داده متصل بشه؟

نازنین کریمی مقدم ۱۴ فروردین ۱۴۰۲، ۰۷:۳۳

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

۰۸ دی ۱۴۰۱، ۱۳:۳۴

کاش کداشو میزاشتین خیلی قشنگ شده ولی وقت نمیکنم انجامش بدم ???

۱۱ بهمن ۱۴۰۰، ۰۷:۳۹

سلام عالی بود لطفا میشه تم نصب شده روی ویژوال استودیو رو بهم بگین؟ ممنون

نازنین کریمی مقدم ۱۱ بهمن ۱۴۰۰، ۱۰:۵۷

درود اسمش Blue هست.

رضا ۳۰ مهر ۱۴۰۰، ۱۲:۱۵

درود آموزش خوب وعالی بود من یکی از طرف دار سایت شما هستم یک سوال من می‌خوام داخل این سرچ باکسی که درست میکنم مثل موتور جستجو گوگل به سایت‌های داخل اینترنت هدایت شود چه کد هایی باید اضافه کرد تا این اتفاق بیفتد سپاس

نازنین کریمی مقدم ۰۱ آبان ۱۴۰۰، ۱۰:۴۶

درود میتونید <a href="https://stackoverflow.com/questions/13822927/how-can-i-add-a-google-search-box-to-my-website" target="_blank" rel="noopener nofollow ugc">این صفحه</a> رو مطالعه کنید. ممنون که با ما همراه هستید.

محمدرضا ۰۱ خرداد ۱۴۰۰، ۲۲:۴۴

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

نازنین کریمی مقدم ۰۲ خرداد ۱۴۰۰، ۲۰:۵۱

درود شما میتونید از همین آموزش هم استفاده کنید، منتها باید مشخص کنید که بین داده جدول سرچ بزنه و در خروجی کل ردیف رو برگردونه. یک راه بهتر استفاده از جی کوئری هست. پیشنهاد میکنم <a href="https://www.w3schools.com/bootstrap/bootstrap_filters.asp" target="_blank" rel="noopener nofollow ugc">این نمونه کد w3schools</a> رو ببینید.

محمدحسین ۱۹ اردیبهشت ۱۴۰۰، ۰۷:۲۹

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

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: :?: :?:

رضا قاسم نژادیان ۲۹ خرداد ۱۳۹۴، ۰۶:۳۰

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

میوند ۲۹ خرداد ۱۳۹۴، ۰۸:۰۰

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

آرمین ۲۹ خرداد ۱۳۹۴، ۰۶:۰۵

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

میوند ۲۹ خرداد ۱۳۹۴، ۰۷:۵۹

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

  • آموزش ساخت سرچ باکس در HTML
  • سرچ باکس چیست و چطور کار می‌کند؟
  • یک سرچ باکس خوب چه ویژگی‌هایی دارد؟
  • جمع بندی
اشتراک گذاری مقاله در :