در این مقاله به شرح تفاوت خصوصیت ها(attribute) برای عنصر <input> در html می پردازیم.

استفاده از خصوصیت value

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

<form>
  <label for="fname">نام:</label><br>
  <input type="text" id="fname" name="fname" value="احسان"><br>
  <label for="lname">نام خانوادگی:</label><br>
  <input type="text" id="lname" name="lname" value="عباسی"><br><br>
  <input type="submit" value="ارسال">
</form>

استفاده از خصوصیت readonly در input

خصوصیت readonly مشخص می کند که یک فیلد input، فقط قابل خواندن باشد(یعنی قابل تغییر نباشد). اگر برای یک فیلد input، از خصوصیت readonly استفاده شود، نمی توانیم این فیلد را اصلاح کنیم یا تغییر دهیم(اما کاربر می تواند tab را روی آن به کار بَرَد، آن را هایلایت کند و متن درون آن را کپی کند). مقدار(value) یک فیلد input که read-only باشد، وقتی ارسال می شود که داریم فرم را submit می کنیم.

<form>
  <label for="fname">نام:</label><br>
  <input type="text" id="fname" name="fname" value="احسان" readonly><br>
  <label for="lname">نام خانوادگی:</label><br>
  <input type="text" id="lname" name="lname" value="عباسی"><br><br>
  <input type="submit" value="Submit">
</form>

خصوصیت disabled در input

خصوصیت disabled در input، مشخص می کند که یک فیلد input باید غیرفعال(disabled) باشد. یک فیلد input که disabled شده باشد، غیرقابل استفاده و غیرقابل کلیک شدن است. مقدار(value) فیلد input که disabled شده باشد، وقتی که فرم ارسال(submit) شود، فرستاده نمی شود.

<form>
  <label for="fname">نام:</label><br>
  <input type="text" id="fname" name="fname" value="احسان" disabled><br>
  <label for="lname">نام خانوادگی:</label><br>
  <input type="text" id="lname" name="lname" value="عباسی"><br><br>
  <input type="submit" value="ارسال">
</form>

خصوصیت size در input

خصوصیت size عرض قابل مشاهده ی یک فیلد input را به کاراکترها، مشخص می کند. مقدار(value) پیش فرض برای خصوصیت size، تعداد 20 (کاراکتر) می باشد.

نکته: خصوصیت size با نوعِ inputهای زیر کار می کند:

• text
• search
• tel
• url
• email
• password

<form>
  <label for="fname">نام:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">پین:</label><br>
  <input type="text" id="pin" name="pin" size="4"><br><br>
  <input type="submit" value="ارسال">
</form>

خصوصیت maxlength در input

خصوصیت maxlength در input، ماکزیمم تعداد کاراکترهای مجاز در یک فلید input را مشخص می کند.
نکته: وقتی که یک maxlength تنظیم می شود، فیلد input مورد نظر، بیش از مقدار کاراکتر تعیین شده، را قبول نمی کند. البته این خصوصیت (برای این کار) هیچ بازخوردی(feedback) را ارائه نمی دهد. بنابراین اگر می خواهید به کاربر هشدار دهید، باید از کدهای جاوا اسکریپت استفاده کنید.

<form>
  <label for="fname">نام:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">پین:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4"><br><br>
  <input type="submit" value="ارسال">
</form>

خصوصیت های min و max در input

خصوصیت های min و max در input به ترتیب مقادیر مینیمم و ماکزیمم را برای فیلد input مشخص می کنند. خصویت های min و max در عنصر input، با نوع های زیر کار می کنند:

• number
• range
• date
• datetime-local
• month
• time
• week

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

<form">
  <label for="datemax">یک تاریخ قبل از این را وارد کنید 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">یک تاریخ بعد از این را وارد کنید 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
  
  <label for="quantity">تعداد بین 1 تا 5 را وارد کنید:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>

  <input type="submit" value="ارسال">
</form>

خصوصیت multiple در input

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

• email
• file

<form>
  <label for="files">فایل ها را انتخاب کنید:</label>
  <input type="file" id="files" name="files" multiple>
</form> 

 خصوصیت pattern در input

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

• text
• date
• search
• url
• tel
• email
• password

نکته 1: برای شرح دادن pattern به منظور کمک به کاربر، می توانید از خصوصیت سراسری title استفاده کنید.
نکته 2: برای کسب اطلاعات بیشتر در مورد عبارت های منظم، می توانید آموزش های جاوا اسکریپت را مطالعه کنید.

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

خصوصیت placeholder در input

خصوصیت placeholder در input، یک راهنمای کوتاه را در مورد یک مقدار خواسته شده در یک فیلد input، نشان می دهد. این راهنمای کوتاه، قبل از اینکه کاربر یک مقدار را وارد کند، نمایش داده می شود. خصوصیت placeholder با نوع های input زیر کار می کند:

• text
• search
• url
• number
• tel
• email
• password

 <form>
  <label for="phone">یک شماره تلفن را وارد کنید:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form> 

خصوصیت required در input

خصوصیت required مشخص می کند که یک فیلد input قبل از ارسال(submit) فرم، باید پر شده باشد. خصوصیت required با نوعِ input های زیر کار می کند:

• text
• search
• search
• url
• tel
• email
• password
• date pickers
• number
• checkbox
• radio
• file

<form>
  <label for="username">نام کاربری:</label>
  <input type="text" id="username" name="username" required>
</form> 

خصوصیت step در input

خصوصیت step در input، بازه های عددی قانونی را برای یک فیلد input مشخص می کند. در حقیقت، خصوصیت step قدرِ نسبت یا گامِ مقادیر قابل قبول را برای یک فیلد input مشخص می کند.

مثال: اگر بنویسیم step="3" اعداد قانونی می تواند 6, 3, 0, 3- و غیره باشد.

نکته: این خصوصیت می تواند همراه با خصوصیت های max و min به کار رود تا یک محدوده از مقادیر قابل قبول( یا قانونی) مشخص شود. 

خصوصیت step در نوع های input زیر کار می کند:

• number
• range
• date
• datetime-local
• month
• time
• week

 <form>
  <label for="points">امتیاز:</label>
  <input type="number" id="points" name="points" step="3">
</form> 

 نکته: محدودیت های input محفوظ از خطا نیست و جاوا اسکریپت راه های زیادی برای اضافه کردن input های غیرقانونی ارائه می دهد. برای اینکه محدوده ی input را با امنیت کامل مشخص کنیم، باید آن را همچنین توسط گیرنده(یعنی سرور) مشخص کنیم.

خصوصیت autofocus در input

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

<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 در input

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

نکته: همواره برای تصاویر(images)، هردویِ خصوصیت های height و width را مشخص کنید. اگر خصوصیت های height و width مشخص شوند، فضای مورد نیاز برای تصویر مورد نظر، وقتی که صفحه لود شد، رزرو می شود. بدون این خصوصیت ها، مرورگر، سایز تصویر را نمی داند و نمی تواند فضای مناسبی را برای آن رزرو کند. تاثیر این کار این است که چینش(layout) صفحه در حین لود شدن(وقتی که تصاویر لود می شوند) تغییر خواهد کرد.

 <form>
  <label for="fname">نام:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">نام خانوادگی:</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 در input

خصوصیت list در input، به یک عنصر <datalist> اشاره می کند که حاوی چند گزینه ی از قبل تعیین شده، برای یک عنصر <input> می باشد.

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

خصوصیت autocomplete در input

خصوصیت autocomplete در input مشخص می کند که ویژگی کامل شدن اتوماتیک(autocomplete) در یک فیلد فرم یا input باید فعال باشد یا غیرفعال باشد. این ویژگی به مرورگر امکان می دهد تا مقادیر را پیش بینی کند. وقتی که یک کاربر، شروع به تایپ کردن در یک فیلد کند، مرورگر گزینه هایی را بسته به مقادیر از قبل تایپ شده، برای پر کردن فیلد پیشنهاد می دهد.

این خصوصیت، برای عنصر <form>  و نوع های <input> زیر کار می کند:

• text
• search
• url
• tel
• email
• password
• datepickers
• range
• color

 <form action="/action_page.php" autocomplete="on">
  <label for="fname">نام:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">نام خانوادگی:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">ایمیل:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="ارسال">
</form> 

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

• بعدی
• قبلی