ویژگی‌های HTML Input

ویژگی value

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

مثال

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

آزمایش کنید

ویژگی readonly

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

مثال

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

آزمایش کنید

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

ویژگی disabled

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

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

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

مثال

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

آزمایش کنید

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

ویژگی size

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

مثال

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

آزمایش کنید

ویژگی maxlength

maxlength کیفیت تعیین شده طول بیشترین مجاز برای فیلد ورودی:

مثال

<form action="">
 نام اول:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 نام خانوادگی:<br>
<input type="text" name="lastname">
</form>

آزمایش کنید

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

این ویژگی هیچ بازخوردی ارائه نمی‌دهد. اگر نیاز به اطلاع‌رسانی به کاربر دارید، باید کد جاوااسکریپت بنویسید.

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

ویژگی‌های 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>
   نام خانوادگی: <input type="text" name="lname"><br>
   ای-میل: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

آزمایش کنید

توجه:在有些瀏覽器中，您可能需要手動啟用自動完成功能。

novalidate 屬性

novalidate 屬性屬於 <form> 屬性。

如果設置，則 novalidate 規定在提交表單時不對表單數據進行驗證。

مثال

指示表單在被提交時不進行驗證：

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

آزمایش کنید

autofocus 屬性

autofocus 屬性是布爾屬性。

如果設置，則規定當頁面加載時 <input> 元素應該自動獲得焦點。

مثال

使 "First name" 輸入字段在頁面加載時自動獲得焦點：

First name:<input type="text" name="fname" autofocus>

آزمایش کنید

form 屬性

form 屬性規定 <input> 元素屬於的一個或多個表單。

توجه:如需引用一個以上的表單，請使用空格分隔的表單 id 列表。

مثال

輸入字段位於 HTML 表單之外（但仍屬表單）：

<form action="action_page.php" id="form1">
   نام: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>
 Last name: <input type="text" name="lname" form="form1">

آزمایش کنید

formaction 屬性

formaction 屬性規定當提交表單時處理該輸入控件的文件的 URL。

formaction 屬性覆盖 <form> 元素的 action 屬性。

formaction 屬性適用於 type="submit" 以及 type="image"。

مثال

擁有两个提交按钮並對於不同動作的 HTML 表單：

<form action="action_page.php">
   نام: <input type="text" name="fname"><br>
   نام خانوادگی: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

آزمایش کنید

formenctype 属性

formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。

formenctype 属性覆盖 <form> 元素的 enctype 属性。

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

مثال

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

<form action="demo_post_enctype.asp" method="post">
   نام: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data">
   value="Submit as Multipart/form-data">
</form>

آزمایش کنید

ویژگی formmethod

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

ویژگی formmethod ویژگی method عناصر <form> را پوشش می‌دهد.

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

مثال

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

<form action="action_page.php" method="get">
   نام: <input type="text" name="fname"><br>
   نام خانوادگی: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Submit using POST">
</form>

آزمایش کنید

ویژگی formnovalidate

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

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

ویژگی formnovalidate ویژگی novalidate عناصر <form> را پوشش می‌دهد.

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

مثال

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

<form action="action_page.php">
   ایمیل: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
</form>

آزمایش کنید

ویژگی formtarget

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

ویژگی formtarget ویژگی target عنصر <form> را برمی‌گرداند.

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

مثال

این فرم دو دکمه ارسال دارد که به پنجره‌های هدف مختلفی اشاره دارند:

<form action="action_page.php">
   نام: <input type="text" name="fname"><br>
   نام خانوادگی: <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> به چه اندازه‌ای خواهد بود.

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

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

مثال

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

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

آزمایش کنید

ویژگی list

عنصر <datalist> که توسط ویژگی list مرجع شده است، شامل گزینه‌های پیش‌تعیین‌شده برای عنصر <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">

آزمایش کنید

min 和 max 属性

min 和 max 属性规定 元素的最小值和最大值。

min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

مثال

具有最小和最大值的 元素：

Enter a date before 1980-01-01:

 Enter a date after 2000-01-01:

 Quantity (between 1 and 5):

آزمایش کنید

multiple 属性

multiple 属性是布尔属性。

如果设置，则规定允许用户在 元素中输入一个以上的值。

multiple 属性适用于以下输入类型：email 和 file。

مثال

接受多个值的文件上传字段：

请选择图片：

آزمایش کنید

pattern 属性

pattern 属性规定用于检查 元素值的正则表达式。

pattern 属性适用于以下输入类型：text、search、url、tel、email、and 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،date pickers،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">

آزمایش کنید