ویژگی‌های HTML Input

ویژگی value

value ویژگی تعیین می‌کند که مقدار اولیه ورودی فیلد چیست:

مثال

<form action="">
 نام اول:<br>
<input type="text" name="firstname" value="Bill">
<br>
 نام خانوادگی:<br>
<input type="text" name="lastname">
value="Submit to a new window">

آزمایش کنید

ویژگی readonly

readonly ویژگی تعیین می‌کند که ورودی فیلد فقط خوانا است (نمی‌توان آن را تغییر داد):

مثال

<form action="">
 نام اول:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 نام خانوادگی:<br>
<input type="text" name="lastname">
value="Submit to a new window">

آزمایش کنید

ویژگی readonly نیاز به مقدار ندارد. این معادل readonly="readonly" است.

ویژگی disabled

disabled ویژگی تعیین می‌کند که ورودی فیلد غیرفعال است.

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

عناصر غیرفعال نمی‌توانند ارسال شوند.

مثال

<form action="">
 نام اول:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 نام خانوادگی:<br>
<input type="text" name="lastname">
value="Submit to a new window">

آزمایش کنید

ویژگی disabled نیاز به مقدار ندارد. این معادل disabled="disabled" است.

ویژگی size

size ویژگی تعیین می‌کند که اندازه ورودی فیلد (با توجه به کاراکترها) چیست:

مثال

<form action="">
 نام اول:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 نام خانوادگی:<br>
<input type="text" name="lastname">
value="Submit to a new window">

آزمایش کنید

ویژگی maxlength

maxlength مشخصات تعیین می‌کند که طول حداکثر ورودی فیلد مجاز چیست:

مثال

<form action="">
 نام اول:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 نام خانوادگی:<br>
<input type="text" name="lastname">
value="Submit to a new window">

آزمایش کنید

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

این خصوصیت هیچ بازخوردی ارائه نمی‌دهد. اگر نیاز به یادآوری کاربر دارید، باید کد JavaScript بنویسید.

توجه:محدودیت‌های ورودی همیشه کامل نیستند. JavaScript روش‌های زیادی برای اضافه کردن ورودی‌های غیرقانونی ارائه می‌دهد. برای محدود کردن ورودی‌ها به صورت امن، ارائه‌دهنده (سرور) باید همزمان بررسی‌ها را انجام دهد.

خصوصیات HTML5

HTML5 خصوصیات زیر را برای <input> اضافه کرده است:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height و width
  • list
  • min و max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

و برای <form> خصوصیات زیر را اضافه می‌کند:

  • autocomplete
  • novalidate

خصوصیت autocomplete

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

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

توجه:می‌توانید تنظیم خودکمال فرم را به on تنظیم کنید و برای فیلدهای ورودی خاص به off تنظیم کنید و برعکس.

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

مثال

فرم‌های HTML با خودکمال فعال: (یک فیلد ورودی به صورت off است):

<form action="action_page.php" autocomplete="on">
   نام اول:<input type="text" name="fname"><br>
   First name: <input type="text" name="fname"><br>
   ایمیل: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
value="Submit to a new window">

آزمایش کنید

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

ویژگی novalidate

ویژگی novalidate از ویژگی‌های <form> است.

اگر تنظیم شده باشد، novalidate تعیین می‌کند که داده‌های فرم در هنگام ارسال بررسی نمی‌شوند.

مثال

این نشان می‌دهد که فرم در هنگام ارسال بررسی نمی‌شود:

<form action="action_page.php" novalidate>
   ایمیل: <input type="email" name="user_email">
   <input type="submit">
value="Submit to a new window">

آزمایش کنید

ویژگی autofocus

ویژگی autofocus یک ویژگی بولین است.

اگر تنظیم شده باشد، تعیین می‌کند که عناصر <input> باید به طور خودکار تمرکز یابند.

مثال

ورودی "نام اول" در زمان بارگذاری صفحه به طور خودکار تمرکز می‌یابد:

نام اول:<input type="text" name="fname" autofocus>

آزمایش کنید

ویژگی form

ویژگی form تعیین می‌کند که یک یا چند فرم به عناصر <input> تعلق دارند.

توجه:برای ارجاع به یک فرم بیشتر از یک فرم، لیست id فرم‌ها را با فاصله خالی جدا کنید.

مثال

زمینه ورودی در خارج از فرم قرار دارد (اما هنوز به فرم تعلق دارد):

<form action="action_page.php" id="form1">
   <form action="action_page.php">
   <input type="submit" value="Submit">
value="Submit to a new window">
 نام خانوادگی: <input type="text" name="lname" form="form1">

آزمایش کنید

ویژگی formaction

ویژگی formaction تعیین می‌کند که URL فایل‌های ورودی کنترل‌های ورودی را در هنگام ارسال فرم پردازش می‌کند.

ویژگی formaction به پوشش ویژگی action عناصر <form> اختصاص دارد.

ویژگی formaction برای type="submit" و type="image" استفاده می‌شود.

مثال

فرم HTML که دو دکمه ارسال دارد و برای عملکرد‌های مختلف:

این فرم دو دکمه ارسال دارد که به دو پنجره هدف مختلف مربوط می‌شوند:
   <form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp">
   value="Submit as admin">
value="Submit to a new window">

آزمایش کنید

ویژگی formentype

ویژگی formentype تعیین می‌کند که چگونه داده‌های فرم (form-data) باید کدگذاری شوند (تنها برای فرم‌هایی که method="post" دارند).

ویژگی formentype به پوشش ویژگی enctype عناصر <form> اختصاص دارد.

خصوصیت formenctype برای type="submit" و type="image" قابل استفاده است.

مثال

فرستادن داده‌های فرم (form-data) با رمزنگاری پیش‌فرض و رمزنگاری به صورت "multipart/form-data" (دومین دکمه ارسال):

<form action="demo_post_enctype.asp" method="post">
   <form action="action_page.php">
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data">
   value="Submit as Multipart/form-data">
value="Submit to a new window">

آزمایش کنید

خصوصیت formmethod

خصوصیت formmethod روش HTTP را تعریف می‌کند که برای ارسال داده‌های فرم (form-data) به URL action استفاده می‌شود.

خصوصیت formmethod خصوصیت method عناصر <form> را بر می‌گرداند.

خصوصیت formmethod برای type="submit" و type="image" قابل استفاده است.

مثال

دومین دکمه ارسال روش HTTP فرم را تغییر می‌دهد:

<form action="action_page.php" method="get">
   <form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Submit using POST">
value="Submit to a new window">

آزمایش کنید

خصوصیت formnovalidate

خصوصیت novalidate یک خصوصیت بولین است.

اگر تنظیم شده باشد، مشخص می‌کند که در هنگام ارسال فرم، هیچ‌گونه بررسی‌ای برای عناصر <input> انجام نمی‌شود.

خصوصیت formnovalidate خصوصیت novalidate عناصر <form> را بر می‌گرداند.

خصوصیت formnovalidate برای type="submit" قابل استفاده است.

مثال

فرم دارای دو دکمه ارسال (بررسی شده و بررسی نشده):

این فرم دو دکمه ارسال دارد که به دو پنجره هدف مختلف مربوط می‌شوند:
   ایمیل: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
value="Submit to a new window">

آزمایش کنید

formtarget 属性

ویژگی formtarget

ویژگی formtarget مشخص می‌کند که پس از ارسال فرم، پاسخ در کجا نمایش داده شود.

ویژگی formtarget می‌تواند ویژگی target عنصر <form> را برجسته کند.

مثال

ویژگی formtarget می‌تواند با type="submit" و type="image" استفاده شود.

این فرم دو دکمه ارسال دارد که به دو پنجره هدف مختلف مربوط می‌شوند:
   <form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
value="Submit to a new window">

آزمایش کنید

</form>

ویژگی‌های height و width

ویژگی‌های height و width تنها برای <input type="image"> استفاده می‌شوند.

توجه:همیشه اندازه تصویر را مشخص کنید. اگر مرورگر اندازه تصویر را نمی‌داند، صفحه در هنگام بارگذاری تصویر می‌لرزد.

مثال

تصویر را به عنوان دکمه ارسال تعریف کنید و ویژگی‌های height و width را تنظیم کنید:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

آزمایش کنید

ویژگی list

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

مثال

استفاده از <datalist> برای تنظیم عناصر پیش‌تعریف شده برای عنصر <input>:

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

آزمایش کنید

ویژگی‌های min و max

ویژگی‌های min و max حداقل و حداکثر عناصر <input> را تعیین می‌کنند.

ویژگی‌های min و max برای نوع ورودی‌هایی مانند number،range،date،datetime،datetime-local،month،time و week کاربرد دارند.

مثال

عناصر <input> با حداقل و حداکثر:

تاریخ ورودی قبل از 1980-01-01 وارد کنید:
<input type="date" name="bday" max="1979-12-31">
 تاریخ ورودی بعد از 2000-01-01 وارد کنید:
<input type="date" name="bday" min="2000-01-02">
 مقدار (بین 1 و 5):
<input type="number" name="quantity" min="1" max="5">

آزمایش کنید

ویژگی multiple

ویژگی multiple یک ویژگی بولین است.

اگر تنظیم شده باشد، مقدار بیش از یک مقدار را در عناصر <input> مجاز می‌کند.

ویژگی multiple برای نوع ورودی‌های زیر کاربرد دارد: email و file.

مثال

فیلد ارسال فایل که چندین مقدار را می‌پذیرد:

تصویر مورد نظر خود را انتخاب کنید：<input type="file" name="img" multiple>

آزمایش کنید

ویژگی pattern

ویژگی pattern برای تعیین عبارت منظم استفاده می‌شود که برای بررسی مقدار عناصر <input> به کار می‌رود.

ویژگی pattern برای نوع ورودی‌های زیر کاربرد دارد: text،search،url،tel،email و password.

توجه:برای کمک به کاربر، از ویژگی title به صورت کلی برای توضیح قوانین استفاده کنید.

توجه:برای اطلاعات بیشتر در مورد قوانین عبارت‌های منظم به آموزش JavaScript ما مراجعه کنید.

مثال

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

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

آزمایش کنید

ویژگی placeholder

ویژگی placeholder برای توضیح مقدار پیش‌بینی شده فیلد ورودی (مقدار نمونه یا توضیح مختصر از فرمت) استفاده می‌شود.

این پیام به عنوان پیش‌نویس در فیلد ورودی نمایش داده می‌شود قبل از اینکه کاربر مقدار وارد کند.

خصوصیات placeholder برای نوع‌های ورودی زیر اعمال می‌شود: text،search،url،tel،email و password.

مثال

زمینه ورودی‌هایی با متن جایگزین:

<input type="text" name="fname" placeholder="First name">

آزمایش کنید

خصوصیات required

خصوصیات required یک خصوصیات بولین است.

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

خصوصیات required برای نوع‌های ورودی زیر اعمال می‌شود: text،search،url،tel،email،password،pickerهای تاریخ،number،checkbox،radio و file.

مثال

زمینه ورودی اجباری:

Username: <input type="text" name="usrname" required>

آزمایش کنید

خصوصیات step

خصوصیات step مقادیر قانونی عددی ورودی <input> را مشخص می‌کند.

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

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

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

مثال

زمینه ورودی‌هایی با اختلاف قانونی عددی مشخص:

<input type="number" name="points" step="3">

آزمایش کنید