در حال بارگذاری...

انواع input در HTML

عناصر فرم مشخص کردند کدام تگ‌ها داخل form می‌آیند. انواع input روی یک تگ زوم می‌کنند: input. ویژگی type چهرهٔ کنترل را برمی‌گزیند. این جلسه کاتالوگ type است. کمک‌هایی مثل required بعدی‌اند.

چرا انواع input مهم‌اند

type=text تقریباً برای همه کار می‌کند، اما موبایل صفحه‌کلید غلط می‌دهد، رمز دیده می‌ماند و تاریخ رشتهٔ آزاد می‌شود. جور کردن type با داده، تایپ و بررسی سبک و شکل مقدار ارسالی را بهتر می‌کند.

پاسخ مستقیم

۱) type را روی input بگذارید — text، email، password، number، checkbox، radio، date، file، hidden، submit. ۲) هر کنترل دیدنی را با label جفت کنید. ۳) رادیوهای یک پاسخ name مشترک دارند؛ checkbox مستقل می‌ماند. ۴) برای ارسال ترجیحاً button type=submit. ۵) type فقط چهرهٔ کنترل است — action/method و attributeهای بعدی لایهٔ جدا هستند.

📊 Starter input types

type	Use	Beginner tip
text	General single-line text	Default when nothing fitter exists
email	Email addresses	Mobile email keyboard + light format check
password	Masked secrets	Never store the real password in page source
number	Numeric values	Good for ages/qty — still validate on the server
checkbox	Independent on/off	Many can be checked at once
radio	One choice in a named group	Same name = one group
date	Calendar date	Browser UI varies; value is YYYY-MM-DD style
file	Upload a file	Needs multipart form encoding for real uploads
hidden	Value not shown	Still submitted with name/value

ثبت‌نام: فیلدهای تایپ‌شده

فرم عضویت کوچک: ایمیل، رمز، سن عددی، تاریخ شروع. هر فیلد label و id و name خودش را دارد؛ type رابط را عوض می‌کند.

Signup with typed inputs

html

<form action="/join" method="post">
<label for="mail">Email</label>
<input id="mail" name="mail" type="email">

<label for="pw">Password</label>
<input id="pw" name="pw" type="password">

<label for="age">Age</label>
<input id="age" name="age" type="number">

<label for="start">Start date</label>
<input id="start" name="start" type="date">

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

خواندن دموی ثبت‌نام

type=email UI ایمیل و بررسی سبک
type=password نویسه‌ها را می‌پوشاند
type=number ورود عددی
type=date کنترل تاریخ
label با for/id؛ name کلید ارسال است
action/method از درس‌های قبل

نظرسنجی: checkbox، radio و file

کلیدها و آپلود همان تگ input با type متفاوت‌اند. رادیوها name=plan مشترک دارند. checkbox مستقل است. type=file انتخابگر فایل باز می‌کند — آپلود واقعی به encoding درست نیاز دارد.

Survey checkbox radio file

html

<form action="/survey" method="post" enctype="multipart/form-data">
<label>
<input type="checkbox" name="news" value="yes">
Newsletter
</label>

<fieldset>
<legend>Plan</legend>
<label>
<input type="radio" name="plan" value="free" checked>
Free
</label>
<label>
<input type="radio" name="plan" value="pro">
Pro
</label>
</fieldset>

<label for="resume">Resume</label>
<input id="resume" name="resume" type="file">

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

خواندن دموی نظرسنجی

checkbox خبرنامه مستقل است
رادیوهای هم‌نام یک انتخاب انحصاری‌اند
پیچیدن در label متن را قابل کلیک می‌کند
file برای آپلود؛ enctype=multipart کمک می‌کند
fieldset فقط گروه Plan را قاب می‌کند — تمرکز type است
درس بعد attributeهایی مثل required می‌آورد

انتخاب type درست

متن کوتاه آزاد: text
ایمیل/رمز: email/password — نه text برای راز
تعداد یا سن: number
یکی از چند گزینهٔ انحصاری: radio با name مشترک
کلید مستقل: checkbox
روز تقویم: date
پیوست: file (+ multipart)
مقدار پنهان: hidden
متن چندخطی هنوز textarea است — نه type روی input

تمرین — عوض کردن type

دموی ثبت‌نام؛ email را text کنید و تفاوت را ببینید
موقتاً password را text کنید — نویسه‌ها دیده می‌شوند
فیلد number دوم برای تعداد
رادیوها با name متفاوت سپس اصلاح به name مشترک
Newsletter و Pro را بزنید؛ نام‌های مورد انتظار را بنویسید
file بدون multipart — هدف آگاهی است
جمله: type چهرهٔ input را انتخاب می‌کند؛ عناصر فرم و attribute لایه‌های همسایه‌اند

اشتباهات آسان

text برای رمز تا راز دیده بماند
رادیو با nameهای متفاوت وقتی باید یک گروه باشند
checkbox/radio بدون label
انتظار آپلود file بدون encoding درست
خیال اینکه type جای action/method یا name را می‌گیرد
input برای متن بلند به‌جای textarea
قاطی کردن این کاتالوگ با درس attribute بعدی

خلاصه

یک تگ input — چهره‌های بسیار با type
type را با داده جور کنید
رادیوها name مشترک؛ checkbox مستقل
همیشه label بزنید
عناصر فرم (قبل) و attributeهای input (بعد) لایهٔ جدا هستند
بعدی: ویژگی‌های input

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود