صفات ورودی در HTML

صفات ورودی (Input Attributes) در HTML

این فصل به توصیف صفات مختلف برای عنصر <input> در HTML می‌پردازد.

صفت value

صفت value در input یک مقدار اولیه برای فیلد ورودی مشخص می‌کند:

مثال فیلدهای ورودی با مقادیر اولیه (پیش‌فرض):

<form>
  <label for="fname">First name:</label><br />
  <input type="text" id="fname" name="fname" value="John" /><br />
  <label for="lname">Last name:</label><br />
  <input type="text" id="lname" name="lname" value="Doe" />
</form>

صفت readonly

صفت readonly در input مشخص می‌کند که یک فیلد ورودی فقط-خواندنی (read-only) است.

یک فیلد ورودی فقط-خواندنی قابل ویرایش نیست (با این حال، کاربر می‌تواند با کلید Tab روی آن برود، آن را هایلایت کند و متن داخل آن را کپی کند).

مقدار یک فیلد ورودی فقط-خواندنی هنگام ارسال فرم، فرستاده خواهد شد!

مثال یک فیلد ورودی فقط-خواندنی:

<form>
  <label for="fname">First name:</label><br />
  <input type="text" id="fname" name="fname" value="John" readonly /><br />
  <label for="lname">Last name:</label><br />
  <input type="text" id="lname" name="lname" value="Doe" />
</form>

صفت disabled

صفت disabled در input مشخص می‌کند که یک فیلد ورودی باید غیرفعال باشد.

یک فیلد ورودی غیرفعال، غیرقابل استفاده و غیرقابل کلیک است.

مقدار یک فیلد ورودی غیرفعال هنگام ارسال فرم، فرستاده نخواهد شد!

مثال یک فیلد ورودی غیرفعال:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

صفت size

صفت size در input، عرض قابل مشاهده‌ی یک فیلد ورودی را بر اساس تعداد کاراکترها مشخص می‌کند.

مقدار پیش‌فرض برای size برابر با 20 است.

نکته: صفت size با انواع ورودی (input types) زیر کار می‌کند: text، search، tel، url، email و password.

مثال تنظیم عرض برای یک فیلد ورودی:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

صفت maxlength

صفت maxlength در input، حداکثر تعداد کاراکترهای مجاز در یک فیلد ورودی را مشخص می‌کند.

نکته: وقتی maxlength تنظیم شده باشد، فیلد ورودی تعداد کاراکتری بیشتر از مقدار مشخص شده را نمی‌پذیرد. با این حال، این صفت هیچ بازخوردی به کاربر نمی‌دهد. بنابراین، اگر می‌خواهید به کاربر هشدار دهید، باید از کد جاوا اسکریپت استفاده کنید.

مثال تنظیم حداکثر طول برای یک فیلد ورودی:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

صفات min و max

صفات min و max در input، مقادیر حداقل و حداکثر را برای یک فیلد ورودی مشخص می‌کنند.

صفات min و max با انواع ورودی زیر کار می‌کنند: number، range، date، datetime-local، month، time و week.

راهنمایی: از صفات max و min با هم استفاده کنید تا یک بازه از مقادیر مجاز ایجاد کنید.

مثال تنظیم یک تاریخ حداکثر، یک تاریخ حداقل و یک بازه از مقادیر مجاز:

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31" /><br /><br />

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02" /><br /><br />

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5" />
</form>

صفت multiple

صفت multiple در input مشخص می‌کند که کاربر مجاز است بیش از یک مقدار را در فیلد ورودی وارد کند.

صفت multiple با انواع ورودی زیر کار می‌کند: email و file.

مثال یک فیلد آپلود فایل که مقادیر متعددی را می‌پذیرد:

<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple />
</form>

صفت pattern

صفت pattern در input یک عبارت باقاعده (regular expression) را مشخص می‌کند که هنگام ارسال فرم، مقدار فیلد ورودی با آن بررسی می‌شود.

صفت pattern با انواع ورودی زیر کار می‌کند: text، date، search، url، tel، email و password.

راهنمایی: از صفت سراسری (global attribute) title برای توصیف الگو و کمک به کاربر استفاده کنید.

راهنمایی: در مورد عبارات باقاعده در آموزش جاوا اسکریپت ما بیشتر بیاموزید.

مثال یک فیلد ورودی که فقط می‌تواند شامل سه حرف باشد (بدون عدد یا کاراکتر خاص):

<form>
  <label for="country_code">Country code:</label>
  <input
    type="text"
    id="country_code"
    name="country_code"
    pattern="[A-Za-z]{3}"
    title="Three letter country code"
  />
</form>

صفت placeholder

صفت placeholder در input یک راهنمای کوتاه را مشخص می‌کند که مقدار مورد انتظار برای یک فیلد ورودی را توصیف می‌کند (یک مقدار نمونه یا توضیح کوتاهی از فرمت مورد انتظار).

این راهنمای کوتاه قبل از اینکه کاربر مقداری را وارد کند، در فیلد ورودی نمایش داده می‌شود.

صفت placeholder با انواع ورودی زیر کار می‌کند: text، search، url، number، tel، email و password.

مثال یک فیلد ورودی با متن جایگزین (placeholder):

<form>
  <label for="phone">Enter a phone number:</label>
  <input
    type="tel"
    id="phone"
    name="phone"
    placeholder="123-45-678"
    pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"
  />
</form>

صفت required

صفت required در input مشخص می‌کند که یک فیلد ورودی باید قبل از ارسال فرم، حتماً پر شود.

صفت required با انواع ورودی زیر کار می‌کند: text، search، url، tel، email، password، انتخابگرهای تاریخ (date pickers)، number، checkbox، radio و file.

مثال یک فیلد ورودی الزامی:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required />
</form>

صفت step

صفت step در input، فواصل عددی مجاز را برای یک فیلد ورودی مشخص می‌کند.

برای مثال: اگر step="3" باشد، اعداد مجاز می‌توانند ۳-، ۰، ۳، ۶ و غیره باشند.

راهنمایی: این صفت می‌تواند همراه با صفات max و min برای ایجاد یک بازه از مقادیر مجاز استفاده شود.

صفت step با انواع ورودی زیر کار می‌کند: number، range، date، datetime-local، month، time و week.

مثال یک فیلد ورودی با فواصل عددی مجاز مشخص شده:

<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3" />
</form>

توجه: محدودیت‌های ورودی کاملاً قابل اطمینان نیستند و جاوا اسکریپت راه‌های زیادی برای افزودن ورودی‌های نامعتبر فراهم می‌کند. برای محدود کردن ایمن ورودی، باید آن توسط گیرنده (یعنی سرور) نیز بررسی شود!

صفت autofocus

صفت autofocus در input مشخص می‌کند که یک فیلد ورودی باید به طور خودکار هنگام بارگذاری صفحه، فوکوس (focus) را دریافت کند.

مثال کاری کنید که فیلد ورودی "First name" هنگام بارگذاری صفحه به طور خودکار فوکوس را دریافت کند:

<form>
  <label for="fname">First name:</label><br />
  <input type="text" id="fname" name="fname" autofocus /><br />
  <label for="lname">Last name:</label><br />
  <input type="text" id="lname" name="lname" />
</form>

صفات height و width

صفات height و width در input، ارتفاع و عرض یک عنصر <input type="image"> را مشخص می‌کنند.

راهنمایی: همیشه صفات height و width را برای تصاویر مشخص کنید. اگر ارتفاع و عرض تنظیم شوند، فضای مورد نیاز برای تصویر هنگام بارگذاری صفحه رزرو می‌شود. بدون این صفات، مرورگر اندازه تصویر را نمی‌داند و نمی‌تواند فضای مناسب را به آن اختصاص دهد. نتیجه این خواهد بود که چیدمان صفحه در حین بارگذاری (همزمان با بارگذاری تصاویر) تغییر می‌کند.

مثال تعریف یک تصویر به عنوان دکمه ارسال (submit)، با صفات ارتفاع و عرض:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" /><br /><br />
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname" /><br /><br />
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48" />
</form>

صفت list

صفت list در input به یک عنصر <datalist> اشاره دارد که شامل گزینه‌های از پیش تعریف‌شده برای یک عنصر <input> است.

مثال یک عنصر <input> با مقادیر از پیش تعریف‌شده در یک <datalist>:

<form>
  <input list="browsers" />
  <datalist id="browsers">
    <option value="Edge"></option>
    <option value="Firefox"></option>
    <option value="Chrome"></option>
    <option value="Opera"></option>
    <option value="Safari"></option>
  </datalist>
</form>

صفت autocomplete

صفت autocomplete در input مشخص می‌کند که آیا یک فرم یا یک فیلد ورودی باید قابلیت تکمیل خودکار (autocomplete) را روشن یا خاموش داشته باشد.

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

صفت autocomplete با <form> و انواع <input> زیر کار می‌کند: text، search، url، tel، email، password، datepickers، range و color.

مثال یک فرم HTML با تکمیل خودکار روشن، و خاموش برای یک فیلد ورودی:

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" /><br /><br />
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname" /><br /><br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off" /><br /><br />
  <input type="submit" value="Submit" />
</form>

راهنمایی: در برخی از مرورگرها ممکن است لازم باشد یک تابع تکمیل خودکار را فعال کنید تا این ویژگی کار کند (در منوی مرورگر خود به دنبال "Preferences" یا "تنظیمات" بگردید).

عناصر فرم و ورودی در HTML