طراحی وب

عناصر فرم های html

عناصر فرم های html چیست ؟ و چه ویژگی هایی دارند؟

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

در این درس همه عناصر فرم های  html  توضیح داده شده است.

 

عنصر <input>

مهم ترین عنصر فرم عنصر <input> است. عنصر <input> بسته به نوع ویژگی خود،  می تواند به چندین روش نمایش داده شود.

مثال :

 <input name="firstname" type="text"> 

اگر نوع ویژگی حذف شود، فیلد ورودی نوع پیش فرض را “text” در نظر می گیرد. همه انواع ورودی مختلف در درس بعدی گنجانده شده است.

عناصر فرم های html
عناصر فرم های html

عنصر <select>

عنصر <select> یک لیست drop-down را تعریف می کند.

مثال :

 <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> گزینه ای را تعریف می کند که می تواند انتخاب شود. در حالت پیش فرض، اولین مورد در لیست drop-down انتخاب می شود.

برای تعریف یک گزینه از پیش انتخاب شده، ویژگی selected را به option یا گزینه اضافه کنید:

مثال :

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

مقادیر قابل مشاهده :

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

مثال :

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

اجازه انتخاب چند گانه :

از انتخاب چند گانه استفاده کنید تا به کاربر اجازه دهید که بیشتر از یک مقدار را انتخاب کند.

مثال :

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

عنصر <textarea>

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

مثال :

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

 

ویژگی rows تعداد قابل مشاهده خطوط  را در یک منطقه متن مشخص می کند. ویژگی cols عرض قابل مشاهده یک ناحیه متن را مشخص می کند.

شما همچنین می توانید با استفاده از  CSS اندازه منطقه متن را تعریف کنید:

مثال :

 <textarea name="message" style="width:200px; height:600px">
The cat was playing in the garden.
</textarea> 

 

عنصر <button>

عنصر <button> یک دکمه قابل چک را تعریف می کند:

مثال :

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

 

عناصر فرم  html 5

در  html 5  عناصر زیر اضافه شده است :

  • <datalist>
  • <output>

نکته : مرورگرها عناصر ناشناخته را نمایش نمی دهند. عناصر جدید که در مرورگرهای قدیمی پشتیبانی نمی شوند به صفحه وب شما صدمه نخواهند زد.

درس بعدی : انواع ورودی فرم ها

عنصر <datalist> در  html 5

عنصر  <datalist> یک لیست از گزینه های از پیش تعریف شده برای یک عنصر <input> را مشخص می کند.
کاربران یک لیست کشویی از گزینه های از پیش تعیین شده را به عنوان داده های ورودی مشاهده می کنند.
ویژگی  لیست عنصر  <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> 

 

عنصر <output> در  html 5

عنصر <output> نتیجه یک محاسبه را بیان می کند ( مثل یک چیزی که توسط یک اسکریپت انجام می شود)

مثال :

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

 <form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  ۰
  <input type="range"  id="a" name="a" value="50">
  ۱۰۰ +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form> 
برچسب ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پیشنهاد ویژه

تا 75% ذخیره کنید

این آخرین فرصت استفاده از تخفیف 75% است
این پیشنهاد را ببینید
این پیشنهاد فقط یکبار به شما نمایش داده می‌شود !
close-link
بستن