آموزش ساخت سرچ باکس در HTML : یکی از مهم ترین بخش های هر سایت، فرم جستجوی آن است. زیرا به کمک سرچ باکس، کاربران راحت تر به مطالب سایت دسترسی پیدا می کنند و تعامل بیشتری با سایت خواهند داشت. امروزه کمتر سایتی را می توان پیدا کرد که این امکان را برای کاربران خود پیاده نکرده باشد. در این مطلب قصد داریم به آموزش ویدئویی ساخت سرچ باکس در HTML بپردازیم، پس با ما همراه باشید.
آموزش ساخت سرچ باکس در HTML
در ویدئوی آموزشی بالا شما با نحوه طراحی و ساخت یک فرم جستجوی زیبا با استفاده از CSS و Jquery آشنا خواهید شد. در این پروژه شما می توانید با مباحث مختلفی آشنا شوید که از جمله آن ها می توان به موارد زیر اشاره کرد :
- کار با انیمیشن ها
- شناخت متدهای پایه Jquery
- استایل دهی با استفاده از CSS
- و...
[rlink pid=70475]
سرچ باکس چیست و چطور کار می کند؟
منظور از سرچ باکس، بخش جستجو وب سایت است که با توجه به اهداف هر سایت طراحی می شود. مثلا یک بلاگ ساده یا سایت شخصی به جستجوی پیشرفته نیاز نخواهد داشت، زیرا با یک سرچ باکس ساده کارشان انجام خواهد شد. در مقابل فروشگاه های اینترنتی به خاطر دسته بندی متنوع خود، یک سرچ باکس حرفه ای نیاز خواهند داشت. همچنین سایت های آگهی به تفکیک بیشتر و شخصی سازی جستجو نیاز دارند و باید سرچ باکس خود را متنوع طراحی کنند. مثلا یک سایت آگهی حرفه ای بهتر است در بخش جستجو خودرو، فیلترهایی برای انتخاب مدل، رنگ، کیلومتر، نوع گیربکس، آپشن ها و غیره طراحی کند.
در حالت کلی و بسیار ساده منظور سرچ باکس یک فرم HTML است که با CSS ظاهر زیبایی به آن داده شده است. همچنین می توان با جاوا اسکریپت یا کتابخانه هایی مثل جی کوئری ظاهر سرچ باکس را زیباتر و پویاتر هم کرد. پس از طراحی فرم، کاربر داخل آن عبارتی را تایپ می کند و دکمه (Button) مربوط به ارسال را می زند. در این قسمت با یک Method مثل Get یا Post محتویات آن عبارت برای سرور ارسال می شود. حالا نوبت زبان برنامه نویسی سمت سرور است که کنترل این بخش را به عهده بگیرد. بعد از پردازش به وسیله زبان سمت سرور نتایج جستجو در قالب یک فایل Json برمی گردد و به کاربر نشان داده می شود.
[rlink pid=70601]
یک سرچ باکس خوب چه ویژگی هایی دارد؟
در مرحله اول سرچ باکس باید در موقعیت خوبی قرار داشته باشد. یعنی قابل دسترس بوده و کاربران به راحتی بتوانند آن را پیدا کنند. نباید کاربران خود را برای پیدا کردن بخش جستجو به زحمت بیندازیم. پس مطمئن شوید که سرچ باکس سایت شما به راحتی توسط کاربر دیده می شود. نکته بعدی در طراحی یک سرچ باکس ایده آل، مربوط به ظاهر آن است. باید تا جایی که می توانید بخش جستجو را زیبا طراحی کنید. زیبایی بصری حس خوبی در کاربران ایجاد می کند.
اگر سرچ باکس شما زیبا باشد اما با نیازهای کاربر و سایت هماهنگ نباشد، ممکن است تجربه کاربری (UX) خوبی را به کاربران القا نکند. پس با توجه به فعالیت سایت، بخش های مختلفی به جستجو اضافه کنید. همچنین یک سرچ باکس خوب باید قابلیت های متنوعی داشته باشد که یکی از آن ها قابلیت پیشنهاد نتایج به کاربر بر اساس عبارت وارد شده است. یعنی کاربر بعد از تایپ کردن چند حرف عبارت های مشابه را ببیند و بتواند بدون کامل کردن جمله خود جستجو را انجام دهد. پس به عنوان جمع بندی، برای طراحی یک سرچ باکس خوب بهتر است موارد زیر رعایت شوند:
- ظاهر جذابی داشته باشد.
- در جایگاه خوبی قرار گرفته باشد.
- با توجه به نیاز سایت طراحی شود.
- از قابلیت هایی مثل پیشنهاد خودکار (AUTO-SUGGESTION) استفاده کند.
[rlink pid=1677]
جمع بندی
همانطور که دیدید، آموزش ساخت سرچ باکس در HTML یکی از پروژه های بسیار خوب برای تمرین طراحی سایت است. زیرا در این پروژه شما باید با زبان های HTML و CSS به کار کنید و سپس با استفاده از Jquery به تکمیل این فرم بپردازید. سون لرن در این مسیر همراه شماست، پس اگر در این مسیر هرگونه سوال یا ابهامی برای شما به وجود آمد با ما درمیان بگذارید.
ممنون میوند جان مطلب جالب و کاربردی بود :?:
سلام آرمین جان
لطف داری
امیدوارم مفید واقع شده باشه
موفق باشی :?: :?:
سلام میوند جان
مطلب جالب و خوبی بود :?: :?:
موفق باشی
سلام رضا جان
ممنون داداش
موفق باشی :?: :?:
سلام داداش.
آموزش خیلی خوبی بود. امیدوارم موفق باشی
ممنون
سلام داداش
خوشحال شدم که خوشت اومد
موفق باشی :wink: :?: :?:
بسیار عالی؛ تبریک بابت نویسنده شدن شما. امیدوارم موفق و سعادتمند باشی :smile: :?:
سلام
ممنون لطف دارید
موفق و سربلند باشید
آموزش مفیدی بود
ممنونم
ان شاالله موفق بشی :?: :?:
مرسی
خوشحالم که براتون مفید بود
موفق باشید
ممنون خیلی مفید بود :?:
خواهش میکنم موفق باشید :?:
ببخشید این خطی که نوشتین چیه؟؟::-webkit-input-placeholder
این جز کدهای css است؟من توی آمو.شهای css شبیه این کد ندیدم تا به حال.....ممنون می شم بگین
سلام
خیر جز کدهای استاندارد css نیست و کدی مخصوص مرورگرهای کروم و سافاری هست که موتور رندرینگشون webkit هست .
این کد برای استایل دهی به placeholder فیلد های متنی استفاده میشه گویا !
خیلی خنک بود دوست عزیز :oops: :razz: :?:
سلام آموزش خوبي بود ممنون از سايت خوب و زحمات شما
ممنون دوست عزیز لطف دارید .
موفق باشید!!
خیلی ممنون از زحمات شما استفاده کردم
ممنون از مطلب بسیار عالیتون
من میخوام در فرم جست و جو چندین خط رو بتونم وارد کنم واسه همین بخش طراحی فرم به جای تگ input از تگ textarea استفاده کردم، ولی با ایجاد این تغییر دیگه فرم جست و جو باز و بسته نمیشه.
لطفا کمکم کنید.
تشکر
kheyli khooob bood mrc vagean