آموزش ساخت سرچ باکس در HTML : یکی از مهمترین بخشهای هر سایت، فرم جستجوی آن است. زیرا به کمک سرچ باکس، کاربران راحتتر به مطالب سایت دسترسی پیدا میکنند و تعامل بیشتری با سایت خواهند داشت. امروزه کمتر سایتی را میتوان پیدا کرد که این امکان را برای کاربران خود پیاده نکرده باشد. در این مطلب قصد داریم به آموزش ویدئویی ساخت سرچ باکس در HTML بپردازیم، پس با ما همراه باشید.
آموزش ساخت سرچ باکس در HTML
در ویدئوی آموزشی بالا شما با نحوه طراحی و ساخت یک فرم جستجوی زیبا با استفاده از CSS و Jquery آشنا خواهید شد. در این پروژه شما میتوانید با مباحث مختلفی آشنا شوید که از جمله آنها میتوان به موارد زیر اشاره کرد :
منظور از سرچ باکس، بخش جستجو وب سایت است که با توجه به اهداف هر سایت طراحی میشود. مثلا یک بلاگ ساده یا سایت شخصی به جستجوی پیشرفته نیاز نخواهد داشت، زیرا با یک سرچ باکس ساده کارشان انجام خواهد شد. در مقابل فروشگاههای اینترنتی به خاطر دستهبندی متنوع خود، یک سرچ باکس حرفهای نیاز خواهند داشت. همچنین سایتهای آگهی به تفکیک بیشتر و شخصی سازی جستجو نیاز دارند و باید سرچ باکس خود را متنوع طراحی کنند. مثلا یک سایت آگهی حرفهای بهتر است در بخش جستجو خودرو، فیلترهایی برای انتخاب مدل، رنگ، کیلومتر، نوع گیربکس، آپشنها و غیره طراحی کند.
در حالت کلی و بسیار ساده منظور سرچ باکس یک فرم HTML است که با CSS ظاهر زیبایی به آن داده شده است. همچنین میتوان با جاوا اسکریپت یا کتابخانههایی مثل جی کوئری ظاهر سرچ باکس را زیباتر و پویاتر هم کرد. پس از طراحی فرم، کاربر داخل آن عبارتی را تایپ میکند و دکمه (Button) مربوط به ارسال را میزند. در این قسمت با یک Method مثل Get یا Post محتویات آن عبارت برای سرور ارسال میشود. حالا نوبت زبان برنامه نویسی سمت سرور است که کنترل این بخش را به عهده بگیرد. بعد از پردازش به وسیله زبان سمت سرور نتایج جستجو در قالب یک فایل Json برمیگردد و به کاربر نشان داده میشود.
در مرحله اول سرچ باکس باید در موقعیت خوبی قرار داشته باشد. یعنی قابل دسترس بوده و کاربران به راحتی بتوانند آن را پیدا کنند. نباید کاربران خود را برای پیدا کردن بخش جستجو به زحمت بیندازیم. پس مطمئن شوید که سرچ باکس سایت شما به راحتی توسط کاربر دیده میشود. نکته بعدی در طراحی یک سرچ باکس ایدهآل، مربوط به ظاهر آن است. باید تا جایی که میتوانید بخش جستجو را زیبا طراحی کنید. زیبایی بصری حس خوبی در کاربران ایجاد میکند.
اگر سرچ باکس شما زیبا باشد اما با نیازهای کاربر و سایت هماهنگ نباشد، ممکن است تجربه کاربری (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: :?:
میوند۲۹ خرداد ۱۳۹۴، ۱۱:۲۶
سلام
ممنون لطف دارید
موفق و سربلند باشید
افشین زندی۲۹ خرداد ۱۳۹۴، ۰۷:۴۸
سلام داداش.
آموزش خیلی خوبی بود. امیدوارم موفق باشی
ممنون