input: سوئیس‌آرمی‌نایف فرم‌های HTML

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

input چیه؟

<input type="text" name="fullname">

تگ input یه تگ خالیه (Void Element) که برای گرفتن یه مقدار از کاربر استفاده می‌شه. ویژگی type مشخص می‌کنه این ورودی دقیقاً چه شکلی و چه رفتاری داشته باشه. اگه type رو ننویسی، مقدار پیش‌فرضش text در نظر گرفته می‌شه.

type="text": متن ساده

<input type="text" name="fullname" placeholder="نام کامل خود را وارد کنید">

ساده‌ترین و پرکاربردترین نوع ورودی، برای گرفتن متن آزاد مثل نام، آدرس یا هر متن کوتاه دیگه. ویژگی placeholder یه متن راهنمای کم‌رنگ داخل فیلد نشون می‌ده که با شروع تایپ کاربر ناپدید می‌شه.

type="email": آدرس ایمیل

<input type="email" name="user_email" placeholder="example@mail.com">

این نوع مخصوص آدرس ایمیله. یکی از مزیت‌های مهم HTML5 اینه که خودش به‌صورت خودکار بررسی می‌کنه آیا متن واردشده فرمت یه ایمیل معتبر داره یا نه (مثلاً وجود علامت @). اگه کاربر یه متن نامعتبر بنویسه و بخواد فرم رو ارسال کنه، مرورگر خودش یه پیام خطا نشون می‌ده، بدون نیاز به نوشتن کد جاوااسکریپت جداگانه.

type="password": رمز عبور

<input type="password" name="user_password">

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

type="number": فقط عدد

<input type="number" name="quantity" min="1" max="10">

این نوع فقط اجازه‌ی وارد کردن عدد رو می‌ده و معمولاً با دو تا فلش کوچیک (بالا و پایین) برای افزایش یا کاهش مقدار همراهه. ویژگی‌های min و max هم محدوده‌ی مجاز عدد رو مشخص می‌کنن.

type="tel": شماره تلفن

<input type="tel" name="phone" placeholder="۰۹۱۲۳۴۵۶۷۸۹">

این نوع مخصوص شماره تلفنه. برخلاف type="number"، این نوع اعتبارسنجی خاصی رو فرمت شماره اعمال نمی‌کنه (چون فرمت شماره تلفن تو کشورهای مختلف خیلی متفاوته)، اما تو موبایل، صفحه‌کلید عددی مخصوص شماره‌گیری رو باز می‌کنه که تجربه‌ی کاربری بهتری می‌ده.

type="date": انتخاب تاریخ

<input type="date" name="birthdate">

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

type="checkbox": چک‌باکس

<input type="checkbox" name="agree" id="agree">
<label for="agree">با قوانین و مقررات موافقم</label>

چک‌باکس برای گزینه‌های بله/خیر یا انتخاب چندگانه استفاده می‌شه؛ کاربر می‌تونه تیکش بزنه یا برداره. می‌شه چند چک‌باکس مختلف با name های متفاوت گذاشت تا کاربر بتونه هم‌زمان چند گزینه رو انتخاب کنه.

type="radio": دکمه‌ی رادیویی

<input type="radio" name="gender" value="male" id="male">
<label for="male">مرد</label>

<input type="radio" name="gender" value="female" id="female">
<label for="female">زن</label>

دکمه‌ی رادیویی هم شبیه چک‌باکسه، اما تفاوت اصلیش اینه که فقط اجازه‌ی انتخاب یکی از گزینه‌ها رو می‌ده؛ یعنی اگه چند تا input از نوع radio، مقدار name یکسانی داشته باشن (تو این مثال، هر دو name="gender" دارن)، انتخاب یکی، اون یکی رو خودکار غیرفعال می‌کنه.

type="file": آپلود فایل

<input type="file" name="resume">

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

type="color": انتخاب رنگ

<input type="color" name="favorite_color">

این نوع یه انتخابگر رنگ گرافیکی (Color Picker) نشون می‌ده که کاربر می‌تونه با کلیک روش، رنگ موردنظرش رو از یه پالت انتخاب کنه.

type="range": نوار لغزنده

<input type="range" name="volume" min="0" max="100">

این نوع یه اسلایدر (نوار لغزنده) نشون می‌ده که کاربر می‌تونه با کشیدن یه دستگیره، عددی بین min و max رو انتخاب کنه؛ مثلاً برای تنظیم صدا یا فیلترکردن محدوده‌ی قیمت.

type="search": فیلد جستجو

<input type="search" name="query" placeholder="جستجو در سایت...">

این نوع شبیه text هست، اما معمولاً یه دکمه‌ی کوچیک ضربدر برای پاک‌کردن سریع متن داخلش نشون می‌ده و از نظر معنایی مشخص می‌کنه این فیلد برای جستجوست.

جدول جمع‌بندی مهم‌ترین انواع input

مقدار type کاربرد
text متن آزاد و کوتاه
email آدرس ایمیل با اعتبارسنجی خودکار
password رمز عبور مخفی‌شده
number فقط مقدار عددی
tel شماره تلفن
date انتخاب تاریخ با تقویم گرافیکی
checkbox انتخاب چندگانه (بله/خیر)
radio انتخاب فقط یک گزینه از چند گزینه
file آپلود فایل
color انتخاب رنگ
range انتخاب عدد با نوار لغزنده
search فیلد مخصوص جستجو

یه فرم کامل با چند نوع input

<form action="/register" method="post">
  <input type="text" name="fullname" placeholder="نام کامل">
  <input type="email" name="email" placeholder="ایمیل">
  <input type="password" name="password" placeholder="رمز عبور">
  <input type="date" name="birthdate">
  <input type="checkbox" name="newsletter" id="newsletter">
  <label for="newsletter">عضویت در خبرنامه</label>
  <button type="submit">ثبت‌نام</button>
</form>

چرا استفاده از type مناسب مهمه؟

خیلی از تازه‌کارها فقط از type="text" برای همه‌چیز استفاده می‌کنن، حتی برای ایمیل یا تاریخ. این کار چند تا فرصت مهم رو از دست می‌ده: اعتبارسنجی خودکار مرورگر (مثل email)، صفحه‌کلید مناسب تو موبایل (مثل tel یا number)، و ابزارهای گرافیکی کمکی (مثل تقویم برای date یا پالت رنگ برای color). انتخاب type درست، هم تجربه‌ی کاربری رو بهتر می‌کنه، هم از خطای ورودی جلوگیری می‌کنه.

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

  • استفاده از type="text" برای همه‌ی ورودی‌ها، حتی وقتی type اختصاصی‌تری مثل email یا number وجود داره.
  • استفاده از name یکسان برای چک‌باکس‌هایی که باید مستقل از هم باشن (که باعث تداخل رفتاری می‌شه).
  • فراموش‌کردن name یکسان برای دکمه‌های radio که باید یه گروه واحد رو تشکیل بدن.

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

  • همیشه دقیق‌ترین type ممکن رو برای هر داده انتخاب کن (email برای ایمیل، tel برای تلفن، date برای تاریخ).
  • برای دکمه‌های radio که باید یه گروه واحد باشن، حتماً name یکسان بذار.
  • از placeholder برای راهنمایی کوتاه استفاده کن، اما هیچ‌وقت جایگزین label نکن (این نکته رو تو درس بعد کامل می‌بینیم).

نکته‌ی سئو

فرم‌ها معمولاً مستقیم روی سئو تأثیر ندارن، اما تجربه‌ی کاربری بهتر (مثل اعتبارسنجی صحیح و صفحه‌کلید مناسب موبایل) باعث می‌شه کاربر فرم رو کامل‌تر و با خطای کمتری پر کنه، که به‌طور غیرمستقیم روی نرخ تبدیل (Conversion Rate) سایت تأثیر مثبت داره.

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

انتخاب type درست به فناوری‌های کمکی هم کمک می‌کنه؛ مثلاً صفحه‌خوان‌ها می‌تونن اعلام کنن یه فیلد از نوع «رمز عبور» یا «تاریخ» است، که به کاربر کم‌بینا کمک می‌کنه انتظار درستی از نوع ورودی موردنیاز داشته باشه.

جمع‌بندی

تگ input با تغییر ویژگی type، می‌تواند انواع مختلفی از ورودی‌ها را نمایش دهد؛ از متن ساده و ایمیل گرفته تا تاریخ، رنگ، فایل و نوار لغزنده. انتخاب دقیق‌ترین type برای هر نوع داده، هم تجربه‌ی کاربری را بهبود می‌بخشد، هم اعتبارسنجی خودکار مرورگر را فعال می‌کند و هم به دسترسی‌پذیری فرم کمک می‌کند.