آموزش و يادگيري تگ datalist در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <datalist> آشنا مي‌شويم. اين تگ براي ايجاد فهرست پيش‌فرض (autocomplete) براي فيلدهاي ورودي (<input>) استفاده مي‌شود و تجربه کاربري فرم‌ها را بسيار بهبود مي‌بخشد.

تگ datalist در HTML چيست؟

تگ <datalist> مجموعه‌اي از گزينه‌ها را تعريف مي‌کند که مي‌توانند به يک فيلد <input> متصل شوند. کاربر هنگام وارد کردن متن در فيلد، مي‌تواند از ميان گزينه‌هاي پيشنهادي انتخاب کند. اين ويژگي مشابه Autocomplete است.

ساختار کلي تگ datalist

<input list="colors" name="favoriteColor" placeholder="رنگ مورد علاقه">

<datalist id="colors">
  <option value="قرمز">
  <option value="سبز">
  <option value="آبي">
  <option value="زرد">
</datalist>

در اين مثال، وقتي کاربر در فيلد وارد مي‌کند، مرورگر پيشنهادات موجود در تگ <datalist> را نشان مي‌دهد.

ويژگي‌هاي مهم تگ datalist

استفاده از datalist در فرم‌ها

<form>
  <label for="browser">مرورگر مورد علاقه:</label>
  <input list="browsers" id="browser" name="browser">

  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Edge">
    <option value="Safari">
  </datalist>
</form>

کاربر هنگام تايپ، مرورگر پيشنهادات موجود در <datalist> را نمايش مي‌دهد و انتخاب آن‌ها ساده‌تر است.

مزاياي استفاده از datalist

• بهبود تجربه کاربري فرم‌ها و کاهش خطاهاي تايپي.
• قابليت استفاده در فرم‌هاي جستجو و فيلدهاي انتخابي بدون نياز به جاوااسکريپت.
• امکان اضافه کردن گزينه‌هاي جديد توسط کاربر، در صورتي که گزينه موجود نبود.

نکات مهم

• هر فيلد <input> مي‌تواند تنها به يک <datalist> متصل شود.
• گزينه‌ها با تگ <option> تعريف مي‌شوند و صفت value براي مقدار قابل انتخاب استفاده مي‌شود.
• تگ <datalist> نبايد داخل تگ <form> قرار گيرد، بلکه خارج از آن تعريف مي‌شود و با id به input متصل مي‌شود.

استايل‌دهي datalist با CSS

مرورگرها کنترل محدودي روي ظاهر داخلي داتاليست دارند، اما مي‌توانيد فيلد <input> را به راحتي استايل‌دهي کنيد:

<style>
  input[list] {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }
</style>

براي يادگيري کامل فرم‌ها و فيلدهاي پيشرفته HTML، پيشنهاد مي‌کنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML و CSS، به صفحه اصلي آموزش دون مراجعه کنيد.