آشنایی با عناصر فرم در HTML

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


عنصر <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>
خودتان امتحان کنید

 

منتشر شده در ۱۵ خرداد ۱۳۹۶ حمید رضا ملکی ۹۸۴ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده