آموزش اتریبیوت Input Attr : DataList

آموزش اتریبیوت DataList

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

حالا ببینیم چطور یک دیتالیست HTML5 را تکمیل می کنیم که کاملا ساده است.

  <label for="country_name">Country : </label><input id="country_name" name="country_name" ‎type="text" list="country" />  ‎<datalist id="country">                      <option value="Afghanistan">                      <option value="Albania">                      <option value="Algeria">                      <option value="Andorra">                      <option value="Angola">  </datalist>‎  

خیلی راحت در دیتالیست نام کشور خود را وارد کنید.

نام کشور:

اگر مرورگری ندارید که آن را پشتیبانی کند، در اینجا می توانید ببینید که در فایرفاکس چگونه به نظر می رسد.