textarea، select و option

وقتی یه فیلد تک‌خطی کافی نیست

تو درس‌های قبل با انواع input آشنا شدیم که همه‌شون تک‌خطی هستن. اما گاهی نیاز داری کاربر متن چندخطی بنویسه (مثل یه پیام یا توضیحات)، یا از بین چند گزینه‌ی از پیش تعیین‌شده یکی رو انتخاب کنه، بدون اینکه فضای زیادی از صفحه رو با چک‌باکس یا رادیو اشغال کنی. برای این دو نیاز، HTML5 دو ساختار مشخص داره: textarea و select.

تگ textarea: متن چندخطی

<label for="message">پیام شما</label>
<textarea id="message" name="message"></textarea>

تگ textarea برخلاف input، یه تگ باز و بسته‌ست (نه یه تگ خالی)، و برای گرفتن متن‌های طولانی و چندخطی از کاربر استفاده می‌شه؛ مثل بخش نظرات، توضیحات یا پیام‌های تماس با ما.

ویژگی‌های rows و cols

<textarea id="message" name="message" rows="5" cols="40"></textarea>

ویژگی rows تعداد سطرهای قابل‌مشاهده‌ی اولیه رو مشخص می‌کنه، و cols عرض تقریبی جعبه رو بر حسب تعداد کاراکتر تعیین می‌کنه. نکته‌ی مهم اینه که این دو ویژگی فقط اندازه‌ی اولیه رو مشخص می‌کنن؛ کاربر همچنان می‌تونه متن بیشتری از این محدوده تایپ کنه (جعبه خودش اسکرول می‌شه)، و معمولاً امکان تغییر اندازه‌ی دستی جعبه (با کشیدن گوشه‌ی پایین-راستش) هم وجود داره.

متن پیش‌فرض داخل textarea

<textarea id="bio" name="bio">متن اولیه‌ای که از قبل پر شده است.</textarea>

برخلاف input که مقدار پیش‌فرضش رو با ویژگی value می‌نویسیم، مقدار پیش‌فرض textarea باید بین تگ باز و بسته‌اش نوشته بشه، نه به‌صورت یه ویژگی.

تگ select و option: منوی کشویی

<label for="city">شهر</label>
<select id="city" name="city">
  <option value="tehran">تهران</option>
  <option value="mashhad">مشهد</option>
  <option value="isfahan">اصفهان</option>
</select>

تگ select یه منوی کشویی می‌سازه که کاربر می‌تونه یکی از گزینه‌ها رو انتخاب کنه. هر گزینه با تگ option تعریف می‌شه. این ساختار خیلی شبیه به گروه دکمه‌های رادیویی عمل می‌کنه (فقط یه گزینه قابل‌انتخابه)، اما فضای خیلی کمتری از صفحه رو اشغال می‌کنه؛ چون گزینه‌ها فقط با کلیک روی منو باز می‌شن.

ویژگی value روی option

ویژگی value روی هر option، مقداریه که واقعاً به سرور فرستاده می‌شه، در حالی که متن داخل تگ (مثل «تهران») فقط چیزیه که کاربر می‌بینه. این دو می‌تونن متفاوت باشن:

<option value="THR">تهران</option>

تو این مثال، کاربر «تهران» رو می‌بینه، اما سرور مقدار THR رو دریافت می‌کنه؛ این روش وقتی مفیده که بخوای از کدهای کوتاه یا استاندارد (مثل کد شهر) تو دیتابیس استفاده کنی، بدون اینکه کاربر مجبور باشه اون کدها رو ببینه.

مشخص‌کردن گزینه‌ی پیش‌فرض با selected

<select id="city" name="city">
  <option value="tehran" selected>تهران</option>
  <option value="mashhad">مشهد</option>
</select>

ویژگی selected روی یه option، اون گزینه رو به‌عنوان انتخاب پیش‌فرض (وقتی صفحه اول بار لود می‌شه) مشخص می‌کنه. اگه این ویژگی رو روی هیچ option ای نذاری، مرورگر به‌صورت پیش‌فرض اولین گزینه رو انتخاب‌شده در نظر می‌گیره.

گروه‌بندی گزینه‌ها با optgroup

<select name="food">
  <optgroup label="غذاهای ایرانی">
    <option value="kabab">کباب</option>
    <option value="ghorme">قورمه سبزی</option>
  </optgroup>
  <optgroup label="غذاهای فرنگی">
    <option value="pizza">پیتزا</option>
    <option value="pasta">پاستا</option>
  </optgroup>
</select>

وقتی لیست گزینه‌ها طولانی و قابل‌دسته‌بندیه، تگ optgroup اجازه می‌ده گزینه‌ها رو تو زیرگروه‌های جدا با یه عنوان (از طریق ویژگی label) نمایش بدی؛ این کار خوانایی منو رو برای کاربر بیشتر می‌کنه.

انتخاب چندگانه با multiple

<select name="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

با اضافه‌کردن ویژگی multiple، کاربر می‌تونه به‌جای فقط یه گزینه، چند گزینه رو هم‌زمان انتخاب کنه (معمولاً با نگه‌داشتن کلید Ctrl یا Cmd و کلیک روی چند گزینه).

یه فرم کامل با هر دو ساختار

<form action="/feedback" method="post">
  <label for="city">شهر محل سکونت</label>
  <select id="city" name="city">
    <option value="tehran">تهران</option>
    <option value="shiraz">شیراز</option>
  </select>

  <label for="feedback">نظر شما</label>
  <textarea id="feedback" name="feedback" rows="4"></textarea>

  <button type="submit">ارسال نظر</button>
</form>

چه زمانی select بهتره یا radio؟

یه سؤال رایج اینه که کِی از select استفاده کنیم و کِی از گروه دکمه‌های radio. یه قاعده‌ی کلی: اگه تعداد گزینه‌ها کمه (مثلاً ۲ تا ۴ تا) و می‌خوای همه رو هم‌زمان و بدون کلیک اضافه ببینی، radio بهتره. اگه تعداد گزینه‌ها زیاده (مثلاً لیست کامل استان‌های کشور)، select چون فضای کمتری اشغال می‌کنه، گزینه‌ی مناسب‌تریه.

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

• گذاشتن مقدار پیش‌فرض textarea به‌عنوان یه ویژگی (مثل value)، به‌جای نوشتنش بین تگ باز و بسته.
• فراموش‌کردن ویژگی value روی option، که باعث می‌شه به‌جای یه مقدار مشخص، همون متن نمایشی به سرور فرستاده بشه (که همیشه دلخواه نیست).
• استفاده از select برای فقط دو گزینه‌ی ساده (مثل بله/خیر)، در حالی که radio یا حتی checkbox معمولاً مناسب‌تره.

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

• برای متن‌های طولانی و چندخطی، همیشه از textarea استفاده کن، نه input.
• برای لیست‌های طولانی گزینه، از select استفاده کن؛ در صورت نیاز، با optgroup دسته‌بندیشون کن.
• همیشه label رو با for و id مناسب، هم برای textarea و هم برای select رعایت کن، دقیقاً مثل input.

نکته‌ی سئو

textarea و select تأثیر مستقیمی روی سئو ندارند، اما استفاده‌ی درست از این عناصر (مثل فرم‌های نظرسنجی یا تماس با ما که راحت‌تر پر می‌شوند) می‌تواند نرخ تعامل و رضایت کاربر را افزایش دهد.

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

مثل input، تگ‌های textarea و select هم باید حتماً با label مرتبط باشند تا کاربران صفحه‌خوان بفهمند این فیلدها برای چه اطلاعاتی هستند؛ برای select، صفحه‌خوان همچنین تعداد گزینه‌های موجود و گزینه‌ی فعلاً انتخاب‌شده را هم اعلام می‌کند.

جمع‌بندی

تگ textarea برای دریافت متن چندخطی از کاربر استفاده می‌شود و مقدار پیش‌فرضش بین تگ باز و بسته نوشته می‌شود. تگ select همراه با option ساختار یک منوی کشویی را می‌سازد، با امکاناتی مثل انتخاب پیش‌فرض (selected)، گروه‌بندی (optgroup) و انتخاب چندگانه (multiple).