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

ویژگی‌های input در HTML

درس قبل با type چهرهٔ کنترل را برگزید. ویژگی‌های input روی همان تگ رفتار را ریز می‌کنند: راهنما، اجباری، بازه، سقف طول، الگو و فیلد قفل. این جلسه کاتالوگ attribute روزمره است — نه نقشهٔ type دوباره، و نه ترفند form= بعدی.

چرا ویژگی‌های input مهم‌اند

type درست هنوز جا خالی می‌گذارد: فیلد اجباری خالی، سن خارج از بازه، کد خیلی بلند. attributeها با راهنما و بررسی سبک مرورگر پر می‌کنند. در اپ واقعی دادهٔ مهم را روی سرور هم چک کنید.

پاسخ مستقیم

۱) name و id و value را برای سیم‌کشی نگه دارید. ۲) placeholder راهنمای کوتاه داخل فیلد خالی است — جایگزین label نیست. ۳) فیلد اجباری با required. ۴) عدد/تاریخ با min و max و step؛ متن با maxlength؛ گاهی pattern. ۵) readonly دیده می‌شود و معمولاً ارسال می‌شود؛ disabled معمولاً ارسال نمی‌شود. ۶) attribute رفتار type انتخاب‌شده را ریز می‌کند — جایگزین type نیست و از ارتباط form درس بعد جداست.

📊 Handy input attributes

Attribute	Role	Beginner tip
placeholder	Hint text in an empty field	Not a label — always keep a real label
required	Must be filled before submit	Browser may block empty submit
min / max / step	Limits for number/date-like types	Match the type you already chose
maxlength	Max characters for text-like types	Soft cap in the UI; still check on the server
pattern	Allowed character pattern	Keep patterns simple for beginners
disabled	Not usable; usually not submitted	Do not disable fields you still need to send
readonly	Visible, not editable; still submitted	Good for fixed display values

پروفایل: اجباری، راهنما و طول

فرم پروفایل کوچک: نام کامل اجباری با placeholder، نام کاربری با maxlength و pattern ساده، شهر اختیاری. label اجباری می‌ماند؛ attribute فقط قاعده و راهنما می‌افزاید.

Profile with input attributes

html

<form action="/profile" method="post">
<label for="fullname">Full name</label>
<input id="fullname" name="fullname" type="text"
placeholder="Ada Lovelace" required>

<label for="user">Username</label>
<input id="user" name="user" type="text"
maxlength="12" pattern="[A-Za-z0-9_]+"
placeholder="ada_lovelace" required>

<label for="city">City</label>
<input id="city" name="city" type="text"
placeholder="Optional">

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

خواندن دموی پروفایل

required روی نام و نام کاربری
placeholder فقط وقتی خالی است — نام از label است
maxlength=12 سقف تایپ
pattern حروف/رقم/زیرخط
شهر بدون required
type=text از قبل؛ attributeها آن را ریز می‌کنند

رزرو: بازه و فیلد قفل

عدد و تاریخ با min و max و step معنا می‌گیرند. کد readonly دیده می‌ماند و معمولاً ارسال می‌شود؛ promo با disabled معمولاً از payload حذف می‌شود.

Booking ranges and locks

html

<form action="/book" method="post">
<label for="guests">Guests</label>
<input id="guests" name="guests" type="number"
min="1" max="8" step="1" value="2" required>

<label for="night">Night</label>
<input id="night" name="night" type="date"
min="2026-10-01" max="2026-12-31" required>

<label for="code">Booking code</label>
<input id="code" name="code" type="text"
value="BK-1042" readonly>

<label for="promo">Promo (staff only)</label>
<input id="promo" name="promo" type="text"
value="STAFF" disabled>

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

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

min/max/step مهمان و شب را محدود می‌کند
value=2 نقطهٔ شروع قابل تغییر
readonly کد را نگه می‌دارد و معمولاً می‌فرستد
disabled ویرایش و معمولاً ارسال را قطع می‌کند
حد تاریخ فقط با type=date معنا دارد
درس بعد: ارتباط input با form از راه form=id

انتخاب کمک درست

باید پر شود: required
راهنمای خالی: placeholder (+ label واقعی)
بازه عدد/تاریخ: min max step
سقف نویسه: maxlength
قالب ساده: pattern
ببین/نفرست‌نکن‌ویرایش، بفرست: readonly
قفل و معمولاً نفرست: disabled
سیم‌کشی: name id value
type را اینجا دوباره انتخاب نکنید — درس قبل بود

تمرین — سفت کردن فیلد با attribute

دموی پروفایل؛ required را بردارید و خالی بفرستید — سپس برگردانید
placeholder نام را خالی کنید؛ label را نگه دارید
maxlength را ۲۰ کنید
مهمان زیر min یا بالای max
کد را از readonly خارج کنید سپس برگردانید
انتظار ارسال: کد readonly در برابر promo disabled
جمله: attribute رفتار را ریز می‌کند؛ type چهره را انتخاب کرد؛ form= بعدی است

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

placeholder به‌جای label
disable فیلدی که باید ارسال شود
اتکا فقط به required/pattern مرورگر بدون سرور
min/max روی typeهایی که نادیده می‌گیرند
pattern پیچیده برای مبتدی
قاطی با کاتالوگ type قبلی
پرش به form= وقتی فقط required یا بازه لازم است

خلاصه

attribute بعد از type رفتار را ریز می‌کند
ابزار روزمره: required، placeholder، بازه، maxlength، pattern ساده
readonly معمولاً ارسال می‌شود؛ disabled معمولاً نه
placeholder راهنماست؛ label نام می‌دهد
name/id/value را نگه دارید
بعدی: ویژگی form روی input — ارتباط با id فرم

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

آماده شروع

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

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

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

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

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