ویژگی های ورودی HTML

ویژگی های ورودی HTML  و توضیح تک تک ویژگی ها

آموزش فرم های  html  درس چهارم

 مقدار ویژگی

ویژگی های ورودی HTML  : مقدار ویژگی ، مقدار اولیه برای یک فیلد ورودی را مشخص می کند:

مثال :

 <form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form> 

ویژگی های ورودی HTML: ویژگی readonly

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

مثال :

 <form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form> 

ویژگی های ورودی HTML: ویژگی  disabled

ویژگی disabled  مشخص می کند که فیلد ورودی غیرفعال است.
یک فیلد ورودی غیرفعال غیر قابل استفاده و غیر قابل کلیک است و در هنگام ارسال فرم آن مقدار ارسال نمی شود:

مثال :

 <form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form> 

ویژگی های ورودی HTML: ویژگی  size

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

مثال :

 <form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form> 

ویژگی های ورودی HTML: ویژگی  maxlength

ویژگی maxlength  طول مجاز برای فیلد ورودی را مشخص می کند:

مثال:

 <form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form> 

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

ویژگی های ورودی HTML: ویژگی های HTML5

HTML5 ویژگی های زیر را برای <input> اضافه کرد:

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

و ویژگی های زیر برای  فرم :

• autocomplete
• novalidate

ویژگی های ورودی HTML: ویژگی autocomplete

ویژگی autocomplete مشخص می کند که آیا یک فرم یا فیلد ورودی باید به صورت خودکار تکمیل شود یا خاموش شود. وقتی که تکمیل خودکار فعال است، مرورگر به طور خودکار مقادیر ورودی را براساس مقادیری که کاربر قبل وارد کرده است کامل میکند.

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

ویژگی autocomplete با <form> و انواع <input> در زیر کار می کند:

text, search, url, tel, email, password, datepickers, range, and color.

مثال
یک فرم HTML با تکمیل خودکار (برای یک فیلد ورودی):

 <form action="/action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form> 

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

ویژگی های ورودی HTML: ویژگی Novalidate

ویژگی novalidate یک ویژگی  <form> است.
هنگامی که در حال حاضر، Novalidate  مشخص می کند که داده های فرم هنگام ارسال تایید اعتبار نمی شوند.

مثال
نشان می دهد که فرم برای تأیید اعتبار در ارسال وجود ندارد:

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

ویژگی های ورودی HTML: ویژگی Autofocus

ویژگی Autofocus مشخص می کند که  فیلد ورودی به طور اتوماتیک وقتی صفحه بارگذاری می شود متمرکز می شود.

مثال
بگذارید فیلد ورودی  “First name”   به طور خودکار هنگام بارگذاری صفحه متمرکز شود:

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

ویژگی های ورودی HTML: ویژگی  form

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

نکته: برای اشاره به بیش از یک فرم، از یک لیست جدا شده از شناسه ها استفاده کنید.

مثال
فیلد ورودی خارج از فرم HTML) اما هنوز بخشی از فرم است):

 <form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1"> 

ویژگی های ورودی HTML: ویژگی formaction

ویژگی formaction آدرس اینترنتی یک فایل را مشخص می کند که هنگام ارسال فرم کنترل های ورودی را پردازش می کند.

ویژگی formaction ویژگی action از عنصر <form> را لغو می کند.

ویژگی formaction با type=”submit” and type=”image” استفاده می شود.

مثال :

یک فرم  html  با دو دکمه ارسال، با action های مختلف :

 <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"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin">
</form> 

ویژگی های ورودی HTML: ویژگی formenctype

ویژگی formenctype مشخص می کند هنگامی که  داده های فرم ارسال می شوند  چطور باید کدگذاری شوند. (فقط برای فرم هایی با method=”post” )

ویژگی formenctype ویژگی enctype از عنصر <form> را از بین می برد. ویژگی formenctype با type=”submit” and type=”image” استفاده می شود.

مثال

اطلاعات فرمی(form-data) ارسال می شود که به طور پیش فرض کدگذاری شده باشد ( دکمه ارسال اول ) و به عنوان “multipart/form-data” کد گذاری شده باشد ( دکمه ارسال دوم ) :

 <form action="/action_page_binary.asp" method="post">
  First name: <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> 

ویژگی های ورودی HTML: ویژگی formmethod

ویژگی formmethod روش HTTP را برای ارسال form-data به action URL تعریف می کند. ویژگی formmethod ویژگی method را از عنصر <form> لغو می کند.

ویژگی formmethod می تواند با type=”submit” and type=”image” استفاده شود.

مثال:

دکمه ارسال دوم HTTP method را از فرم لغو می کند :

 <form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit using POST">
</form> 

ویژگی های ورودی HTML: ویژگی formnovalidate

ویژگی formnovalidate  ویژگی novalidate را از عنصر <form> لغو می کند. ویژگی formnovalidate  می تواند با type=”submit” استفاده شود.

مثال :

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

 <form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form> 

ویژگی های ورودی HTML: ویژگی formtarget

ویژگی formtarget یک نام یا یک پسورد را مشخص می کند که نشان می دهد بعد از ارسال فرم پاسخی که دریافت شده کجا نمایش داده شود. ویژگی formtarget ویژگی target را از عنصر <form> لغو می کند. ویژگی formtarget می تواند با type=”submit” and type=”image” استفاده شود.

مثال:

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

 <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> 

ویژگی های ورودی HTML: ویژگی های height  و  width

ویژگی های height  و  width، طول و عرض یک عنصر <input type=”image”> را مشخص می کند. همیشه سایز یا اندازه تصویر را مشخص می کند. اگر مرورگر اندازه تصویر را نداند، هنگام لود تصاویر صفحه چشمک می زند.

مثال :

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

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

ویژگی های ورودی HTML : ویژگی list

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

مثال :

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

<input list=”browsers”>

 <input list="browsers">

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

ویژگی های ورودی HTML : ویژگی های min   و  max

ویژگی های min   و  max یک  مقدار مینیمم و ماکزیمم برای یک عنصر <input> مشخص می کند. ویژگی های min   و  max با انواع ورودی زیر کار می کند: number, range, date, datetime-local, month, time and week

مثال :

عناصر <input> با مقدار مینیمم و ماکزیمم :

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

ویژگی های ورودی HTML : ویژگی multiple

ویژگی multiple مشخص می کند که کاربر اجازه دارد بیشتر از یک مقدار در عنصر <input> وارد کند. ویژگی multiple با انواع ورودی زیر کار می کند :  email و  file.

مثال : یک فیلد آپلود فایل که چندین مقدار را می پذیرد :

 Select images: <input type="file" name="img" multiple> 

ویژگی های ورودی HTML : ویژگی pattern

ویژگی pattern یک عبارت منظم را مشخص می کند که مقدار عناصر <input> در مقابل آن بررسی می شود. ویژگی pattern با انواع ورودی زیر کار می کند : text, search, url, tel, email  و  password

مثال :

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

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

ویژگی های ورودی HTML : ویژگی placeholder

ویژگی placeholder یک راهنما را مشخص می کند که مقدار مورد انتظار از یک فیلد ورودی را توصیف می کند( یک مقدار نمونه یا یک توصیف کوتاه از یک فرمت ). راهنما فیلد ورودی را قبل از اینکه کاربر مقداری را وارد کند نشان می دهد. ویژگی placeholder با انواع ورودی زیر کار می کند : text, search, url, tel, email, and password

مثال  :

یک فیلد ورودی یا یک placeholder text:

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

ویژگی های ورودی HTML :ویژگی required

ویژگی required مشخص می کند که یک فیلد ورودی باید قبل از اینکه فرم ارسال شود پر شود. ویژگی required با انواع ورودی زیر کار می کند : text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file

مثال :

یک فیلد ورودی  required :

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

ویژگی های ورودی HTML : ویژگی step

ویژگی step تعداد قانونی فاصله ها را در یک عنصر <input> مشخص می کند.

مثال :

if step=”3″, legal numbers could be -3, 0, 3, 6, etc

نکته : ویژگی step  می تواند با ویژگی های max and min برای ایجاد یک محدوده ای از مقادیر قانونی استفاده شود.

ویژگی step با انواع ورودی زیر کار می کند : number, range, date, datetime-local, month, time and week

درس بعدی : معرفی  html5

مثال :

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

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