فرم - تگ های Button , Label , Textarea

تگ های label، button و textarea در HTML از اجزای اصلی ساخت فرم های کاربردی هستند. با استفاده درست از این تگ ها می توانید ارتباط میان عنوان و فیلد ورودی را روشن کنید، دکمه های قابل کلیک بسازید و امکان وارد کردن متن چندخطی را در اختیار کاربر بگذارید. در این راهنما با کاربرد، ویژگی ها، نمونه کد و نکات دسترس پذیری هر تگ آشنا می شوید.

تگ های label، button و textarea در HTML چه کاربردی دارند؟

فرم های HTML راهی برای دریافت اطلاعات از کاربران هستند؛ از فرم تماس و عضویت گرفته تا جستجو، نظرسنجی و ثبت سفارش. هر فرم معمولا از چند نوع عنصر تشکیل می شود: فیلدهای ورودی، عنوان های توضیحی و دکمه هایی که کاربر با آن ها فرم را ارسال یا کنترل می کند.

تگ <label> نام یا توضیح یک فیلد را مشخص می کند، تگ <button> یک دکمه تعاملی می سازد و تگ <textarea> برای دریافت متن چندخطی به کار می رود. استفاده درست از این عناصر باعث می شود فرم برای کاربران قابل فهم تر باشد و با صفحه خوان ها و روش های مختلف پیمایش سازگاری بهتری داشته باشد.

در کنار یادگیری HTML، توجه به تجربه کاربری و ساختار صفحات نیز اهمیت دارد. اگر قصد دارید برای کسب و کار خود یک وب سایت کاربردی داشته باشید، خدمات طراحی سایت می تواند به ساخت تجربه ای منسجم و مناسب برای مخاطبان کمک کند.

تگ label در HTML

تگ <label> برای تعریف عنوان یا برچسب یک کنترل فرم استفاده می شود. این برچسب به کاربر می گوید هر فیلد چه اطلاعاتی می خواهد؛ برای مثال، فیلد مربوط به نام، ایمیل یا انتخاب جنسیت. متن داخل label فقط یک توضیح ظاهری نیست و در صورت اتصال درست به فیلد، رفتار دسترس پذیرتری هم ایجاد می کند.

یکی از مزیت های اتصال label به ورودی این است که کاربر می تواند برای فعال کردن کنترل، روی متن برچسب نیز کلیک کند. این موضوع به ویژه برای گزینه های رادیویی و چک باکس ها مفید است؛ زیرا محدوده قابل کلیک را بزرگ تر می کند و استفاده از فرم را در دستگاه های لمسی آسان تر می سازد.

روش اتصال label به یک فیلد

برای اتصال صریح، مقدار ویژگی for در label باید با مقدار ویژگی id عنصر ورودی یکسان باشد. در نمونه زیر، کلیک روی عنوان هر گزینه، همان گزینه را انتخاب می کند:

<form action="demo_form.asp" method="get">
  <input type="radio" name="sex" id="male" value="male">
  <label for="male">Male</label>

  <input type="radio" name="sex" id="female" value="female">
  <label for="female">Female</label>

  <button type="submit">Submit</button>
</form>

در این مثال، مقدار for="male" با id="male" هماهنگ است و مقدارهای مربوط به گزینه دوم نیز با هم تطابق دارند. ویژگی name در گزینه های رادیویی یکسان است تا مرورگر آن ها را عضو یک گروه بداند و کاربر فقط یکی از گزینه ها را انتخاب کند. مقدار value نیز داده ای است که هنگام ارسال فرم به سرور فرستاده می شود.

روش دیگر این است که کنترل را درون تگ label قرار دهید. در این حالت، ارتباط میان متن و کنترل از ساختار HTML مشخص می شود و نیازی به ویژگی for نیست. با این حال، بهتر است در یک فرم از یک الگوی روشن و منظم استفاده کنید و ساختار هر فیلد را به شکلی بنویسید که نگهداری آن آسان باشد.

نکات مهم هنگام استفاده از label

• برای هر ورودی که به توضیح نیاز دارد، یک برچسب واضح و کوتاه در نظر بگیرید.
• در روش اتصال صریح، مقدار for را دقیقا با id فیلد یکسان بنویسید.
• برای چند فیلد از شناسه های تکراری استفاده نکنید؛ هر مقدار id باید در صفحه یکتا باشد.
• از قرار دادن چند کنترل نامرتبط در یک label خودداری کنید تا ارتباط برچسب با فیلد مبهم نشود.
• متن راهنما را جایگزین label نکنید؛ متن راهنما ممکن است هنگام تایپ ناپدید شود و هدف فیلد را به اندازه کافی مشخص نکند.

تگ label از ویژگی های عمومی HTML پشتیبانی می کند. اطلاعات بیشتر درباره ویژگی های عمومی در HTML و ویژگی های رویدادها در HTML را می توانید در راهنماهای مربوط بخوانید. برای آشنایی با دیگر عناصر فرم نیز به مطلب تگ های Button، Label و Textarea مراجعه کنید.

تگ button در HTML

تگ <button> یک دکمه تعاملی ایجاد می کند. محتوای داخل آن می تواند متن باشد و در صورت نیاز از عناصر مجاز HTML نیز برای چیدمان یا نمایش نشانه استفاده شود. دکمه ها در فرم ها برای ارسال داده، پاک کردن اطلاعات یا اجرای یک عملیات مشخص کاربرد دارند.

یکی از نکته های مهم این است که رفتار دکمه به ویژگی type وابسته است. درون یک فرم، اگر نوع دکمه مشخص نشود، مرورگر معمولا آن را دکمه ارسال فرم در نظر می گیرد. بنابراین بهتر است نوع هر دکمه را صریح بنویسید تا از ارسال ناخواسته فرم جلوگیری شود.

انواع اصلی button

• type="submit": داده های فرم را برای ارسال آماده می کند.
• type="button": به خودی خود فرم را ارسال نمی کند و معمولا برای اجرای کد جاوااسکریپت استفاده می شود.
• type="reset": مقدار کنترل های فرم را به حالت اولیه برمی گرداند؛ استفاده از آن باید با دقت انجام شود، چون ممکن است اطلاعات واردشده کاربر پاک شود.

<button type="button">Click Me!</button>

<button type="submit">Send form</button>

<button type="reset">Clear fields</button>

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

تفاوت button با input type="button"

برای ساخت دکمه می توان از عنصر <input> نیز استفاده کرد، اما این دو روش کاملا یکسان نیستند. عنصر button می تواند محتوای متنوع تری داشته باشد، در حالی که متن دکمه ساخته شده با input معمولا از ویژگی value گرفته می شود. در انتخاب میان آن ها، به نیاز طراحی، سازگاری با مرورگرهای هدف و خوانایی کد توجه کنید.

برای ساخت کنترل ورودی و آشنایی با عناصر مرتبط، راهنمای <input> و فرم های HTML را هم مطالعه کنید. تگ button نیز از ویژگی های عمومی و ویژگی های رویدادها پشتیبانی می کند؛ با این حال، بهتر است برای رفتارهای تعاملی از راهکارهای استاندارد و قابل دسترس استفاده شود.

تگ textarea در HTML

تگ <textarea> یک کادر متنی چندخطی می سازد. این عنصر زمانی مناسب است که کاربر باید متنی طولانی تر از یک عنوان یا مقدار کوتاه وارد کند؛ برای مثال، نوشتن پیام، توضیح سفارش، دیدگاه یا شرح یک درخواست. برخلاف فیلدهای متنی تک خطی، کاربر در textarea می تواند متن را در چند سطر مشاهده و ویرایش کند.

ویژگی های rows و cols تعداد تقریبی سطرها و عرض اولیه کادر را مشخص می کنند. این مقادیر ظاهر اولیه را تعیین می کنند و می توان اندازه نهایی را با CSS و متناسب با طراحی صفحه تنظیم کرد. برای محدود کردن طول متن، از ویژگی هایی مانند maxlength استفاده می شود؛ بنابراین بهتر است به جای توصیف این فیلد به عنوان ظرفی نامحدود، محدودیت های مورد نیاز فرم را مشخص کنید.

نمونه کد textarea

<label for="message">Your message</label>
<textarea id="message" name="message" rows="5" cols="40"
  maxlength="500" placeholder="Write your message here"></textarea>

در این نمونه، label با استفاده از مقدار مشترک for و id به کادر متن متصل شده است. ویژگی name نامی را مشخص می کند که داده با آن در فرم ارسال می شود. ویژگی placeholder می تواند نمونه ای کوتاه از ورودی مورد انتظار نشان دهد، اما نباید جایگزین برچسب اصلی شود.

مقدار اولیه textarea باید بین تگ باز و بسته آن قرار بگیرد، نه در ویژگی value. برای نمونه، اگر بخواهید یک پیام پیش فرض نمایش دهید، متن را داخل عنصر قرار دهید. اگر کاربر باید حتما مقداری وارد کند، ویژگی required را در نظر بگیرید و در کنار آن پیام خطای روشن و قابل فهمی برای وضعیت نامعتبر فراهم کنید.

ویژگی های پرکاربرد textarea

• rows: تعداد تقریبی سطرهایی را تعیین می کند که هنگام نمایش اولیه دیده می شوند.
• cols: عرض اولیه کادر را بر اساس تعداد تقریبی نویسه ها مشخص می کند.
• name: نام داده ای است که هنگام ارسال فرم استفاده می شود.
• maxlength: حداکثر تعداد نویسه های مجاز را تعیین می کند.
• minlength: در صورت نیاز، حداقل طول قابل قبول را مشخص می کند.
• placeholder: راهنمای کوتاهی برای محتوای مورد انتظار نمایش می دهد.
• required: وارد کردن متن را برای ارسال فرم الزامی می کند.
• readonly و disabled: به ترتیب امکان ویرایش یا استفاده از کادر را محدود می کنند، اما رفتار آن ها در فرم یکسان نیست.

تگ textarea از ویژگی های عمومی HTML و ویژگی های رویدادها نیز پشتیبانی می کند. برای دیدن فهرست این موارد، صفحه های ویژگی های عمومی در HTML و ویژگی های رویدادها در HTML را ببینید. همچنین برای شناخت فیلدهای تک خطی، مطلب تگ های Form و Input مفید است.

چطور این سه تگ را در یک فرم کنار هم استفاده کنیم؟

فرمی خوانا از برچسب های روشن، کنترل های مناسب و دکمه ای با عملکرد قابل پیش بینی تشکیل می شود. در کد زیر، کاربر می تواند نام و پیام خود را وارد کند و سپس فرم را ارسال کند. در یک وب سایت واقعی، ویژگی action باید به نشانی پردازش فرم در سمت سرور اشاره کند.

<form action="/contact" method="post">
  <div>
    <label for="name">Your name</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div>
    <label for="message">Your message</label>
    <textarea id="message" name="message" rows="5"
      maxlength="500" required></textarea>
  </div>

  <button type="submit">Send message</button>
  <button type="reset">Clear form</button>
</form>

این نمونه از label برای توضیح هر فیلد، از textarea برای پیام چندخطی و از button برای ارسال یا بازنشانی استفاده می کند. در پروژه واقعی، ظاهر فرم را با CSS هماهنگ کنید و برای ارسال موفق یا بروز خطا، بازخورد مناسبی به کاربر نشان دهید. اگر فرم با جاوااسکریپت کنترل می شود، دکمه های اجرایی غیرارسالی را با type="button" مشخص کنید.

اشتباهات رایج در فرم های HTML

• هماهنگ نبودن for و id: اگر این دو مقدار متفاوت باشند، label به فیلد مورد نظر متصل نمی شود.
• فراموش کردن name: یک فیلد بدون نام ممکن است هنگام ارسال، داده مورد انتظار را تولید نکند.
• مشخص نکردن type دکمه: دکمه ای که در فرم قرار دارد ممکن است ناخواسته فرم را ارسال کند.
• استفاده از placeholder به جای برچسب: راهنما به تنهایی نام دائمی و روشنی برای فیلد فراهم نمی کند.
• انتخاب اندازه نامناسب برای textarea: کادر بسیار کوچک نوشتن پیام را دشوار می کند و کادر بیش از اندازه بزرگ ممکن است چیدمان صفحه را به هم بزند.
• نبود پیام خطای قابل فهم: مشخص کنید کدام مقدار نادرست است و کاربر چگونه می تواند آن را اصلاح کند.
• پاک کردن اطلاعات بدون هشدار: دکمه reset را فقط زمانی قرار دهید که بازنشانی فرم واقعا برای کاربر مفید باشد.

جدول خلاصه تگ های label، button و textarea

پرسش های متداول درباره تگ های فرم

آیا هر فیلد فرم باید label داشته باشد؟

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

آیا می توان چند گزینه رادیویی را با یک label توضیح داد؟

برای توضیح کلی گروه گزینه ها، می توانید از ساختار مناسب گروه بندی مانند <fieldset> و <legend> استفاده کنید. هر گزینه نیز باید label خودش را داشته باشد تا کاربر بداند انتخاب هر مورد چه معنایی دارد.

تفاوت rows و cols در textarea چیست؟

ویژگی rows ارتفاع اولیه کادر را بر اساس تعداد تقریبی سطرها و ویژگی cols عرض اولیه آن را بر اساس تعداد تقریبی نویسه ها مشخص می کند. برای کنترل دقیق ظاهر در اندازه های مختلف صفحه، معمولا CSS انتخاب مناسب تری برای تنظیم عرض و ارتفاع است.

چه زمانی از type="button" استفاده می شود؟

از این نوع زمانی استفاده کنید که دکمه نباید فرم را ارسال کند؛ برای نمونه، وقتی دکمه یک بخش از صفحه را باز می کند یا عملی را با جاوااسکریپت انجام می دهد. اگر هدف ارسال اطلاعات فرم است، از type="submit" استفاده کنید.

نتیجه گیری

تگ های label، button و textarea هر کدام وظیفه مشخصی در ساخت فرم دارند: label ارتباط میان عنوان و فیلد را برقرار می کند، button امکان اجرای عملیات را می دهد و textarea برای دریافت متن چندخطی به کار می رود. با اتصال درست برچسب ها، تعیین نوع دکمه ها و انتخاب ویژگی های مناسب برای کادر متن، فرم هایی روشن تر، قابل دسترس تر و ساده تر برای استفاده خواهید ساخت. رعایت همین نکته های پایه درباره تگ های label، button و textarea می تواند کیفیت تجربه کاربری در صفحات وب را به شکل محسوسی بهتر کند.