جلسه سیزدهم: آموزش کامل تگ form در HTML
به دوره حرفه‌ای آموزش HTML در آوای وب خوش اومدی! اینجا قراره تگ <form> رو به‌صورت کامل یاد بگیری و فرم‌های شگفت‌انگیزی برای وب‌سایتت بسازی! می‌خوای فرم تماس، ثبت‌نام یا جستجو به سایتت اضافه کنی و تعامل کاربرا رو حرفه‌ای‌تر کنی؟ تگ <form> قلب ارتباط بین کاربر و وب‌سایته؛ محیطی که داده‌هایی مثل نام، ایمیل یا سفارشات رو جمع‌آوری می‌کنه و به سرور می‌فرسته. با این آموزش جامع از آوای وب، همه‌چیز درباره تگ <form> و تگ‌های مرتبط باهاش رو یاد می‌گیری! بزن بریم!
آنچه در این مقاله می‌خوانید :
✅ تگ form چیه و چرا مهمه؟
تگ <form> توی HTML مثل یه جعبه جادویی‌یه که همه ابزارهای فرم‌سازی رو توش می‌ذاری. از کادرهای متنی گرفته تا دکمه‌ها و منوهای کشویی، همه‌شون داخل این تگ جا می‌گیرن. کار اصلی‌ش اینه که داده‌هایی که کاربر وارد می‌کنه رو جمع کنه و بفرسته یه جای دیگه، مثلاً یه فایل PHP یا یه API. بدون این تگ، عملاً نمی‌تونی با کاربرهات تعامل درست و حسابی داشته باشی!
<form action="/submit" method="POST">
</form>action: می‌گه داده‌ها کجا برن (مثلاً یه آدرس URL).method: می‌گه چطوری برن (GET یا POST).
🔧 اتریبیوت‌های تگ form : ابزارهای حرفه‌ای‌ات رو بشناس
تگ <form> چند تا اتریبیوت (ویژگی) داره که مثل تنظیماتش عمل می‌کنن. بیا با هم تک‌تک اینا رو بررسی کنیم:
1. اتریبیوت action
این مشخص می‌کنه داده‌های فرم قراره کجا ارسال بشن. اگه چیزی ننویسی، داده‌ها به همان صفحه‌ای که فرم توش هست ارسال می‌شن.
<form action="/form.php">2. اتریبیوت method
دو حالت داری:
- GET: داده‌ها توی آدرس URL نمایش داده می‌شن، برای جستجو و اطلاعات کم خوبه.
- POST: داده‌ها توی بدنه درخواست ارسال می‌شن، برای اطلاعات حساس یا حجم بالا بهتره.
<form method="POST">⚠️ نکته: هنگام استفاده از روش GET، اطلاعات فرم در URL قابل مشاهده هست و ممکنه امنیت پایین‌تری داشته باشه.
<form method="GET">3. اتریبیوت enctype
این اتریبیوت وقتی کاربرد داره که بخوای فایل آپلود کنی:
application/x-www-form-urlencoded: حالت پیش‌فرض برای ارسال متن‌ها.multipart/form-data: مخصوص آپلود فایل (حتماً یادت باشه استفاده کنی!).text/plain: ارسال متن ساده بدون هیچ کدگذاری خاصی.
<form enctype="multipart/form-data">4. اتریبیوت target
می‌گه جواب سرور کجا باز بشه:
_blank: توی تب جدید باز میشه._self: توی همون صفحه (پیش‌فرض)._parentیا_top: مخصوص فریم‌ها (خیلی کم استفاده میشه).
<form target="_blank">5. اتریبیوت autocomplete
می‌خوای مرورگر خودش فیلدها رو پر کنه یا نه؟
off: خیر.on: بله (پیش‌فرض).
<form autocomplete="on">6. اتریبیوت novalidate
اگه این اتریبیوت رو بذاری، مرورگر فرم رو اعتبارسنجی نمی‌کنه (مناسب وقتی خودت با جاوااسکریپت اعتبارسنجی رو انجام می‌دی).
<form novalidate>7. اتریبیوت accept-charset
می‌گه از چه نوع کدگذاری‌ای استفاده بشه (معمولاً UTF-8 کافیه):
مقادیر ممکن:
UTF-8: رایج‌ترین کدگذاری برای کاراکترها (پیش‌فرض).ISO-8859-1: کدگذاری برای زبان‌های غربی.ASCII: برای متون پایه بدون کاراکترهای خاص.
مثال:
<form accept-charset="UTF-8">8. اتریبیوت name
یه اسم به فرم می‌دی که بتونی با جاوااسکریپت راحت پیداش کنی و بهش دسترسی داشته باشی.
<form name="loginForm">9. اتریبیوت rel
rel (مخفف relationship) مشخص می‌کنه فرم چه رابطه‌ای با منبعی که بهش وصل شده (مثل action) داره. این ویژگی بیشتر برای کنترل مرورگر و بهینه‌سازی سئو استفاده میشه.
مقادیر مهم rel
external: فرم به یه منبع خارجی وصل میشه.nofollow: به موتورهای جستجو می‌گه دنبال این لینک نرن.noopener: افزایش امنیت وقتی فرم در تب جدید باز میشه (باtarget="_blank").noreferrer: منبع صفحه رو مخفی می‌کنه.alternate: نشون می‌ده این فرم نسخه جایگزین یه منبع دیگه‌ست (مثلاً یه فرم جستجوی خاص).help: فرم به صفحه راهنما وصل میشه.
🧰 تگ‌های مرتبط: ابزارای فرم‌سازیت رو بشناس!
حالا که با تگ <form> آشنا شدی، بیایم سراغ ابزارهایی بریم که می‌تونی داخلش استفاده کنی.
🎯 تگ input : قهرمان همه‌کاره فرم‌ها
تگ <input> می‌تونه کارهای مختلفی انجام بده، بستگی داره که typeش چی باشه. تقریباً میشه گفت ستون اصلی اکثر فرم‌هاست.
📦 ساختار پایه‌ای تگ input
<input type="text" name="username">⚙️ اتریبیوت های اصلی تگ input
تگ <input> یه سری ویژگی یا همون اتریبیوت داره که مشخص می‌کنن این فیلد ورودی چه رفتاری داشته باشه و چه نوع داده‌ای رو بگیره. بیایم باهم با همه اونها آشنا بشیم:
🧾 1. اتریبیوت name
اسم فیلد رو مشخص می‌کنه و موقع ارسال فرم به سرور، به‌عنوان کلید استفاده میشه.
<input name="password">🧾 2. اتریبیوت type
با این ویژگی تعیین می‌کنی چه نوع داده‌ای وارد بشه. تگ <input> بسته به مقدار type رفتارهای متفاوتی داره. بیایم همشو با هم بررسی کنیم:
✏️ text : برای وارد کردن متن ساده (مثل نام، نام خانوادگی و…):
<input type="text" name="user_name">📌 نتیجه: یه کادر متنی نمایش داده میشه که کاربر می‌تونه متن ساده وارد کنه. نتیجه کد بالا به صورت زیر نمایش داده می شه.
🔒 password: برای وارد کردن رمز عبور. متن به‌صورت نقطه یا ستاره نمایش داده میشه:
<input type="password" name="password">📌 نتیجه: یه فیلد محرمانه برای ورود رمز عبور. نتیجه کد بالا به صورت زیر نمایش داده می شه.
📧 email: برای دریافت ایمیل. مرورگر خودش بررسی می‌کنه که فرمت ایمیل درست باشه:
<input type="email" name="user_email">📌 نتیجه: فیلدی برای وارد کردن ایمیل با اعتبارسنجی خودکار. نتیجه کد بالا به صورت زیر نمایش داده می شه.
🔢 number: فقط عدد می‌گیره. می‌تونی با min و max محدوده تعیین کنی:
<input type="number" name="number" min="1" max="5">📌 نتیجه: فقط اعداد بین ۱ تا ۵ قابل قبول هستن. نتیجه کد بالا به صورت زیر نمایش داده می شه.
🌐 url: برای گرفتن آدرس سایت. مرورگر چک می‌کنه فرمتش درست باشه (یعنی با http یا https شروع شه):
<input type="url" name="website">📌 نتیجه: کاربر فقط می‌تونه یه URL معتبر وارد کنه.
📅 date: برای انتخاب تاریخ از یه تقویم:
<input type="date" name="birthday">📌 نتیجه: یه تقویم باز میشه و کاربر می‌تونه تاریخ تولد یا هر تاریخ دیگه‌ای رو انتخاب کنه.
🕓 datetime-local: وقتی هم تاریخ می‌خوای هم ساعت، این نوع به کارت میاد:
<input type="datetime-local" name="meeting">📌 نتیجه: تقویم + ساعت، توی یه فیلد.
🗓️ month: فقط ماه و سال می‌خوای؟ این گزینه عالیه:
<input type="month" name="expiry">📌 نتیجه: مثلاً می‌تونی تاریخ انقضای کارت یا اشتراک رو بگیری.
📅 week: برای انتخاب هفته از سال:
<input type="week" name="week">📌 نتیجه: کاربر یه هفته خاص رو از بین هفته‌های سال انتخاب می‌کنه.
⏰ time: فقط برای انتخاب ساعت و دقیقه:
<input type="time" name="appointment">📌 نتیجه: مثلاً ساعت وقت ملاقات یا قرار.
🎨 color: وقتی می‌خوای کاربر یه رنگ انتخاب کنه:
<input type="color" name="favcolor">📌 نتیجه: یه پالت رنگ باز میشه و کاربر می‌تونه یه رنگ انتخاب کنه.
✅ checkbox: وقتی چند گزینه رو با هم می‌خوای!
چک‌باکس‌ها به کاربر اجازه می‌دن تا از میان چندین گزینه، بیش از یک گزینه را انتخاب کنه. این نوع ورودی زمانی استفاده میشه که می‌خواهید کاربر امکان انتخاب چندین مورد را داشته باشه. برای مثال، اگر نیاز به فرمی داری که کاربر بتونه چندین علاقه‌مندی را به‌صورت همزمان انتخاب کنه، از نوع checkbox استفاده می‌کنیم.
<label><input type="checkbox" name="interests" value="sports"> ورزش</label>
<label><input type="checkbox" name="interests" value="music"> موسیقی</label>
<label><input type="checkbox" name="interests" value="travel"> سفر</label>📌 نتیجه: اجازه انتخاب چند گزینه از بین گزینه‌های موجود.
🔘 radio: فقط یکی رو انتخاب کن!
گزینه‌های رادیویی به کاربر اجازه می‌دن تا از میان چندین گزینه، فقط یکی را انتخاب کنه. این نوع ورودی زمانی استفاده میشه که شما نیاز داری کاربر تنها یک گزینه را از میان چندین انتخاب مشخص کنه. برای مثال، اگر می‌خوای جنسیت کاربر را دریافت کنی، می‌توانی از radio استفاده کنید تا تنها یک گزینه (مرد یا زن) قابل انتخاب باشه.
<label><input type="radio" name="gender" value="male"> مرد</label>
<label><input type="radio" name="gender" value="female"> زن</label>💡 نکته: باید مقدار اتریبیوت name در گزینه‌ها یکی باشه.
📎 file: وقتی نیازه که کاربر فایل آپلود کنه!
ورودی نوع file به کاربر اجازه می‌ده تا فایلی را از دستگاه خود انتخاب و آپلود کنه. این نوع ورودی زمانی استفاده میشه که کاربر نیاز به ارسال فایل‌هایی مثه تصویر، سند یا هر نوع فایل دیگری داشته باشه. از طریق این ورودی، می‌تونی محدودیت‌هایی برای نوع فایل‌های قابل قبول (با استفاده از اتریبیوت accept) اعمال کنی.
مثال:
<input type="file" name="resume" id="resume" accept=".pdf,.doc,.docx">📌 نکته: تو این مثال، فقط فایل‌های با پسوند .pdf، .doc و .docx قابل انتخاب هستن.
🎯 ویژگی‌های مهم برای ورودی فایل
accept: مشخص می‌کنه چه نوع فایلی قابل انتخابه. مثلاً pdfmultiple: اجازه می‌ده کاربر چندتا فایل رو با هم انتخاب کنه:
مثال با آپلود چند فایل:
<input type="file" name="images" accept="image/*" multiple>📌 نتیجه: حالا می‌تونه چندتا عکس رو همزمان انتخاب و ارسال کنه.
💡نکته مهم درباره آپلود فایل
اگه قراره تو فرم از تایپ file استفاده کنی، حتماً یادت باشه که توی تگ <form> باید این اتریبیوت
enctype="multipart/form-dataرو بزاری رو بذاری.
مثال:
<form method="POST" enctype="multipart/form-data">📌 نتیجه: بدون این ویژگی، فایل‌ها اصلاً به درستی ارسال نمی‌شن و ممکنه سرور هیچی دریافت نکنه!
📷 image: ارسال فرم با کلیک روی تصویر
گاهی وقتا می‌خوای یه تصویر خوشگل جای دکمه‌ی submit باشه؟ اینجاست که به کارت میاد! درست مثل دکمه‌ی ارسال عمل می‌کنه ولی تصویر رو به‌جاش نشون می‌ده.
ویژگی‌ها:
src: آدرس تصویر مورد استفاده برای دکمه.alt: توضیحی که در صورت عدم بارگذاری تصویر نمایش داده میشه.widthوheight: تعیین اندازه تصویر.nameوvalue: می‌تونی باهاشون اطلاعات هم بفرستی
<input type="image" src="submit-button.png" alt="ارسال" width="100" height="50">🎯 نکته مهم: ارسال مختصات کلیک
وقتی از type="image" استفاده می‌کنی، مرورگر مختصات نقطه‌ای که کاربر روش کلیک کرده رو هم می‌فرسته. این مختصات به صورت name.x و name.y به سرور ارسال می‌شن!
مثال حرفه‌ای‌تر:
<input type="image" src="map.png" name="location" alt="نقشه">📌 نتیجه: یعنی اگه کاربر روی یه نقطه از تصویر کلیک کنه، می‌تونی بفهمی دقیقاً کجا رو زده!
🔍 search: کادر جستجو
وقتی بخوای یه کادر ساده برای جستجو بذاری، بهترین گزینه type="search"ـه. ظاهراً شبیه text عمل می‌کنه ولی تو بعضی مرورگرها امکاناتی مثل پاک‌کردن سریع با آیکن × داره.
<input type="search" name="search">☎️ tel: ورودی شماره تلفن
ورودی نوع tel برای وارد کردن شماره تلفن استفاده میشه. این ورودی از نظر ظاهری مشابه ورودی متن ساده (text) هست، اما برای وارد کردن شماره‌های تلفن طراحی شده. برخی مرورگرها هنگام استفاده از این نوع ورودی، صفحه‌کلید مخصوص اعداد و نشانه‌های مرتبط با شماره‌تلفن (مانند +, -, ()) را در دستگاه‌های موبایل نمایش می‌دن تا تجربه کاربری بهتری فراهم کنن.
<input type="tel" name="phone" placeholder="شماره تلفن">📱 نکته حرفه‌ای: با این نوع ورودی تجربه کاربر موبایلی بهتر میشه!
🎚️ range: اسلایدر عددی
تایپ range برای انتخاب یک مقدار عددی در یک بازه مشخص با استفاده از یک اسلایدر (slider) استفاده میشه. این ورودی به کاربر اجازه می‌دهد تا مقدار رو با کشیدن نوار اسلایدر انتخاب کنه. همچنین، با استفاده از اتریبیوت‌های min، max و step، میشه محدودیت‌ها و گام‌های انتخاب رو تعیین کنی.
ویژگی‌ها:
min: مقدار حداقل مجاز که کاربر می‌تونه انتخاب کنه.max: مقدار حداکثر مجاز که کاربر می‌تونه انتخاب کنه.step: مقدار افزایش یا کاهش هر بار که کاربر اسلایدر را جابجا می‌کنه. به‌طور پیش‌فرض، مقدارش 1.value: مقدار اولیه‌ای که هنگام بارگذاری صفحه نمایش داده میشه.disabled: ورودی رو غیر فعال می‌کنه و کاربر نمی‌تونه تغییرش بده.
<input type="range" name="volume" min="0" max="100" step="1" value="50">📌 نتیجه: تو این مثال، کاربر می‌تونه مقدار صدا رو از 0 تا 100 با گام 1 تنظیم کنه و مقدار اولیه هم 50 هست. مثال بالا به صورت زیر نمایش داده میشه.
button: دکمه‌ای که خودش کاری نمی‌کنه!
یک دکمه معمولی نمایش داده میشه که خودش هیچ کاری انجام نمی‌ده. باید با جاوااسکریپت یا روش‌های دیگه کاری براش تعریف کنی.
ویژگی‌ها:
value: متنی که روی دکمه نمایش داده میشه.name: نام دکمه که می‌توانه برای شناسایی در هنگام ارسال داده‌ها به کار بره.disabled: دکمه غیر فعال میشه و کاربر نمی‌تونه روش کلیک کنه.
<input type="button" value="کلیک کنید">📌 نتیجه: مثال بالا به صورت زیر نمایش داده میشه.
🔄 reset: دکمه‌ی پاک‌کردن فرم
ورودی نوع reset به کاربر اجازه می‌ده تا تمام فیلدهای تگ <form> را به مقادیر اولیه‌ای که در زمان بارگذاری فرم تعیین شده، برگرده.
<input type="reset" value="بازنشانی">📌 نتیجه: با کلیک روی این دکمه، همه فیلدها به همون مقدار اولیه‌ای که صفحه بارگذاری شده، برمی‌گردن.
submit: دکمه ارسال فرم.
این دکمه‌ها به‌طور خودکار تمام فیلدهای موجود در تگ <form> را بررسی کرده و اگر فیلدی الزامی باشه و پر نشده باشه، فرم ارسال نمیشه و خطای مناسب نمایش داده میشه و اگه مشکلی نباشه فرم رو ارسال می‌کنه.
<input type="submit" value="ارسال">ویژگی‌ها:
value: متنی که روی دکمه نمایش داده می‌شود (مثل “ارسال” یا “ثبت”).name: نام دکمه که می‌تونه هنگام ارسال داده‌ها به سرور استفاده بشه.disabled: دکمه غیر فعال میشه و کاربر نمی‌تونه روش کلیک کنه.formaction: با این ویژگی‌های می‌تونی مشخص کنی که فرم به کجا ارسال بشه (این ویژگی به‌خصوص در فرم‌های چنددکمه‌ای مفیده).formenctype: وقتی یک فرم رو ارسال می‌کنی، مرورگر اطلاعات داخل فرم رو می‌گیره و به سرور می‌فرسته. حالا اینکه چجوری این اطلاعات بسته‌بندی و کدگذاری بشن بستگی به مقدارش داره.
مقدارهای formenctype:
1. application/x-www-form-urlencoded (پیش‌فرض)
🟢 اطلاعات فرم به شکل کلید=مقدار (key=value) ارسال میشه
🔸 مناسب برای فرم‌هایی که فقط متن، عدد، چک‌باکس و… دارن
🔸 کاراکترهای خاص (مثل فاصله یا +) کدگذاری می‌شن
<input type="submit" formaction="/send" formenctype="application/x-www-form-urlencoded">2. multipart/form-data
🟡 این یکی مخصوص وقتی استفاده میشه که قراره فایل هم آپلود بشه (مثل عکس یا رزومه)
🔸 اطلاعات فرم به بخش‌های جدا (multi-part) تقسیم میشه
🔸 هر قسمت شامل هدر و بادی مخصوص به خودشه
🔸 بدون این مقدار، فایل‌ها به درستی ارسال نمی‌شن
<input type="submit" formaction="/upload" formenctype="multipart/form-data">⚠️ نکته مهم: اگه از <input type="file"> استفاده می‌کنی، فرم باید با enctype="multipart/form-data" ارسال بشه.
3. text/plain
🔴 همه چیز به صورت متن ساده ارسال میشه
🔸 هیچ‌کدوم از کاراکترها کدگذاری نمی‌شن
🔸 فقط برای تست یا موقعیت‌های خاص استفاده میشه
🔸 امنیت پایینی داره و معمولاً استفاده نمیشه
<input type="submit" formenctype="text/plain">مثال برای ویژگی formaction:
<input type="submit" value="ارسال به پیش‌فرض">
<input type="submit" value="ارسال به دیگر" formaction="/other-submit">📌 نتیجه: مثال بالا به صورت زیر نمایش داده میشه.
🕵️♂️ hidden: داده‌های مخفی که کاربر نمی‌بینه!
گاهی لازم داری داده‌هایی رو همراه فرم ارسال کنی ولی نخواهی کاربر اونا رو ببینه یا تغییر بده. برای این کار از type="hidden" استفاده می‌کنی.
<input type="hidden" name="user_id" value="12345">📌 نتیجه: مثلاً می‌تونی شناسه کاربری، توکن امنیتی یا هر داده‌ی سیستمی رو اینطوری به سرور بفرستی.
🏷️ تگ lable : برچسبی برای فهم بهتر فرم‌ها
تگ <label> برای چیه؟
برای اینه که به کاربر بفهمونه هر فیلد ورودی (input, select, textarea و…) دقیقاً مربوط به چی هست. این کار نه‌تنها ظاهر فرم رو حرفه‌ای‌تر و قابل‌فهم‌تر می‌کنه، بلکه برای دسترسی‌پذیری (accessibility) سایت هم خیلی مهمه.
📌 تگ lable چرا مهمه؟
- وقتی از
<label>استفاده کنی، افراد نابینا یا کسانی که با صفحه‌خوان‌ها کار می‌کنن، بهتر می‌تونن با فرم تعامل داشته باشن. - روی موبایل یا تبلت، کلیک روی متن
labelباعث میشه فیلد مربوطه فعال بشه، که تجربه کاربری رو خیلی بهتر می‌کنه.
🧩 اتریبیوت for
ویژگی for توی تگ label برای اتصال برچسب به یه المنت خاص توی صفحه استفاده میشه. این ویژگی مقدارش باید برابر با id تگی باشه که می‌خوای بهش وصل بشه. هدفش اینه که یه رابطه مشخص بین برچسب و المنت ورودی (مثل input، textarea یا select) ایجاد کنه.
✅ دو روش استفاده از تگ <label>
1. با اتریبیوت for (روش مرسوم و حرفه‌ای)
در این روش، label به یک عنصر خاص وصل میشه با استفاده از مقدار for که باید دقیقاً برابر با id اون عنصر باشه.
<label for="email">ایمیل شما:</label>
<input type="email" id="email" name="email">📌 وقتی روی متن «ایمیل شما» کلیک کنی، فیلد ایمیل فوکوس می‌گیره.
2. قرار دادن مستقیم input داخل label (بدون استفاده از for)
تو این روش، دیگه نیازی به for و id نیست، چون input مستقیماً داخل label قرار داره.
<label>
شماره موبایل:
<input type="tel" name="phone">
</label>📌 این روش ساده‌تره، اما تو فرم‌های بزرگ و پیچیده ممکنه کمتر استفاده بشه، چون جداسازی اجزا سخت‌تر میشه.
💡 نکات مهم:
- بهتره همیشه از
forاستفاده کنی چون کدنویسی رو مرتب‌تر و حرفه‌ای‌تر می‌کنه. labelمی‌تونه برای همه‌ی inputها، چک‌باکس‌ها، دکمه‌های رادیویی، select و textarea استفاده بشه.- کلیک روی متن label، همون اثر کلیک روی input رو داره. برای مثال:
<label for="accept">
<input type="checkbox" id="accept" name="accept">
قوانین را می‌پذیرم
</label>یا:
<input type="checkbox" id="accept" name="accept">
<label for="accept">قوانین را می‌پذیرم</label>در هر دو حالت، کلیک روی “قوانین را می‌پذیرم” باعث تیک خوردن چک‌باکس میشه.
📝 تگ textarea
تگ <textarea> توی HTML برای ایجاد یه ناحیه‌ی متنی چندخطی استفاده میشه. فرقش با <input type="text"> چیه؟
اینکه <input> فقط برای ورود متن‌های کوتاه و تک‌خطیه (مثل نام کاربری یا ایمیل)، ولی <textarea> برای متن‌های طولانی‌تره، مثل:
- متن مقاله یا فرم تماس و…
- دیدگاه یا کامنت کاربران
- پیام‌ها
- توضیحات محصولات
🔧 ساختار کلی تگ textarea
<textarea name="comment" rows="4" cols="50">متن </textarea>🔹 در مثال بالا، یه باکس متنی ساختیم که ۴ خط بلندی داره و هر خط می‌تونه حدود ۵۰ کاراکتر رو نشون بده. داخلش هم یه متن پیش‌فرض نوشته شده که کاربر می‌تونه حذف یا ویرایشش کنه. نمونش تصویر زیر میشه.
✍️ اتریبیوت های تگ textarea
name: نام ناحیه متنی که هنگام ارسال فرم برای شناسایی استفاده میشه.rows: تعداد خطوط قابل نمایش در ناحیه متنی. این ویژگی تعیین می‌کنه که ارتفاع ناحیه متنی چه مقدار باشه.cols: تعداد کاراکترهایی که در هر خط از ناحیه متنی قابل نمایشه (عرض ناحیه متنی).placeholder: متن راهنما که در ناحیه متنی قبل از ورود کاربر نمایش داده میشه و بعد از شروع تایپ کاربر ناپدید میشه.maxlength: حداکثر تعداد کاراکترهایی که کاربر می‌تواند وارد کنه.disabled: ناحیه متنی غیرفعاله. کاربر نمی‌تونه چیزی توش بنویسه.readonly: فقط خوندنیه؛ نمی‌تونه تایپ کنه ولی می‌تونه کپی کنه.required: اگه این ویژگی باشه، باید حتماً قبل از ارسال فرم پر بشه.autofocus: وقتی صفحه لود میشه، مستقیم فوکوس می‌ره رو این فیلد.form: مشخص می‌کنه که این ناحیه متنی متعلق به کدام فرمه. این ویژگی زمانی استفاده میشه که ناحیه متنی خارج از تگ<form>قرار گرفته باشه.wrap: کنترل اینکه وقتی کاربر به انتهای خط می‌رسه، متن بره خط بعد یا نه دو مقدار زیر رو می‌گیره:
soft: متن به خط بعدی می‌ره ولی وقتی فرم ارسال بشه، متن تو یه خط می‌مونه.hard: متن هم تو مرورگر می‌شکنه، هم موقع ارسال تو چند خط ارسال میشه.
مثال:
<textarea name="softText" rows="5" cols="30" wrap="soft"></textarea>
<textarea name="hardText" rows="5" cols="30" wrap="hard"></textarea>تگ button:
تگ <button> برای ساختن یه دکمه قابل کلیک استفاده میشه.
<button type="submit">ارسال</button>📌 نتیجه: کد بالا به صورت زیر نمایش داده میشه.
تگ <button> برای ساختن یه دکمه قابل کلیک استفاده میشه. فرقش با <input type="button"> اینه که خیلی انعطاف‌پذیرتره! یعنی می‌تونی داخلش متن، آیکون، عکس یا حتی HTML دیگه بذاری. مثلاً:
<button type="submit">
<img src="icon.png" alt="آیکون"> ارسال فرم
</button>اتریبیوت های تگ button
- type: مشخص می‌کند که دکمه چه عملی انجام بده. سه مقدار اصلی برای این ویژگی وجود داره:
- submit: دکمه‌ای که فرم را ارسال می‌کنه (پیش‌فرض اگر type مشخص نشده نباشه).
- reset: دکمه‌ای که تمام فیلدهای تگ form را به مقادیر اولیه بازمی‌گردونه.
- button: دکمه‌ای که هیچ عملی به‌طور پیش‌فرض انجام نمی‌ده و برای جاوااسکریپت یا سایر کاربردهای سفارشی استفاده میشه.
name: نام دکمه که هنگام ارسال فرم به سرور ارسال میشه.value: مقدار دکمه که به همراه ویژگی name به سرور ارسال میشه.disabled: غیرفعال میشه.form: مشخص می‌کند که دکمه به کدام فرم تعلق داره. این ویژگی برای دکمه‌هایی که خارج از تگ <form> قرار داره استفاده میشه.autofocus: وقتی صفحه بارگذاری میشه، فوکوس به‌طور خودکار روی دکمه قرار می‌گیره.
🧩 تگ fieldset
تگ <fieldset> برای دسته‌بندی منطقی بخش‌هایی از یک فرم استفاده میشه. یعنی وقتی چند ورودی (input) داری که به هم مربوط هستن (مثلاً اطلاعات شخصی یا اطلاعات پرداخت)، می‌تونی اونها رو داخل یک fieldset بذاری تا مرتب‌تر و واضح‌تر باشن.
این کار نه‌تنها ظاهر فرم رو منظم‌تر می‌کنه، بلکه دسترس‌پذیری (accessibility) رو هم بهبود می‌ده؛ چون صفحه‌خوان‌ها متوجه می‌شن که این ورودی‌ها یک مجموعه هستن.
🏷 تگ legend
وقتی از <fieldset> استفاده می‌کنی، بهتره همراهش از تگ <legend> هم استفاده بشه. این تگ یه عنوان یا توضیح برای اون گروه از ورودی‌ها مشخص می‌کنه و به‌طور پیش‌فرض بالای کادر ظاهر میشه.
✏️ مثال کاربردی:
<form action="/submit" method="post">
<fieldset>
<legend>اطلاعات شخصی</legend>
<label for="name">نام:</label>
<input type="text" id="name" name="name">
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email">
</fieldset>
<input type="submit" value="ارسال">
</form>✅ توضیح کد:
fieldset: یک قاب اطراف ورودی‌ها می‌کشه تا مشخص بشه که این‌ها مربوط به یه دسته خاص هستن.legend: عنوانی برای اون گروه از فیلدهاه. توی این مثال، نوشته شده “اطلاعات شخصی”.- هر ورودی (مثل نام و ایمیل) با استفاده از
<label>و<input>داخل این گروه قرار گرفته.
📌 نتیجه: مثال بالا به صورت زیر نمایش داده میشه.
🔽 تگ datalist
تگ <datalist> برای ساختن لیست پیشنهادات هوشمند برای ورودی‌ها (مثل <input>) استفاده میشه. این تگ به کاربر این امکان رو می‌ده که هنگام تایپ کردن در فیلد ورودی، چند گزینه پیشنهادی ببینه و راحت‌تر انتخاب کنه در حالی که همچنان می‌تونه هر مقدار دلخواه دیگه‌ای هم تایپ کنه.
✍️ ساختار کلی تگ datalist
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>✅ توضیح کد:
<input list="browsers">: مشخص می‌کنه که این فیلد ورودی از یک لیست پیشنهاد به نامbrowsersاستفاده می‌کنه.<datalist id="browsers">: لیستی از گزینه‌های پیشنهادی که با فیلد ورودی بالا لینک شده.<option value="...">: هر گزینه پیشنهادی در لیست.
📌 نتیجه: کاربر موقع تایپ در این فیلد، مثلاً اگر F تایپ کنه، گزینه‌های «Firefox» و «Safari» رو به عنوان پیشنهاد می‌بینه. ولی همچنان می‌تونه مثلاً بنویسه: Brave.
ویژگی‌ها:
id: باید با ویژگی list تو تگ input مرتبط باشه تا datalist برای اون ورودی عمل کنه.
🔘 تگ option
هر مقدار که درون تگ option قرار داره، به عنوان یک پیشنهاد به کاربر نمایش داده میشه. کاربر می‌تونه یکی از این گزینه‌ها را انتخاب کنه یا مقداری دیگر وارد کنه.
مثال ساده:
<label for="browser">مرورگر خود را انتخاب کنید:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>📌 نتیجه: در این مثال، کاربر می‌تونه یکی از مرورگرهای لیست‌شده را انتخاب کنه یا نام مرورگر دیگری را به‌صورت دستی وارد کنه.
تگ <option> برای تعریف یک گزینه انتخابی درون لیست‌های کشویی استفاده میشه. این تگ معمولاً درون دو تگ دیگه قرار می‌گیره:
- تگ
<datalist>برای پیشنهادات هوشمند هنگام تایپ در یک فیلد ورودی - تگ
<select>برای لیست کشویی معمولی
🎯 ویژگی‌های کاربردی تگ option
| ویژگی | توضیح |
|---|---|
value | مقداری که هنگام ارسال فرم به سرور فرستاده میشه. اگر حذف بشه، مقدار متن داخل گزینه استفاده میشه. |
disabled | غیرفعال می‌کنه گزینه رو (کاربر نمی‌تونه انتخابش کنه). |
selected | این گزینه رو به‌صورت پیش‌فرض انتخاب می‌کنه (فقط در <select> کاربرد داره). |
label | برچسبی مستقل از متن داخلی برای گزینه تعریف می‌کنه (بیشتر در برخی APIها کاربرد داره). |
🔽 تگ select
تگ <select> برای ساخت منوی کشویی (Drop-down) استفاده میشه. این منو به کاربر اجازه می‌ده یک یا چند گزینه از بین چندین مقدار انتخاب کنه. گزینه‌ها با استفاده از تگ‌های <option> داخلش تعریف می‌شن.
✅ ساختار تگ select
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>🔹 این کد یه لیست کشویی می‌سازه که کاربر می‌تونه یکی از گزینه‌ها رو انتخاب کنه.
🧩 اتریبیوت های تگ select
name: نامی که برای شناسایی داده‌های انتخاب شده در هنگام ارسال فرم استفاده میشه.id: برای شناسایی منوی کشویی و امکان اتصال آن به یک برچسب (label).multiple: اگر تنظیم بشه، به کاربر اجازه می‌ده تا چندین گزینه را به طور همزمان انتخاب کنه.size: تعداد گزینه‌هایی که همزمان در منوی کشویی قابل مشاهده هستن.
📌 ساده و یک انتخاب:
<label for="cars">یک ماشین انتخاب کنید:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>📌 گزینه‌ی پیش‌فرض انتخاب‌شده:
<select name="cars" id="cars">
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>🔹 گزینه‌ی “Volvo” به‌طور خودکار انتخاب‌شده است.
📌 انتخاب چندگانه (با multiple):
<select name="cars" id="cars" multiple size="4">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>در این مثال، کاربر می‌تونه بیش از یک گزینه انتخاب کنه و چهار گزینه به‌طور همزمان قابل مشاهده هست.
⚠️ نکات مهم:
- تگ
<select>همیشه باید شامل تگ‌های<option>باشه. - برای انتخاب چند گزینه، باید هم
multipleو همsizeاستفاده بشه تا تجربه کاربری بهتر باشه.
تگ optgroup
تگ optgroup در HTML برای دسته‌بندی گزینه‌های داخل یک منوی کشویی select استفاده میشه. این تگ اجازه می‌ده تا گزینه‌ها را در گروه‌های مختلف مرتب کنی، که باعث میشه لیست انتخابی سازمان‌دهی شده‌تر و خواناتر باشه.
<select name="cars" id="cars">
<optgroup label="برندهای اروپایی">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
</optgroup>
<optgroup label="برندهای آسیایی">
<option value="toyota">Toyota</option>
<option value="hyundai">Hyundai</option>
<option value="kia">Kia</option>
</optgroup>
</select>🎨 خروجی این کد در مرورگر:
- یک منوی کشویی با دو دسته‌بندی:
▸ برندهای اروپایی
▸ برندهای آسیایی - هر دسته شامل چند گزینه قابل انتخابه.
🧮 تگ output : نمایش خروجی عملیات در فرم‌ها
تگ <output> برای نمایش نتیجه‌ی یک محاسبه یا عملیات (معمولاً با جاوااسکریپت یا از طریق فرم‌ها) استفاده میشه.
این تگ معمولاً در کنار فرم‌ها میاد و خروجی تعامل‌های کاربر رو نشون می‌ده، بدون اینکه نیاز باشه چیزی دستی وارد بشه.
✅ کاربرد تگ output
- نمایش نتیجه‌ی جمع دو عدد وارد شده توسط کاربر
- نمایش نتیجه‌ی انتخاب‌ها
- نمایش خروجی عملیات ریاضی یا منطقی
- یا هر چیز پویا که نیاز به نمایش خروجی تو صفحه داره.
📦 ساختار ساده تگ output:
<form oninput="result.value = Number(a.value) + Number(b.value)">
<input type="number" name="a" id="a"> +
<input type="number" name="b" id="b"> =
<output name="result" for="a b"></output>
</form>در این مثال:
- دو عدد رو وارد می‌کنی،
- حاصل جمعشون توی تگ
<output>نشون داده میشه بدون نیاز به کلیک روی دکمه.
⚠️ داخل تگ form از کدهای جاوااسکریپت استفاده شده.
💼 مثالای خفن برای فرم‌سازی با تگ form
📌 فرم ثبت‌نام
<form action="/signup" method="POST">
<label for="name">اسمت:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email" required><br>
<button type="submit">ثبت‌نام کن</button>
</form>📌 فرم آپلود فایل
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="file">فایلت رو انتخاب کن:</label>
<input type="file" id="file" name="file" accept=".pdf"><br>
<button type="submit">آپلود کن</button>
</form>🎯 جمع‌بندی: فرم‌ها رو حرفه‌ای بساز و وب رو فتح کن!
حالا که تگ <form> و همه تگ‌های مرتبطش رو مثل یه حرفه‌ای بلدی، وقتشه دست به کار شی ! با تگ <form> می‌تونی فرم‌های تماس، ثبت‌نام، یا جستجوی شگفت‌انگیز بسازی که کاربرا رو نگه داره و گوگل رو عاشق سایتت کنه.
این مقاله همه‌چیز رو بهت داد از اتریبیوت‌ها و تگ‌های داخلش تا سئو و نکات حرفه‌ای تا بهترین فرم‌های دنیا رو خلق کنی. پس معطل نکن، یه فرم بساز و نشون بده چقدر حرفه‌ای شدی ما تا آخر خط باهاتیم ! در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.
💬 ایده‌هات رو فریاد بزن
نظرت راجب تگ <form> چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو تیم حرفه‌ای پشتیبانی با جون و دل جوابت رو می‌ده!
شهرام نجفی
همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.
برای نوشتن دیدگاه باید وارد بشوید.