کد فرم جستجو سایت Html

برای داشتن یک Search Form نیاز به اضافه کردن کدهای زیر به صفحه مورد نظر خود هستید. اینکه بخواهید جستجو خود را حرفه ای کنید و در فیلد های خاصی جستجو کند ، امکان پذیر می باشد . فقط کافیست فیلدهای خود را به فرم اضافه نموده و در صفحه سرچ خود اقدام به تغییرات کوئری نمایید. در صورتی که با کد زنی آشنایی زیادی نداشته باشید ، تغییرات در Query کمی برای شما سخت خواهد بود.

به قسمت فرم سرچ در وبسایت بپردازیم.

تشریح کد فرم جستجو

1. تگ form
   • این تگ با توجه به نوع متد که مشخص کننده نوع ارسال می باشد ، که به دو صورت GET و POST می باشد ، تعیین کننده نوع ارسال محتوای داخل فرم می باشد.
   • id اسمی می باشد که برای فرم جهت استایل دهی و استفاده در کدهای جاوااسکریپت قرار خواهیم داد.
   • action آدرسی است که میخواهیم محتوای داخل فرم را به صفحه مورد نظر ارسال کنیم ، می باشد.
2. تگ input از نوع submit
   • این تگ با نوع سابمیت یک دکمه ایجاد می کند که برای کدهای html کاملا تعریف شده است و وظیفه تایید کردن فرم و ارسال اطلاعات به آدرس موجود در اکشن فرم را شروع می کند. در واقع یک نوع دکمه Start می باشد.
   • value در این تگ کپشن یا نام نمایشی دکمه می باشد.
3. تگ input از نوع text
   • این تگ یک باکس جهت ورود مقدار اطلاعات مورد نیاز جهت جستجو را دریافت می کند .
   • id , name این تگ s میباشد تا فرم بتواند تشخیص دهد که کدام محتوای باکس را باید جستجو کند.
   • placeholder متن پیشفرضی است که نمایش داده خواهد شد تا کاربر را راهنمایی کند.

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

هر سایت با هر زبان برنامه نویسی که بخواهد ساخته شود ، می دانید که پایه زبان همه آنها html است.

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

در صورتی که از وردپرس استفاده می کنید نیاز به انجام کاری نیست ، در خود وردپرس تعریف شده است که با ارسال کلمه s با get سایت به صفحه سرچ هدایت شده و نتایج را بر اساس ورودی های کاربران شما قابل نمایش است.

در نظر داشته باشید که شما می توانید به کدهای قرار داده شده در این قسمت کدهای جاوا اسکریپت اضافه نمایید تا برای حرفه ای تر شدن تغییراتی را ایجاد نمایید. از جمله این کدها می توان به باز شدن فرم جتسجو بعد از کلیک کردن بروی دکمه جستجو یا اینکه یافتن و معرفی کردن محصولات مرتبط با کلمات وارد شده در باکس سرچ .