قسمت ۱۴ – انواع input در HTML

تگ input در html یک المان خالی و همه‌کاره برای گرفتن ورودی از کاربر است که رفتار و ظاهرش را اتریبیوت type تعیین می‌کند؛ با تغییر type، همان input می‌تواند فیلد متن، ایمیل، تلفن، تاریخ، چک‌باکس، دکمه رادیویی یا آپلود فایل باشد. اگر type را ننویسید، مقدار پیش‌فرض text است.

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

در این قسمت انواع type input را دسته‌بندی‌شده یاد می‌گیرید، می‌بینید input email و tel چرا کیبورد مناسب موبایل را باز می‌کنند، input date و تاریخ شمسی چه وضعیتی دارند، checkbox و radio را با fieldset گروه‌بندی می‌کنید و کاربرد درست placeholder، inputmode و autocomplete را می‌فهمید. این قسمت ادامه مستقیم قسمت ۱۳: فرم در HTML؛ تگ form و label است؛ همه فیلدهای این قسمت داخل همان form و با label قرار می‌گیرند.

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

تگ input در html یک فیلد ورودی تک‌خطی یا کنترل تعاملی است که مقدارش با اتریبیوت name هنگام ارسال فرم به سرور فرستاده می‌شود. input تگ پایانی ندارد و برچسب آن با یک <label> جداگانه نوشته می‌شود.

<label for="fname">نام</label>
<input type="text" id="fname" name="first_name">

<!-- بدون type هم همان text است -->
<input id="nickname" name="nickname">

طبق مستندات MDN درباره تگ input، اگر type ننویسید یا مقداری بنویسید که مرورگر نمی‌شناسد، input مثل type=”text” رفتار می‌کند. همین ویژگی باعث می‌شود استفاده از typeهای جدید امن باشد: مرورگری که مثلاً type=”date” را نشناسد، یک فیلد متنی ساده نمایش می‌دهد و فرم از کار نمی‌افتد.

انواع type input کدام‌اند؟

HTML امروز بیش از ۲۰ مقدار برای type input دارد که در پنج گروه جا می‌گیرند: متنی (text، email، tel، url، password، search)، عددی (number، range)، تاریخ و زمان (date، time، datetime-local، month، week)، انتخابی (checkbox، radio) و سایر (file، color، hidden و دکمه‌ها). جدول زیر مرجع کامل آن‌هاست:

type	کار	کیبورد یا کنترل موبایل	اعتبارسنجی خودکار
text	متن تک‌خطی (پیش‌فرض)	کیبورد عادی	ندارد
email	آدرس ایمیل	کیبورد با @ و نقطه	قالب ایمیل
tel	شماره تلفن	صفحه‌کلید عددی تلفن	ندارد (قالب‌ها متنوع‌اند)
url	آدرس اینترنتی	کیبورد با / و .com	قالب URL کامل
password	رمز عبور	کیبورد عادی، متن پنهان	ندارد
search	عبارت جستجو	دکمه «جستجو» در کیبورد	ندارد
number	عدد با دکمه‌های کم و زیاد	کیبورد عددی	min، max، step
range	اسلایدر انتخاب عدد	اسلایدر	محدوده min تا max
date	تاریخ	انتخابگر تاریخ مرورگر	min، max
time	ساعت	انتخابگر ساعت	min، max، step
datetime-local	تاریخ و ساعت بدون منطقه زمانی	انتخابگر ترکیبی	min، max
month / week	ماه / هفته	انتخابگر (پشتیبانی متفاوت)	min، max
checkbox	انتخاب مستقل بله/خیر	تیک	required
radio	یک انتخاب از چند گزینه	دکمه رادیویی	required روی گروه
file	انتخاب و آپلود فایل	انتخاب فایل یا دوربین	accept، required
color	انتخاب رنگ	انتخابگر رنگ	قالب hex
hidden	مقدار پنهان برای ارسال	نمایش داده نمی‌شود	ندارد
submit / reset / button / image	دکمه‌ها	دکمه	ندارد

input email، tel، url و password چه تفاوتی دارند؟

input email قالب آدرس ایمیل را بررسی می‌کند و در موبایل کیبوردی با @ نشان می‌دهد؛ tel صفحه‌کلید عددی تلفن را باز می‌کند اما چون قالب شماره‌ها در کشورها متفاوت است، قالب را بررسی نمی‌کند؛ url آدرس کامل با پروتکل را می‌خواهد و password متن تایپ‌شده را پنهان می‌کند.

<label for="u-email">ایمیل</label>
<input type="email" id="u-email" name="email"
       autocomplete="email" dir="ltr">

<label for="u-phone">شماره موبایل</label>
<input type="tel" id="u-phone" name="mobile"
       autocomplete="tel" dir="ltr" placeholder="0912xxxxxxx">

<label for="u-site">آدرس وب‌سایت</label>
<input type="url" id="u-site" name="website" dir="ltr"
       placeholder="https://example.com">

<label for="u-pass">رمز عبور</label>
<input type="password" id="u-pass" name="password"
       autocomplete="new-password">

در فرم‌های فارسی، فیلدهایی که محتوای لاتین دارند (ایمیل، موبایل، آدرس سایت) را با dir="ltr" چپ‌چین کنید تا کاربر هنگام تایپ، متن را در جهت طبیعی ببیند. اتریبیوت autocomplete هم به مرورگر و مدیر رمز عبور می‌گوید چه چیزی را پیشنهاد دهد؛ مثلاً new-password در فرم ثبت‌نام باعث می‌شود مرورگر رمز قوی پیشنهاد کند.

نکته: اعتبارسنجی input email فقط قالب کلی (مثل وجود @ و دامنه) را بررسی می‌کند، نه اینکه آدرس واقعاً وجود دارد. بررسی نهایی همیشه باید در سرور انجام شود. جزئیات اعتبارسنجی را در قسمت ۱۶ می‌بینید.

input number برای کدام اعداد مناسب است؟

input number فقط برای مقدارهای واقعاً عددی مناسب است که کم و زیاد کردنشان معنا دارد؛ مثل تعداد کالا یا سن. برای شماره‌هایی که «عدد» نیستند، مثل کد پستی، کد ملی، شماره کارت یا کد تأیید پیامکی، از type=”text” همراه inputmode="numeric" استفاده کنید.

دلیلش این است که input number صفرهای ابتدای عدد را ممکن است حذف کند، با چرخ ماوس مقدار را تغییر می‌دهد، دکمه‌های کم و زیاد بی‌معنا نمایش می‌دهد و فاصله یا خط تیره را نمی‌پذیرد. inputmode="numeric" همان کیبورد عددی موبایل را باز می‌کند، بدون این مشکلات:

<label for="qty">تعداد</label>
<input type="number" id="qty" name="qty" min="1" max="10" step="1" value="1">

<label for="sugar">میزان شکر</label>
<input type="range" id="sugar" name="sugar" min="0" max="3" step="1" value="1">

<!-- کد ملی یا کد پستی: number نه! -->
<label for="postal">کد پستی</label>
<input type="text" id="postal" name="postal_code"
       inputmode="numeric" dir="ltr" autocomplete="postal-code">

اتریبیوت‌های min، max و step محدوده و گام مقدار را برای number، range و فیلدهای تاریخ و زمان تعیین می‌کنند. یک نکته مهم برای سایت‌های فارسی: مقدار ارسالی input number همیشه با رقم لاتین است، حتی اگر کاربر با کیبورد فارسی تایپ کند؛ مرورگرها در پذیرش رقم فارسی در این فیلد رفتار یکسانی ندارند، پس در سمت سرور هم رقم‌های فارسی را به لاتین تبدیل کنید.

input date در فرم فارسی چطور کار می‌کند؟

input date یک انتخابگر تاریخ بومی مرورگر نمایش می‌دهد، اما مقدار ارسالی آن همیشه تاریخ میلادی با قالب YYYY-MM-DD است. اینکه انتخابگر تقویم شمسی نشان دهد یا میلادی، به مرورگر و تنظیمات زبان سیستم‌عامل کاربر بستگی دارد و قابل کنترل با HTML نیست.

<label for="visit-date">تاریخ مراجعه</label>
<input type="date" id="visit-date" name="visit_date"
       min="2026-11-01" max="2026-12-31">

<label for="visit-time">ساعت</label>
<input type="time" id="visit-time" name="visit_time"
       min="09:00" max="18:00" step="900">

<label for="birth-month">ماه تولد</label>
<input type="month" id="birth-month" name="birth_month">

برای سایت‌های ایرانی این یعنی دو انتخاب: اگر کاربران شما با تقویم میلادی مشکلی ندارند یا تاریخ فقط برای سیستم مهم است، input date بومی سریع‌ترین و دسترس‌پذیرترین گزینه است. اگر نمایش تقویم شمسی ضروری است (مثل نوبت‌دهی کلینیک)، معمولاً از یک انتخابگر تاریخ شمسی جاوااسکریپتی استفاده می‌شود که در پشت صحنه مقدار را به میلادی تبدیل می‌کند. در هر حالت، مقدار min و max را هم باید به میلادی بنویسید. اتریبیوت step در time بر حسب ثانیه است؛ step="900" یعنی فاصله ۱۵ دقیقه‌ای.

تفاوت checkbox و radio چیست؟

checkbox برای انتخاب‌های مستقل است که کاربر می‌تواند هیچ، یک یا چند گزینه را تیک بزند؛ radio برای انتخاب دقیقاً یک گزینه از یک گروه است. همه radioهای یک گروه باید name یکسان داشته باشند تا مرورگر بداند با انتخاب یکی، بقیه از حالت انتخاب خارج شوند.

<fieldset>
  <legend>اندازه نوشیدنی</legend>
  <label><input type="radio" name="size" value="s"> کوچک</label>
  <label><input type="radio" name="size" value="m" checked> متوسط</label>
  <label><input type="radio" name="size" value="l"> بزرگ</label>
</fieldset>

<fieldset>
  <legend>افزودنی‌ها</legend>
  <label><input type="checkbox" name="extras" value="cream"> خامه</label>
  <label><input type="checkbox" name="extras" value="cinnamon"> دارچین</label>
</fieldset>

<label>
  <input type="checkbox" name="terms" value="yes" required>
  قوانین سایت را خوانده‌ام و می‌پذیرم
</label>

چند نکته مهم در این مثال: هر گروه گزینه داخل <fieldset> با یک <legend> قرار گرفته تا صفحه‌خوان سؤال گروه («اندازه نوشیدنی») را همراه هر گزینه اعلام کند. اتریبیوت checked گزینه پیش‌فرض را انتخاب می‌کند. اگر value ننویسید، مقدار ارسالی on است که معمولاً بی‌معناست؛ پس همیشه value بنویسید. طبق MDN، checkbox و radio تیک‌نخورده اصلاً ارسال نمی‌شوند. همچنین در گروه radio، کاربر کیبورد با کلیدهای جهت‌نما بین گزینه‌ها جابه‌جا می‌شود. fieldset را در قسمت ۱۵ کامل‌تر بررسی می‌کنیم.

input file، color و hidden چه کاربردی دارند؟

input file به کاربر اجازه انتخاب و آپلود فایل می‌دهد و با accept نوع فایل مجاز و با multiple انتخاب چند فایل را تعیین می‌کنید؛ input color انتخابگر رنگ بومی را نمایش می‌دهد و input hidden مقداری را ارسال می‌کند که کاربر نمی‌بیند.

<label for="avatar">تصویر پروفایل</label>
<input type="file" id="avatar" name="avatar"
       accept="image/png, image/jpeg, image/webp">

<label for="docs">مدارک (چند فایل)</label>
<input type="file" id="docs" name="docs[]" multiple accept=".pdf">

<label for="brand-color">رنگ برند</label>
<input type="color" id="brand-color" name="brand_color" value="#0f766e">

<input type="hidden" name="branch_id" value="12">

یادتان باشد فرمی که input file دارد باید method="post" و enctype="multipart/form-data" داشته باشد (قسمت ۱۳). اتریبیوت accept فقط فهرست فایل‌ها را در پنجره انتخاب فیلتر می‌کند و امنیتی ایجاد نمی‌کند؛ نوع و حجم فایل باید در سرور هم بررسی شود. input hidden هم «مخفی» به معنای امن نیست؛ کاربر می‌تواند مقدارش را در DevTools ببیند و تغییر دهد، پس هرگز داده حساس یا قیمت را در آن به سرور اعتماد نکنید.

placeholder، inputmode و autocomplete را کجا استفاده کنیم؟

placeholder یک نمونه کوتاه از قالب مقدار را داخل فیلد خالی نشان می‌دهد؛ inputmode نوع کیبورد مجازی موبایل را بدون تغییر رفتار فیلد تعیین می‌کند؛ و autocomplete به مرورگر می‌گوید مقدار فیلد چه نوع اطلاعاتی است تا بتواند آن را خودکار پر کند.

<label for="otp">کد تأیید پیامکی</label>
<input type="text" id="otp" name="otp"
       inputmode="numeric" autocomplete="one-time-code"
       maxlength="6" dir="ltr">

<label for="addr">آدرس</label>
<input type="text" id="addr" name="address"
       autocomplete="street-address" enterkeyhint="next">

همان‌طور که در قسمت قبل گفتیم، placeholder جایگزین label نیست و نباید اطلاعات ضروری در آن بنویسید. مقدار one-time-code برای autocomplete به برخی گوشی‌ها اجازه می‌دهد کد پیامکی را مستقیم پیشنهاد دهند؛ این قابلیت برای فرم‌های ورود با پیامک که در سایت‌های ایرانی رایج‌اند بسیار مفید است. اتریبیوت enterkeyhint هم برچسب کلید Enter کیبورد موبایل را تعیین می‌کند (مثل «بعدی» یا «ارسال»).

اتریبیوت	کار	نمونه مقدار	نکته
placeholder	نمونه قالب داخل فیلد خالی	مثلاً اصفهان	جایگزین label نیست
inputmode	نوع کیبورد مجازی	numeric، decimal، tel، email	اعتبارسنجی انجام نمی‌دهد
autocomplete	نوع اطلاعات برای تکمیل خودکار	name، email، tel، one-time-code	تجربه کاربری و دسترس‌پذیری بهتر
value	مقدار اولیه یا مقدار ارسالی	متن یا عدد	برای checkbox و radio ضروری
checked	انتخاب پیش‌فرض	بولی	فقط checkbox و radio
min / max / step	محدوده و گام	min="1"	عدد، range، تاریخ و زمان
maxlength	حداکثر تعداد کاراکتر	6	متن، تلفن، رمز
accept / multiple	نوع فایل / چند انتخاب	image/*	فقط file (multiple در email هم)
readonly / disabled	فقط‌خواندنی / غیرفعال	بولی	مقدار disabled ارسال نمی‌شود
enterkeyhint	برچسب کلید Enter موبایل	next، send، search	فقط ظاهر کلید

دکمه‌ها؛ input submit یا button؟

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

<label for="s">جستجوی محصول</label>
<input type="search" id="s" name="s" placeholder="مثلاً کیک شکلاتی">

<!-- دکمه‌ها: button بهتر از input است -->
<button type="submit">ثبت سفارش</button>
<button type="reset">پاک کردن فرم</button>

<!-- معادل قدیمی‌تر -->
<input type="submit" value="ثبت سفارش">

از تجربه تیم siloow: فیلدهای ورودی در موبایل

در وب‌اپلیکیشن سفارش آنلاین چندشعبه‌ای و قالب کلینیک با نوبت‌دهی آنلاین که تیم siloow ساخته است، بیشتر کاربران فرم را با موبایل پر می‌کنند. یکی از مشکلاتی که در نسخه‌های اولیه دیدیم، فیلد شماره موبایل با type=”number” بود: صفر ابتدای شماره در برخی حالت‌ها حذف می‌شد و در دسکتاپ با اسکرول ماوس شماره تغییر می‌کرد. با تغییر آن به type=”tel” همراه dir=”ltr” و autocomplete=”tel”، و استفاده از inputmode=”numeric” با autocomplete=”one-time-code” برای کد تأیید پیامکی، هم کیبورد درست باز شد و هم کاربر کد پیامکی را مستقیم از پیشنهاد کیبورد انتخاب می‌کرد. برای انتخاب تاریخ نوبت هم به‌خاطر نیاز کاربران به تقویم شمسی، انتخابگر اختصاصی ساختیم که مقدار میلادی استاندارد را به سرور می‌فرستد.

اشتباهات رایج در استفاده از تگ input

• استفاده از type=”number” برای موبایل، کد ملی، کد پستی و شماره کارت.
• استفاده از type=”text” برای ایمیل و از دست دادن کیبورد مناسب و اعتبارسنجی.
• name متفاوت برای radioهای یک گروه؛ همه با هم قابل انتخاب می‌شوند.
• جا انداختن value در checkbox و radio و ارسال مقدار بی‌معنای on.
• checkbox و radio بدون label یا گروه بدون fieldset و legend.
• اعتماد به input hidden یا accept برای امنیت.
• نوشتن متن راهنمای مهم فقط در placeholder.

محدودیت‌های تگ input

input فقط ورودی تک‌خطی می‌گیرد؛ برای متن چندخطی از textarea و برای انتخاب از فهرست طولانی از select استفاده کنید که در قسمت بعد آموزش می‌دهیم. ظاهر کنترل‌های بومی مثل date، color و file در مرورگرها متفاوت است و استایل‌دهی کامل آن‌ها با CSS محدود است. پشتیبانی type‌هایی مثل month و week هم در همه مرورگرها یکسان نیست؛ قبل از استفاده، جدول سازگاری MDN را بررسی کنید.

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

1. یک فرم ثبت‌نام با نام، ایمیل، موبایل، رمز عبور و تاریخ تولد بسازید و type مناسب هر فیلد را انتخاب کنید.
2. فرم را در موبایل (یا حالت موبایل DevTools) باز کنید و کیبورد هر فیلد را بررسی کنید.
3. یک فرم سفارش قهوه با radio برای اندازه و checkbox برای افزودنی‌ها، هرکدام داخل fieldset بسازید.
4. یک فیلد کد تأیید شش‌رقمی با inputmode و autocomplete مناسب اضافه کنید.
5. یک فیلد آپلود تصویر بسازید که فقط فایل‌های JPEG، PNG و WebP را نشان دهد.

جمع‌بندی و خلاصه

• تگ input در html با اتریبیوت type رفتار و کیبورد موبایل را تعیین می‌کند؛ پیش‌فرض text است.
• برای ایمیل input email، برای تلفن tel و برای آدرس سایت url را انتخاب کنید.
• number فقط برای مقدار عددی واقعی است؛ برای کدها از text با inputmode=”numeric” استفاده کنید.
• input date مقدار میلادی می‌فرستد و نمایش تقویم شمسی تضمین‌شده نیست.
• radioهای یک گروه name یکسان دارند و checkbox و radio همیشه value و label می‌خواهند.

همه قسمت‌های دوره در صفحه کدپرس فهرست شده‌اند. برای مرور مسیر یادگیری از ابتدا به قسمت ۱: HTML چیست؟ برگردید و اگر فرم سفارش یا نوبت‌دهی حرفه‌ای برای کسب‌وکارتان لازم دارید، خدمات طراحی سایت siloow را ببینید. نقش فرم‌های بهینه در سرعت و تجربه کاربری را هم در مقاله بهینه سازی سایت توضیح داده‌ایم. در قسمت بعد، «قسمت ۱۵ – select، textarea، button و fieldset در HTML»، بقیه کنترل‌های فرم را یاد می‌گیرید.

منابع

• MDN: The HTML Input element
• MDN: inputmode global attribute
• MDN: HTML autocomplete attribute
• web.dev: Learn Forms

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