HTML Input Attributes

ویژگی‌ها (Attributes) برای کنترل رفتار و ظاهر ورودی‌ها استفاده می‌شن.

🔹 1. value

مقدار پیش‌فرض فیلد ورودی.

<input type="text" value="متن پیش‌فرض">

🔹 2. name

نام فیلد برای ارسال داده در فرم (ضروری برای بک‌اند).

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

🔹 3. placeholder

متن راهنما داخل فیلد.

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

🔹 4. required

الزامی بودن پر کردن فیلد.

<input type="email" required>

🔹 5. readonly

فقط خواندنی (کاربر نمی‌تونه تغییر بده).

<input type="text" value="فقط خواندنی" readonly>

🔹 6. disabled

غیرفعال کردن فیلد (کاربر نمی‌تونه استفاده کنه).

<input type="text" value="غیرفعال" disabled>

🔹 7. maxlength / minlength

تعیین حداقل و حداکثر تعداد کاراکتر.

<input type="text" minlength="3" maxlength="10">

🔹 8. min / max

برای تعیین بازه عددی یا زمانی.

<input type="number" min="1" max="10">
<input type="date" min="2025-01-01" max="2025-12-31">

🔹 9. step

برای تعیین گام مقادیر عددی.

<input type="number" min="0" max="100" step="5">

🔹 10. autofocus

به‌طور خودکار هنگام بارگذاری صفحه فوکوس می‌گیره.

<input type="text" autofocus>

🔹 11. autocomplete

پیشنهاد خودکار مرورگر برای ورودی.

<input type="text" name="username" autocomplete="on">
<input type="password" name="password" autocomplete="off">

🔹 12. pattern

الگوی اعتبارسنجی با Regex.

<input type="text" pattern="[A-Za-z]{3,}" title="حداقل ۳ حرف وارد کنید">

🔹 13. multiple

امکان انتخاب چند فایل یا چند ایمیل.

<input type="file" multiple>
<input type="email" multiple>

🔹 14. size

اندازه فیلد ورودی (تعداد کاراکتر نمایشی).

<input type="text" size="30">

🔹 15. list

لیست مقادیر پیشنهادی (با استفاده از <datalist>).

<input list="langs" name="lang">
<datalist id="langs">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
</datalist>

🔹 16. checked

برای پیش‌فرض انتخاب شدن checkbox یا radio.

<input type="radio" name="gender" value="male" checked> مرد

🔹 17. form

اتصال ورودی به یک فرم خاص (خارج از <form>).

<form id="myForm"></form>
<input type="text" form="myForm">

🔹 18. height و width

تنظیم اندازه فیلد ورودی از نوع image.

<input type="image" src="btn.png" width="100" height="50">

✅ جمع‌بندی

مهم‌ترین Input Attributes در HTML شامل:

  • کنترل مقدار و ظاهر → value, placeholder, size

  • کنترل اعتبارسنجی → required, min, max, step, pattern, maxlength

  • کنترل وضعیت → readonly, disabled, checked, multiple

  • کاربرپسند → autofocus, autocomplete, list