عنصر datalist و output

datalist و output: دو تگ کم‌شناخته اما به‌دردبخور

این فصل رو با دو تگ کمتردیده‌شده ولی کاربردی به پایان می‌رسونیم. تگ datalist یه پیشنهاد خودکار (Autocomplete) به فیلدهای متنی اضافه می‌کنه، و تگ output برای نمایش نتیجه‌ی یه محاسبه یا عملیات استفاده می‌شه. بیا هر دو رو کامل بررسی کنیم.

datalist چیه؟

<label for="browser">مرورگر موردعلاقه‌ات</label>
<input type="text" id="browser" name="browser" list="browser-options">

<datalist id="browser-options">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

تگ datalist یه لیست از پیشنهادات از پیش تعریف‌شده می‌سازه که به یه input متنی وصل می‌شه. برخلاف select که کاربر فقط می‌تونه از بین گزینه‌های موجود انتخاب کنه، datalist انعطاف بیشتری داره: کاربر می‌تونه یکی از پیشنهادها رو انتخاب کنه، یا اگه دوست داشت، یه مقدار کاملاً دلخواه و متفاوت هم تایپ کنه.

چطور input به datalist وصل می‌شه؟

این اتصال دقیقاً مثل چیزی که تو label دیدیم (درس ۷-۳) کار می‌کنه: ویژگی list روی input باید با ویژگی id روی datalist مطابقت داشته باشه:

<input type="text" list="browser-options">
<datalist id="browser-options">
  <!-- گزینه‌ها -->
</datalist>

چه اتفاقی موقع تایپ‌کردن میفته؟

وقتی کاربر شروع به تایپ تو این فیلد می‌کنه، مرورگر به‌صورت خودکار یه لیست کشویی از گزینه‌های datalist که با متن واردشده مطابقت دارن رو پیشنهاد می‌ده؛ دقیقاً شبیه قابلیت autocomplete که تو نوار جستجوی گوگل یا خیلی از اپلیکیشن‌ها دیدی.

تفاوت اصلی datalist با select

ویژگی	select	datalist
محدودیت انتخاب	فقط گزینه‌های موجود	گزینه‌های پیشنهادی + امکان تایپ آزاد
نوع ورودی مرتبط	خودش یه ورودی مستقله	باید به یه input متنی وصل بشه
مناسب برای	وقتی فقط گزینه‌های از پیش تعیین‌شده مجازن	وقتی می‌خوای پیشنهاد بدی، اما جواب دلخواه هم قبول کنی

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

<label for="city">شهر</label>
<input type="text" id="city" name="city" list="city-suggestions">

<datalist id="city-suggestions">
  <option value="تهران">
  <option value="مشهد">
  <option value="اصفهان">
  <option value="شیراز">
</datalist>

تو این مثال، اگه شهر کاربر تو لیست پیشنهادی باشه، سریع‌تر می‌تونه انتخابش کنه؛ اما اگه شهرش تو لیست نبود (مثلاً یه شهر کوچیک‌تر)، همچنان می‌تونه اسمش رو دستی تایپ کنه، بدون اینکه فرم جلوش رو بگیره.

تگ output چیه؟

<output name="result">۰</output>

تگ output برای نمایش نتیجه‌ی یه محاسبه یا عملیاتی استفاده می‌شه که معمولاً بر اساس ورودی‌های دیگه‌ی فرم به‌دست میاد؛ مثلاً نتیجه‌ی جمع دو عدد، یا نتیجه‌ی یه محاسبه‌ی ساده که با جاوااسکریپت آپدیت می‌شه.

یه مثال کامل: ماشین‌حساب ساده با output

<form oninput="result.value = parseInt(num1.value || 0) + parseInt(num2.value || 0)">
  <input type="number" id="num1" name="num1" value="0">
  +
  <input type="number" id="num2" name="num2" value="0">
  =
  <output name="result" for="num1 num2">۰</output>
</form>

بیا این مثال رو بررسی کنیم: هر بار که کاربر مقدار یکی از دو فیلد عددی رو تغییر بده، رویداد oninput روی form اجرا می‌شه و مقدار output رو با جمع دو عدد آپدیت می‌کنه. ویژگی for روی output (شبیه به for روی label) مشخص می‌کنه این خروجی، نتیجه‌ی کدوم ورودی‌هاست؛ تو این مثال، نتیجه‌ی num1 و num2.

چرا از output به‌جای یه span یا div ساده استفاده کنیم؟

می‌شه با یه span یا div معمولی هم همین نتیجه رو نشون داد، اما تگ output یه معنای ساختاری اضافه داره: به مرورگر و صفحه‌خوان می‌گه «این متن، نتیجه‌ی محاسبه یا پردازش یه سری ورودی دیگه‌ست»، نه یه متن ثابت و معمولی. این تگ همچنین وقتی داخل یه form باشه، مثل بقیه‌ی ورودی‌ها (اگه name داشته باشه) همراه با فرم ارسال هم می‌شه.

یه مثال ساده‌تر بدون جاوااسکریپت پیچیده

<label for="quantity">تعداد</label>
<input type="range" id="quantity" name="quantity" min="1" max="10" 
       oninput="total.value = quantity.value">
<output name="total" for="quantity">۱</output>

تو این مثال، وقتی کاربر اسلایدر رو حرکت می‌ده، مقدار انتخاب‌شده بلافاصله تو output نمایش داده می‌شه؛ یه نمونه‌ی ساده‌ی رابطه‌ی مستقیم بین یه ورودی و نمایش زنده‌ی نتیجه‌ش.

چند اشتباه رایج

• عدم تطابق مقدار list روی input با id روی datalist، که باعث می‌شه پیشنهادها اصلاً نمایش داده نشن.
• تصور اینکه datalist محدودیت select رو داره؛ در حالی که datalist اجازه‌ی ورود مقدار دلخواه رو هم می‌ده.
• استفاده از یه span معمولی به‌جای output برای نمایش نتیجه‌ی محاسبات، که معنای ساختاری مناسب رو از دست می‌ده.

بهترین روش‌ها

• از datalist وقتی استفاده کن که می‌خوای به کاربر گزینه‌های پرتکرار رو پیشنهاد بدی، اما اجازه‌ی وارد کردن مقدار دلخواه رو هم حفظ کنی.
• از output برای نمایش هر نتیجه‌ای که از پردازش سایر ورودی‌های فرم به‌دست میاد استفاده کن.
• همیشه مقدار list و id (برای datalist)، و همچنین for و id (برای output) رو دقیق و مطابق هم بنویس.

نکته‌ی سئو

datalist و output تأثیر مستقیمی روی سئو ندارند، چون این تگ‌ها مربوط به تعامل و تجربه‌ی کاربری داخل فرم‌ها هستند، نه محتوای اصلی قابل‌ایندکس صفحه.

نکته‌ی دسترسی‌پذیری

datalist به کاربرانی که با صفحه‌کلید کار می‌کنند کمک می‌کند سریع‌تر و با خطای کمتر، گزینه‌های پرتکرار را انتخاب کنند؛ output هم با معنای ساختاری‌اش، به صفحه‌خوان اجازه می‌دهد تغییرات نتیجه‌ی محاسبات را به‌شکل مناسب‌تری برای کاربر اعلام کند.

جمع‌بندی

تگ datalist با اتصال به یک input متنی (از طریق ویژگی‌های list و id)، لیستی از پیشنهادات قابل‌تایپ و در عین حال قابل‌تغییر ارائه می‌دهد. تگ output برای نمایش نتیجه‌ی محاسبات یا پردازش سایر ورودی‌های فرم استفاده می‌شود و می‌تواند از طریق ویژگی for به ورودی‌های مرتبطش وصل شود.