دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۰
  • مهر

جلسه ۳۴ : عناصر فرم در HTML

  • دسته‌بندی‌ها :
جلسه ۳۴ : عناصر فرم در HTML
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش html را دنبال می کنند. فرم ها یکی از اصلی ترین بخش ها در ساختار صفحات وب اغلب وب سایت ها می باشند چرا که شما برای دریافت ورودی های مختلف از کاربران ناچار به استفاده از فرم ها هستید، فرم ها خود از عناصر مختلفی برای دریافت ورودی های مختلف از کاربران تشکیل می شوند که نوع عناصر فرم در HTML بستگی به نوع ورودی کاربران دارد. در ادامه ی این مباحث ما شما را با مهمترین عناصر فرم در HTML آشنا خواهیم کرد.

      عناصر فرم در HTML

      در ادامه ی این مبحث به معرفی تعدادی از پرکاربردترین عناصر فرم در HTML پرداخته ایم.

      عنصر ورودی <input>

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

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

      مثال : عنصر input
      خودتان امتحان کنید »

      اگر ویژگی type را مشخص نکنید، فیلد input نوع پیش فرض را که “text” است،در نظر می گیرد.

      عنصر <select>

      عنصر <select> یک لیست کشویی را ایجاد می کند.

      مثال : عنصر select
      خودتان امتحان کنید »

      عنصر <option> آیتم های  <select> را که قابل انتخاب هستند را تعریف می کند.

      در حالت پیش فرض اولین آیتم لیست <select> در حالت انتخاب شده است.

      برای مشخص کردن یک عنصر به عنوان انتخاب شده، باید صفت selected را در عنصر <option> مربوطه تعریف کرد:

      مثال : عنصر انتخاب شده
      خودتان امتحان کنید »

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

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

      مثال : ارزش ها
      خودتان امتحان کنید »

      انتخاب های چندگانه

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

      مثال : انتخاب چندگانه
      خودتان امتحان کنید »

      عنصر <textarea>

      عنصر <textarea> یک فیلد ورودی چند خطی را تعریف می کند.

      مثال : عنصر textarea
      خودتان امتحان کنید »

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

      خصیصه cols  عرض یک ناحیه  از متن را مشخص می کند.

      فیلد ورودی زیر، چگونگی نمایش کد HTML بالا را در مرورگر نشان می دهد:

      شما همچنین می توانید با استفاده از CSS اندازه ی عنصر text area را مشخص کنید.

      مثال : تعین اندازه ی textarea
      خودتان امتحان کنید »

      عنصر <button>

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

      مثال : عنصر button
      خودتان امتحان کنید »

      دکمه زیر عملکرد عنصر <button> را با کلیک روی آن نشان می دهد:

      عناصر فرم در HTML 5

      HTML 5 عناصر فرم زیر را ارائه کرده است:

      • <datalist>
      • <output>

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

      عنصر <datalist> در HTML 5

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

      کاربران یک لیست کشویی از گزینه های از پیش تعیین شده را مشاهده می کنند.

      صفت list از عنصر <input> باید به صفت id از عنصر <datalist> اشاره کند:

      مثال : عنصر datalist
      خودتان امتحان کنید »

      عنصر <output> در HTML 5

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

      مثال : خروجی
      خودتان امتحان کنید »

      عناصر فرم در HTML

      تگتوضیحات
      <form>یک فرم HTML را برای ورودی کاربر تعریف می کند.
      <input>یک کنترل ورودی را تعریف می کند.
      <textarea>کنترل ورودی چند خطی را تعریف می کند (text area)
      <label>یک برچسب برای عنصر <input> تعریف می کند.
      <fieldset>عناصر گروه در یک فرم
      <legend>یک عنوان را برای عنصر <fieldset> تعریف می کند.
      <select>یک لیست کشویی را تعریف می کند.
      <optgroup>یک گروه از گزینه های مرتبط را در لیست کشویی تعریف می کند.
      <option>یک گزینه را در لیست کشویی تعریف می کند.
      <button>یک دکمه قابل کلیک را تعریف می کند.
      <datalist>لیستی از گزینه های از پیش تعیین شده برای کنترل های ورودی را مشخص می کند.
      <output>نتیجه محاسبات را تعریف می کند.

      کلام آخر

      یکی از اصلی ترین بخش های تشکیل دهنده ی اغلب وب سایت ها کنترل ها و عناصر فرم می باشند که کار دریافت انواع ورودی از کاربران را انجام می دهند، از این رو برای طراحی یک وب سایت آشنایی با عناصر فرم در HTML از اهمیت ویژه ای برخوردار می باشد.

      در بخش بعدی به انواع ورودی در HTML می پردازیم.

      QR:  جلسه ۳۴ : عناصر فرم در HTML
      به اشتراک بگذارید