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

عنصر <input>

عنصر <input> مهمترین عنصر فرم است.

عنصر <input> بسته به مقداری که در صفت type آن قرار میگیرد، به چندین روش میتواند نمایش داده شود.

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

---

عنصر <select>

عنصر <select> یک لیست کشویی (dropdown list) را تعریف میکند.

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

   <" select  name  = "cars  >
 <option  value  = "volvo " >Volvo   </option >
 <option  value  = "saab " >Saab   </option >
 <option  value  = "fiat " >Fiat   </option >
 <option  value  = "audi " >Audi   </option >
 <select / >

عنصر <option> گزینه هایی را که قابلیت انتخاب دارند را مشخص میکند.

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

برای تعریف گزینه ی از پیش انتخاب شده، از صفت selected برای گزینه ی مورد نظر استفاده میکنیم :

   <option  value  = "fiat "  selected >Fiat   </option >

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

---

عنصر <textarea>

عنصر <textarea> یک فیلد ورودی چند خطی (text area) را تعریف میکند :

   <" textarea  name  = "message "  rows  = "10 "  cols  = "30  >
.The cat was playing in the garden   
<textarea/ >

صفت rows تعدا خطوط قابل مشاهده برای text area را مشخص میکند.

صفت cols پهنای(width) قابل مشاهده برای  text area را مشخص میکند.

---

عنصر <button>

عنصر <button> یک دکمه ی کلیک شدنی را تعریف میکند.

   <button  type  = "button "  onclick  = "alert( 'Hello World! ') " >Click Me!   </button >

در مثال بالا با کلیک روی دکمه پیغامی در مرورگر نمایش داده میشود.

---

عناصر فرم در HTML5

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

• <datalist>
• <keygen>
• <output>

---

عنصر <datalist> در HTML5

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

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

برای ساخت این عنصر، صفت list از عنصر <input> ، باید با مقدار صفت id عنصر <datalist> یکی باشد.

   <" form  action  = "/action_page.php  >
 <" input  list  = "browsers  >
 <" datalist  id  = "browsers  >
 <" option  value  = "Internet Explorer  >
 <" option  value  = "Firefox  >
 <" option  value  = "Chrome  >
 <" option  value  = "Opera  >
 <" option  value  = "Safari  >
 <datalist/ >
 <form/ >

---

عنصر <keygen> در HTML5

هدف عنصر <keygen> فراهم آوردن روشی امن برای اعتبار سنجی کاربران است.

عنصر <keygen> یک فیلد تولید کننده ی جفت کلید را در فرم مشخص میکند.

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

کلید خصوصی به صورت محلی در رایانه کاربر ذخیره میشود و کلید عمومی به سمت سرور ارسال میشود.

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

   <" form  action  = "/action_page.php  >
 <" Username:    <input  type  = "text "  name  = "user  
 <" Encryption:    <keygen  name  = "security  
 <" input  type  = "submit  >
 <form/ >

---

عنصر <output> در HTML5

عنصر <output> نتیجه یک محاسبه را نشان میدهد (مانند نتیجه ای که از یک اسکریپت بدست می آید).

انجام یک محاسبه و نشان دادن نتیجه ی آن در عنصر <output> :

   " form  action  = "/action_page.php >
 "oninput  = "x.value =parseInt(a.value)+parseInt(b.value)  >
 0     
<" input  type  = "range "   id  = "a "  name  = "a "  value  = "50  >
 + 100      
<" input  type  = "number "  id  = "b "  name  = "b "  value  = "50  >
 =     
<output  name  = "x "  for  = "a b " >   </output >
 <br >   <br >     
<" input  type  = "submit  >   
<form/ >

 

منبع:learnsource