قسمت ۱۵ – select، textarea، button و fieldset در HTML

تگ select در HTML یک فهرست کشویی (Drop-down) می‌سازد که کاربر از میان گزینه‌های از پیش تعیین‌شده یک یا چند مورد را انتخاب می‌کند؛ هر گزینه با تگ <option> تعریف می‌شود. در کنار آن، <textarea> برای متن چندخطی، <button> برای ارسال و اجرای عمل و <fieldset> برای گروه‌بندی فیلدها به کار می‌روند.

در این قسمت از دوره رایگان کدپرس، این چهار عنصر به‌همراه <optgroup>، <legend> و <datalist> را با مثال‌های فارسی و راست‌چین یاد می‌گیرید و در پایان یک فرم ثبت‌نام کامل می‌سازید.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

اگر قسمت‌های قبل را نخوانده‌اید، اول قسمت ۱۳؛ فرم در HTML و تگ‌های form و label و سپس قسمت ۱۴؛ انواع input در HTML را مرور کنید؛ چون همه مثال‌های این قسمت داخل یک <form> و با <label> نوشته شده‌اند.

تگ select در html چیست و چطور کار می‌کند؟

تگ select در HTML یک کنترل فرم است که فهرستی از گزینه‌های ثابت را نمایش می‌دهد و مقدار گزینه انتخاب‌شده را با نام name به سرور می‌فرستد. هر گزینه یک <option> است که اتریبیوت value مقدار ارسالی و متن داخل آن، برچسب نمایشی را مشخص می‌کند.

اگر value را ننویسید، مرورگر متن داخل <option> را به‌عنوان مقدار ارسال می‌کند. اما در عمل بهتر است همیشه value کوتاه و لاتین بنویسید (مثلاً tehran) و متن فارسی را فقط برای نمایش نگه دارید؛ این کار پردازش داده در سمت سرور را ساده‌تر می‌کند.

<label for="city">شهر محل سکونت</label>
<select id="city" name="city" required>
  <option value="">یک شهر انتخاب کنید</option>
  <option value="tehran">تهران</option>
  <option value="isfahan">اصفهان</option>
  <option value="shiraz" selected>شیراز</option>
  <option value="tabriz">تبریز</option>
</select>

در این مثال چند نکته مهم وجود دارد:

• گزینه راهنما (placeholder): اولین <option> با value="" نقش متن راهنما را دارد. وقتی required روی select باشد، کاربر نمی‌تواند با همین گزینه خالی فرم را ارسال کند.
• اتریبیوت selected: گزینه‌ای که selected دارد به‌صورت پیش‌فرض انتخاب می‌شود. اگر هیچ گزینه‌ای selected نداشته باشد، اولین گزینه انتخاب می‌شود.
• اتصال label: مقدار for در label باید با id در select یکی باشد تا صفحه‌خوان‌ها نام فیلد را بخوانند و کلیک روی برچسب، فهرست را فعال کند.

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

تگ <optgroup> گزینه‌های مرتبط را زیر یک عنوان گروه می‌کند و عنوان آن با اتریبیوت label نوشته می‌شود. خود عنوان گروه قابل انتخاب نیست. با disabled می‌توانید یک گزینه یا کل گروه را غیرفعال کنید.

<label for="course">دوره مورد علاقه</label>
<select id="course" name="course">
  <optgroup label="فرانت‌اند">
    <option value="html">آموزش HTML</option>
    <option value="css">آموزش CSS</option>
  </optgroup>
  <optgroup label="بک‌اند">
    <option value="php">آموزش PHP</option>
    <option value="wp" disabled>توسعه وردپرس (به‌زودی)</option>
  </optgroup>
</select>

مرورگرهای امروزی اجازه می‌دهند با تگ <hr> بین گزینه‌ها خط جداکننده بگذارید؛ این خط فقط جنبه تزئینی دارد و صفحه‌خوان آن را اعلام نمی‌کند.

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

اتریبیوت multiple اجازه انتخاب چند گزینه را می‌دهد و ظاهر select را از فهرست کشویی به یک جعبه فهرست (List box) تغییر می‌دهد. اتریبیوت size تعداد ردیف‌های قابل مشاهده را تعیین می‌کند؛ طبق مستندات MDN درباره select، وقتی multiple فعال باشد مقدار پیش‌فرض size برابر ۴ است.

<label for="skills">مهارت‌ها (با Ctrl یا Cmd چند گزینه را انتخاب کنید)</label>
<select id="skills" name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="php">PHP</option>
</select>

نکته: انتخاب چندگانه با کیبورد (Ctrl یا Cmd و Shift) برای بسیاری از کاربران آشنا نیست و روی موبایل هم تجربه متفاوتی دارد. همیشه در متن برچسب بگویید که چند انتخاب مجاز است، یا برای تعداد کم گزینه‌ها از چند checkbox استفاده کنید.

تگ textarea چیست و چه تفاوتی با input دارد؟

تگ textarea یک فیلد متنی چندخطی است که برای پیام، توضیحات و نظر کاربر استفاده می‌شود؛ برخلاف <input type="text"> که فقط یک خط می‌گیرد و خط جدید را قبول نمی‌کند. textarea تگ بسته دارد و مقدار اولیه آن بین تگ باز و بسته نوشته می‌شود، نه در اتریبیوت value.

<label for="message">متن پیام</label>
<textarea id="message" name="message" rows="5"
  maxlength="500" placeholder="پیام خود را بنویسید…"
  required></textarea>

اتریبیوت‌های پرکاربرد textarea عبارت‌اند از:

• rows و cols: ارتفاع و عرض اولیه بر حسب تعداد خط و کاراکتر؛ برای اندازه دقیق بعداً از CSS استفاده می‌کنیم.
• maxlength و minlength: حداکثر و حداقل تعداد کاراکتر.
• placeholder: متن راهنمای کم‌رنگ؛ جایگزین label نیست.
• wrap: با مقدار hard شکست خطوط هنگام ارسال حفظ می‌شود (نیازمند cols)؛ پیش‌فرض soft است.
• dir="auto": اگر کاربران گاهی فارسی و گاهی انگلیسی می‌نویسند، جهت متن بر اساس اولین حرف قوی تعیین می‌شود.

یک اشتباه رایج این است که بین <textarea> و </textarea> فاصله یا خط جدید بگذارید؛ آن فاصله‌ها جزو مقدار فیلد حساب می‌شوند و placeholder هم نمایش داده نمی‌شود. تگ را در یک خط ببندید.

تگ button در HTML چه انواعی دارد؟

تگ button در HTML یک دکمه قابل کلیک می‌سازد که با اتریبیوت type یکی از سه رفتار submit (ارسال فرم)، reset (بازگرداندن مقادیر اولیه) یا button (بدون رفتار پیش‌فرض) را دارد. مقدار پیش‌فرض داخل فرم submit است؛ بنابراین هر دکمه‌ای که type نداشته باشد، فرم را ارسال می‌کند.

<form action="/contact" method="post">
  <!-- دکمه ارسال: type پیش‌فرض داخل فرم submit است -->
  <button type="submit">ارسال پیام</button>

  <!-- دکمه پاک کردن همه فیلدها -->
  <button type="reset">پاک کردن فرم</button>

  <!-- دکمه معمولی برای جاوااسکریپت؛ فرم را ارسال نمی‌کند -->
  <button type="button" id="preview">پیش‌نمایش</button>
</form>

button بهتر است یا input type=”submit”؟

هر دو فرم را ارسال می‌کنند، اما <button> محتوای HTML می‌پذیرد (مثلاً آیکن SVG یا <span>) و استایل‌دهی آن ساده‌تر است. <input type="submit"> فقط متن ساده در value نشان می‌دهد. در پروژه‌های جدید تیم siloow تقریباً همیشه از <button> استفاده می‌کنیم.

دکمه‌ها اتریبیوت‌های ویژه‌ای هم دارند که رفتار فرم را برای همان دکمه تغییر می‌دهند: formaction، formmethod و formnovalidate. مثلاً دکمه «ذخیره پیش‌نویس» می‌تواند با formnovalidate بدون اعتبارسنجی فرم را بفرستد؛ موضوع اعتبارسنجی را در قسمت بعد کامل بررسی می‌کنیم.

datalist چیست و چه فرقی با select دارد؟

تگ datalist فهرستی از پیشنهادها برای یک <input> فراهم می‌کند؛ کاربر می‌تواند یکی از پیشنهادها را انتخاب کند یا مقدار دلخواه خودش را بنویسد. اتصال با اتریبیوت list روی input و id روی datalist انجام می‌شود.

<label for="browser">مرورگر شما</label>
<input id="browser" name="browser" list="browsers">
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
  <option value="Edge"></option>
</datalist>

ویژگی	select	input + datalist
ورود مقدار دلخواه	ممکن نیست	ممکن است
تضمین مقدار معتبر	بله، فقط گزینه‌های موجود	خیر، باید جداگانه اعتبارسنجی شود
انتخاب چندگانه	با multiple	پشتیبانی نمی‌شود (جز ورودی ایمیل با multiple)
ظاهر	فهرست کشویی ثابت	پیشنهاد هنگام تایپ؛ ظاهر بسته به مرورگر
کاربرد مناسب	استان، جنسیت، روش ارسال	نام شهر، برند، جستجوی سریع

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

fieldset و legend چه کاربردی دارند؟

تگ fieldset فیلدهای مرتبط یک فرم را در یک گروه معنایی قرار می‌دهد و تگ legend عنوان همان گروه است. صفحه‌خوان‌ها هنگام ورود به گروه، متن legend را اعلام می‌کنند؛ برای همین گروه‌بندی دکمه‌های radio و checkbox با fieldset برای دسترس‌پذیری ضروری است.

<fieldset>
  <legend>روش ارسال سفارش</legend>
  <label><input type="radio" name="ship" value="post" checked> پست پیشتاز</label>
  <label><input type="radio" name="ship" value="courier"> پیک موتوری</label>
  <label><input type="radio" name="ship" value="pickup"> تحویل حضوری</label>
</fieldset>

<fieldset disabled>
  <legend>اطلاعات فاکتور رسمی (فعلاً غیرفعال)</legend>
  <label for="eco">کد اقتصادی</label>
  <input id="eco" name="eco">
</fieldset>

اتریبیوت disabled روی fieldset همه کنترل‌های داخل آن را یکجا غیرفعال می‌کند؛ کنترل غیرفعال نه قابل ویرایش است و نه همراه فرم ارسال می‌شود. <legend> باید اولین فرزند <fieldset> باشد.

در صفحه راست‌چین (dir="rtl") مرورگر خود legend را در سمت راست کادر قرار می‌دهد و ترتیب radioها از راست به چپ است؛ نیازی به هیچ کد اضافه نیست.

مرجع سریع تگ‌های select، textarea، button و fieldset

جدول زیر مهم‌ترین تگ‌ها و اتریبیوت‌های این قسمت را خلاصه می‌کند تا هنگام کدنویسی سریع به آن مراجعه کنید.

تگ / اتریبیوت	کاربرد	مثال
<select>	فهرست کشویی یا جعبه فهرست	<select name="city">
<option>	یک گزینه؛ value مقدار ارسالی	<option value="fars">فارس</option>
<optgroup>	گروه‌بندی گزینه‌ها با label	<optgroup label="بک‌اند">
selected / multiple / size	گزینه پیش‌فرض، انتخاب چندگانه، تعداد ردیف	<select multiple size="4">
<textarea>	متن چندخطی	<textarea rows="5"></textarea>
<button type>	submit، reset یا button	<button type="button">
formnovalidate	ارسال بدون اعتبارسنجی برای همان دکمه	<button formnovalidate>
<datalist>	پیشنهاد برای input با list	<input list="browsers">
<fieldset> / <legend>	گروه فیلدها و عنوان گروه	<fieldset disabled>

مثال کامل: فرم ثبت‌نام دوره با تگ select در html

فرم ثبت‌نام زیر همه عناصر این قسمت را در یک صفحه راست‌چین کامل کنار هم قرار می‌دهد: select برای استان، fieldset برای گروه‌بندی، radio برای سطح، textarea برای هدف و button برای ارسال.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>فرم ثبت‌نام دوره</title>
</head>
<body>
  <h1>ثبت‌نام در دوره آموزش HTML</h1>
  <form action="/register" method="post">
    <fieldset>
      <legend>اطلاعات شخصی</legend>
      <label for="fullname">نام و نام خانوادگی</label>
      <input id="fullname" name="fullname" required>

      <label for="province">استان</label>
      <select id="province" name="province" required>
        <option value="">انتخاب کنید</option>
        <option value="tehran">تهران</option>
        <option value="khorasan">خراسان رضوی</option>
        <option value="fars">فارس</option>
      </select>
    </fieldset>

    <fieldset>
      <legend>سطح آشنایی شما</legend>
      <label><input type="radio" name="level" value="zero" checked> از صفر</label>
      <label><input type="radio" name="level" value="basic"> آشنایی مقدماتی</label>
    </fieldset>

    <label for="goal">هدف شما از یادگیری</label>
    <textarea id="goal" name="goal" rows="4" maxlength="300"></textarea>

    <button type="submit">ثبت‌نام</button>
  </form>
</body>
</html>

این فرم هنوز هیچ استایلی ندارد و ظاهرش پیش‌فرض مرورگر است. از قسمت ۲۳ به بعد با CSS آن را زیبا و ریسپانسیو می‌کنیم.

از تجربه تیم siloow

در وب اپلیکیشن ثبت سفارش چندشعبه‌ای که تیم siloow برای کافه‌ها و قنادی‌ها ساخته، کاربر ابتدا شعبه را انتخاب می‌کند. نسخه اول این انتخاب با یک select ساده بود و در موبایل به‌خوبی کار می‌کرد، چون مرورگرهای موبایل برای select رابط انتخاب بومی خودشان را نشان می‌دهند. درس ما این بود که قبل از ساختن یک دراپ‌داون سفارشی با جاوااسکریپت، select بومی را امتحان کنید؛ دسترس‌پذیری کیبورد و صفحه‌خوان را رایگان می‌گیرید و فقط وقتی واقعاً نیاز به نمایش تصویر یا جستجو در گزینه‌ها دارید، سراغ کامپوننت سفارشی بروید.

محدودیت‌ها؛ چه زمانی select مناسب نیست؟

تگ select برای فهرست‌های خیلی کوتاه یا خیلی بلند انتخاب ایده‌آلی نیست. اگر فقط ۲ یا ۳ گزینه دارید، دکمه‌های radio همه گزینه‌ها را یکجا نشان می‌دهند و یک کلیک کم‌تر لازم دارند. اگر صدها گزینه دارید (مثلاً فهرست همه شهرهای ایران)، input همراه datalist یا جستجوی خودکار تجربه بهتری می‌سازد.

محدودیت دیگر، استایل‌دهی است: در مرورگرهای قدیمی‌تر، ظاهر فهرست باز select تقریباً قابل تغییر نیست. نسل جدید select قابل سفارشی‌سازی با CSS در حال اضافه شدن به مرورگرهاست، اما تا پشتیبانی همه مرورگرها کامل نشده، آن را فقط به‌عنوان بهبود تدریجی در نظر بگیرید.

اشتباهات رایج

1. نوشتن <button> بدون type برای کارهای جاوااسکریپتی؛ نتیجه، ارسال ناخواسته فرم و رفرش صفحه است.
2. جا انداختن name روی select یا textarea؛ بدون name، مقدار به سرور ارسال نمی‌شود.
3. استفاده از placeholder به‌جای label؛ متن راهنما با شروع تایپ ناپدید می‌شود و صفحه‌خوان‌ها آن را نام فیلد حساب نمی‌کنند.
4. قرار دادن فاصله یا خط جدید بین تگ باز و بسته textarea.
5. گروه کردن radioها بدون fieldset و legend؛ کاربر صفحه‌خوان نمی‌فهمد این گزینه‌ها پاسخ چه سؤالی هستند.
6. استفاده از disabled وقتی فقط می‌خواهید مقدار قابل ویرایش نباشد اما ارسال شود؛ در textarea از readonly استفاده کنید.

تمرین این قسمت

1. یک select برای انتخاب «ماه تولد» با ۱۲ ماه شمسی بسازید و با optgroup ماه‌ها را در چهار فصل گروه‌بندی کنید.
2. یک فرم «ثبت نظر» با textarea بسازید که حداکثر ۴۰۰ کاراکتر بپذیرد و برچسب درست داشته باشد.
3. سه دکمه submit، reset و button در یک فرم بگذارید و رفتار هر کدام را در مرورگر امتحان کنید.
4. یک input با datalist برای «نام شهر» بسازید و تفاوتش را با یک select مشابه بنویسید.
5. فرم ثبت‌نام بالا را با یک fieldset جدید برای «روش پرداخت» با سه گزینه radio کامل کنید.

خلاصه

• تگ select در html فهرست کشویی با گزینه‌های <option> می‌سازد؛ optgroup گروه‌بندی و multiple انتخاب چندگانه را فراهم می‌کند.
• textarea برای متن چندخطی است و مقدار اولیه‌اش بین تگ‌ها نوشته می‌شود.
• button سه نوع submit، reset و button دارد و پیش‌فرض آن داخل فرم submit است.
• datalist پیشنهاد می‌دهد اما ورودی آزاد را محدود نمی‌کند.
• fieldset و legend گروه‌بندی معنایی و دسترس‌پذیر فیلدها را ممکن می‌کنند.

در قسمت بعد، «قسمت ۱۶ – اعتبارسنجی فرم با HTML»، یاد می‌گیرید چطور با required، pattern، min و max بدون یک خط جاوااسکریپت ورودی‌ها را کنترل کنید. فهرست کامل قسمت‌ها همیشه در صفحه دوره رایگان کدپرس در دسترس است. اگر برای پروژه‌تان فرم‌های پیچیده سفارش یا رزرو نیاز دارید، خدمات طراحی سایت siloow را ببینید.

برای اینکه بدانید فرم‌های سبک و بومی چطور به سرعت و تجربه کاربری کل سایت کمک می‌کنند، مقاله بهینه سازی سایت؛ ۲۰ اقدام برای سرعت، سئو و تجربه کاربری را هم بخوانید.

منابع

• MDN: The HTML Select element
• MDN: The Textarea element
• MDN: The Button element
• web.dev Learn HTML: Forms

سوالات متداول درباره تگ select در html