ساخت تعدادی گزینه از پیش تعریف شده برای تگ ورودی input در فرم (Form) (با حفظ امکان نوشتن ورودی دلخواه)، با تگ datalist ، در HTML

همان طور که می دانید، تگ input در HTML ، برای دریافت ورودی از کاربر، در فرم ها (Form) به کار می رود. گاهی اوقات نیاز داریم علاوه بر اینکه کاربر بتواند همانند حالت عادی، متن دلخواه خود را به عنوان ورودی در تگ input وارد کند، همچنین این امکان وجود داشته باشد که از تعدادی گزینه (ورودی) از پیش تعریف شده، یکی را انتخاب نماید.

برای این منظور، می توانیم از تگ datalist در HTML ، استفاده نماییم. به عنوان مثال :

در کد بالا، در تگ input مورد نظرمان، با مشخصه list ، نام id مربوط به تگ datalist را مشخص کرده ایم (تا اطلاعات آن خوانده شود) :

سپس در تگ datalist ، که id آن برابر city می باشد، گزینه های (ورودی های) مورد نظرمان را با تگ های option به صورت زیر تعریف نموده ایم :

همین کد را در یک مثال کامل به کار می بریم :

مثال

کد کامل صفحه HTML :

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
نویسنده علیرضا گلمکانی
شماره کلید 26360
گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 1 1 0
a409
۱۳۹۸/۱۲/۲۴
۱۹:۱۳

سلام و درود به شما این کدی که شما نوشتید مشکل کاملا اساسی داره
وقتی که روی اون پیکان سمت راست کلیک میکنیم منو باز میشه ولی وقتی صفحه رو بالا و پایتخت میکنی ردی صفحه میمونه

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)