آموزش Input Type : Search

آموزش search

اطلاعات وب هر ثانیه در حال رشد است. از آنجایی که گوگل جستجو (search) را در اواخر دهه ی 90 دوباره تعریف کرد، یافتن اطلاعات از طریق مسیرهای سازماندهی شده از بین رفته است. امروزه می توانیم یک سرچ باکس (search box) تقریبا در محتوای همه ی وب سایت های غنی قرار دهیم، این کار حتی در بلاگ شخصی هم محبوب می باشد.
در HTML5 می توانیم یک تکست باکس را به عنوان سرچ باکس معرفی کنیم. در واقع آنچه می توانید برای سرچ باکس خود انجام دهید عبارت است از

                          ‎<input id="mysearch" type="search" />‎  

با انجام چنین کاری امتظار نداشته باشید که مرور گر به طور خودکار آن را با یک موتور جستجو ترکیب کند. این تقریبا مانند یک تکست باکس عادی می باشد<input type="text">، اما مرورگر به طور خودکار کمی آن را دستکاری می کند تا زیباتر شود.
در نگارش فقط apple safari (آزمایش شده با Safari 5) و گوگل کروم (آزمایش شده با کروم 8) این کار را انجام می دهند.

در اینجا یک نمونه ساده را می بینید.

search

همانطور که ممکن است متوجه شده باشید وقتی چیزی در سرچ باکس می نویسید، یک ضربدر آبی در در تکست باکس ظاهر می شود. وقتی روی این ضربدر کلیک کنید، رشته ی ورودی شما پاک شده و می توانید تایپ یک رشته ی جدید را آغاز کنید.
می توانید ویژگی های بیشتری به آن اضافه کنید، مانند placeholder و autofocus.
در اینجا کد مربوط به آن را مشاهده می کنید.

  ‎<label for="mysearch2">Enter your search string here : </label>  ‎<input id="mysearch2" type="search" placeholder="search">‎