عناصر فرم های 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> 

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

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

حتما بخوانید:  انواع ورودی html

مثال :

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

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

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

حتما بخوانید:  XHTML چیست

عنصر <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> 
امتیاز کاربران به این مطلب
۰ نفر - میانگین: ۰
تلگرام

دیدگاه‌تان را ثبت کنید:

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

3 × پنج =

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی