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

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

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

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

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

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