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

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

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

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

مقاله طراحی سایت را مطالعه بفرمایید.

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

<form method="get" id="searchform" action="https://nemayman.com">
    <input id="searchsubmit" value="" type="submit" />
    <input value="" name="s" id="s" type="text" placeholder="جستجو کنید" />
</form>

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

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

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

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

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

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

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