تاریخ انتشار:۱۳:۲۷ ۱۳۹۹/۱/۲

صفت value

مقدار اولیه برای یک فیلد ورودی از طریق صفت value مشخص میشود. در مثال زیر مقدار اولیه برای فیلد ورودی firstname ، مقدار John تعیین شده است :

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

---

صفت readonly

گاهی اوقات فیلد های ورودی صرفا برای نمایش یک مقدار به کاربر استفاده میشوند و نباید مقدار آنها توسط کاربر قابل تغییر باشد. برای رسیدن به این حالت از صفت readonly استفاده میکنیم :

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

---

صفت disabled

برای نمایش یک فیلد ورودی در حالتی که غیر فعال است از صفت disabled استفاده میکنیم. فیلد های Input در حالت غیر فعال ، غیر قابل کلیک و غیر قابل انتخاب بوده و مقادیر آنها در هنگام submit، به سمت سرور ارسال نمیشود.

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

نکته : به نحوه ی به کاربردن صفت disabled در مثال دقت کنید. بر خلاف دیگر صفات که از قاعده ی نام / مقدار استفاده میکنند برای استفاده از این صفت به به کاربردن نام آن به تنهایی کافی است.

---

صفت maxlength

حداکثر تعداد کاراکتری که میتوان در یک فیلد ورودی تایپ کرد توسط صفت maxlength تعیین میشود. در مثال زیر حداکثر تعداد کارکتر برای فیلد firstname مقدار 10 تعیین شده است.

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

دقت داشته باشید که صفت maxlength هشداری را برای زمانی که کاربر از مقدار مجاز تعداد کارکتر عبور کند فراهم نمی آورد و این وظیفه ی شما به عنوان برنامه نویس است که با استفاده از زبان JavaScript این هشدار را برای کاربر فراهم کنید.

---

صفات در HTML5

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

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

و البته صفاتی را هم برای عنصر <form> فراهم آورده است :

• * autocomplete
• * novalidate
  

که در ادامه به بعضی از آنها خواهیم پرداخت.

---

صفت autocomplete

در صفاتی که در قسمت قبل به آنها اشاره کردیم ، صفت autocomplete هم برای عنصر <input> و هم برای عنصر <form> وجود دارد.

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

وقتی از این صفت برای عنصر <form> استفاده میکنیم ، آن به تمام عناصر input داخل فرم اعمال میشود. در این حالت میتوان عنصری خاص را با مقدار autocomplete="off" از بقیه متمایز کرد.

نمونه مثال زیر نحوه ی استفاده از صفت autocomplete را نشان میدهد :

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

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

---

صفت novalidate

از این صفت برای عنصر <form> استفاده میشود.

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

نمونه کد زیر نحوه ی استفاده از این صفت را نشان میدهد :

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

این صفت در مرورگر سافاری و اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.

---

صفت autofocus

گاهی اوقات نیاز است وقتی کاربر صفحه ای را باز میکند مستقیما فیلد ورودی انتخاب شده باشد. یعنی کاربر نیاز نداشته باشد برای تایپ در فیلد ورودی ابتدا آن را انتخاب کند. برای رسیدن به چنین امکانی از صفت autofocus استفاده میکنیم.

نمونه مثال زیر نحوه ی استفاده از این صفت را نشان میدهد :

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

این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.

---

صفت form

صفت form که برای عناصر input استفاده میشود مشخص میکند که عنصر مورد نظر متعلق به کدام فرم است.

نمونه مثال زیر نحوه ی استفاده از این صفت را نشان میدهد :

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

در مثال بالا فیلد ورودی lname متعلق به فرم form1 است. این قابلیت در اینترنت اکسپلورر پشتیبانی نمیشود.

---

صفت formaction

صفت formaction آدرسی از یک صفحه را مشخص میکند که وقتی فرم به سمت سرور ارسال میشود کنترل input توسط آن پردازش میشود.

صفت formaction صفت action عنصر  <form> را override میکند.

صفت formaction با صفت های "type="submit و "type="image استفاده میشود.

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

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

این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.

---

صفت formenctype

صفت formenctype مشخص میکند که هنگام submit ، داده های فرم چگونه باید انکد شود (تنها برای فرم هایی که از صفت "method="post استفاده میکنند).

صفت formenctype  صفت enctype عنصر <form> را override میکند.

صفت formenctype با صفت های "type="submit و "type="image استفاده میشود.

در نمونه مثال زیر وقتی روی دکمه ی سابمیت اولی کلیک شود داده ها به روش پیشفرض انکد شده ، درحالی که با کلیک روی دکمه ی سابمیت دوم، داده ها به عنوان "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/ >

این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.

---

صفت formmethod

صفت formmethod روش HTTP را برای ارسال داده های فرم به یک آدرس مشخص تعریف میکند.

صفت formmethod صفت method عنصر <form> را override میکند.

صفت formmethod با صفت های "type="submit و "type="image استفاده میشود.

در نمونه مثال زیر در هنگام استفاده از دکمه ی سابمیت اول داده ها به روش get ارسال میشود ، در حالی که دکمه ی سابمیت دوم داده ها را به روش post ارسال میکند.

   <" 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 "  formaction  = "action_page_post.asp "   value  = "Submit using POST  >
 <form/ >

این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.

---

صفت formnovalidate

صفت formnovalidate صفت novalidate فرم را لغو میکند. این صفت با استفاده از صفت type="submit" میتواند مورد استفاده قرار گیرد.

در نمونه مثال زیر یک فرم با دو دکمه 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/ >

این صفت در مرورگر سافاری و اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.

---

صفت formtarget

صفت formtarget مشخص میکند که پاسخ فرم ارسالی به سمت سرور در کجا نمایش داده شود.

صفت formtarget مقدار صفت target عنصر فرم را لغو میکند.

در نمونه کد زیر یک فرم با دو دکمه سابمیت را نشان میدهد که از دو 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/ >

این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.

---

صفت placeholder

از صفت placeholder برای نمایش متنی در فیلد ورودی قبل از ورود داده های کاربر استفاده میشود. مقدار این صفت هنگام تایپ اولین کارکتر توسط کارکتر از بین می رود.

در نمونه مثال زیر نحو ه ی استفاده از این صفت را نشان میدهد :

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

این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.

---

صفت required

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

در نمونه مثال زیر نحو ه ی استفاده از این صفت را نشان میدهد :

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

این صفت در مرورگر سافاری و اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.

منبع:learnsource