HTML Form Elements
در این بخش از آموزش طراحی سایت تمام عناصر مختلف فرم HTML توضیح داده می شود.
<HTML <form می تواند شامل یک یا چند عنصر فرم زیر باشد:
1- <input>
2- <label>
3- <select>
4- <textarea>
5- <button>
6- <fieldset>
7- <legend>
8- <datalist>
9- <output>
10- <option>
11- <optgroup>
The <input> Element
یکی از پرکاربردترین عناصر فرم، عنصر <input> است.
عنصر <input> بسته به ویژگی type می تواند به روش های مختلفی نمایش داده شود.
![The input element in HTML The input element in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/1.png)
خروجی قطعه کد بالا در مرورگر به صورت زیر است.
![The input element in HTML The input element in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/2.png)
The <label> Element
عنصر <label> یک برچسب برای چندین عنصر فرم تعریف می کند.
عنصر <label> برای کاربران صفحه خوان مفید است، زیرا وقتی کاربر روی عنصر ورودی تمرکز می کند، صفحه خوان برچسب را با صدای بلند می خواند.
عنصر <label> همچنین به کاربرانی کمک می کند که در کلیک کردن بر روی مناطق بسیار کوچک (مانند دکمه های رادیویی یا چک باکس ها) مشکل دارند - زیرا وقتی کاربر روی متن موجود در عنصر <label> کلیک می کند، دکمه رادیویی/چک باکس را تغییر می دهد.
ویژگی for تگ <label> باید برابر با ویژگی id عنصر <input> باشد تا آنها را به یکدیگر متصل کند.
The <select> Element
عنصر <select> یک لیست کشویی (drop-down list) را تعریف می کند:
![the select element in HTML the select element in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/3.png)
خروجی قطعه کد بالا در مرورگر به صورت زیر است.
![the select element in HTML the select element in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/4.png)
عناصر <option> گزینه ای را تعریف می کند که می تواند انتخاب شود.
به طور پیش فرض، اولین آیتم در لیست کشویی انتخاب شده است.
برای تعریف یک گزینه از پیش انتخاب شده، ویژگی انتخاب شده را به گزینه اضافه کنید:
![عنصر select در طراحی سایت عنصر select در طراحی سایت](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/5.png)
خروجی قطعه کد بالا در مرورگر به صورت زیر است.
![select element in HTML select element in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/6.png)
مقادیر قابل مشاهده:
از ویژگی size برای تعیین تعداد مقادیر قابل مشاهده استفاده کنید:
![visible values in HTML visible values in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/7.png)
خروجی قطعه کد بالا در مرورگر به صورت زیر است.
![visible values in HTML visible values in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/8.png)
ایجاد امکان چندین انتخاب:
از ویژگی چندگانه (multiple attribute) استفاده کنید تا به کاربر اجازه دهید بیش از یک مقدار را انتخاب کند:
![multiple selection in HTML multiple selection in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/9.png)
خروجی قطعه کد بالا در مرورگر به صورت زیر است.
![multiple selection in web design and HTML multiple selection in web design and HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/10.png)
The <textarea> Element
عنصر <textarea> یک فیلد ورودی چند خطی (یک ناحیه متنی) را تعریف می کند:
![textarea element in HTML textarea element in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/11.png)
ویژگی rows تعداد قابل مشاهده خطوط را در یک ناحیه متنی مشخص می کند.
ویژگی cols عرض قابل مشاهده یک ناحیه متنی را مشخص می کند.
به این ترتیب کد HTML بالا در یک مرورگر به صورت زیر نمایش داده می شود:
![textarea element in HTML textarea element in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/12.png)
همچنین می توانید اندازه ناحیه متن را با استفاده از CSS تعریف کنید:
![textarea element in HTML textarea element in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/13.png)
خروجی قطعه کد بالا در مرورگر به صورت زیر است.
![textarea element in web designing textarea element in web designing](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/14.png)
The <button> Element
عنصر <button> یک دکمه قابل کلیک را تعریف می کند:
![button element in HTML button element in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/15.png)
به این ترتیب کد HTML بالا در مرورگر به صورت زیر نمایش داده می شود:
![button element in طراحی سایت button element in طراحی سایت](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/16.png)
توجه: همیشه ویژگی type را برای عنصر button مشخص کنید. مرورگرهای مختلف ممکن است از انواع مختلف پیش فرض برای عنصر button استفاده کنند.
عناصر <fieldset> و <legend>
عنصر <fieldset> برای گروه بندی داده های مرتبط در یک فرم استفاده می شود.
عنصر <legend> یک عنوان برای عنصر <fieldset> تعریف می کند.
![fieldset and legend in HTML fieldset and legend in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/17.png)
به این ترتیب کد HTML بالا در یک مرورگر به صورت زیر نمایش داده می شود:
![fieldset and legend in web design fieldset and legend in web design](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/18.png)
The <datalist> Element
عنصر <datalist> لیستی از گزینه های از پیش تعریف شده را برای عنصر <input> مشخص می کند.
کاربران با وارد کردن داده ها، فهرست کشویی از گزینه های از پیش تعریف شده را مشاهده خواهند کرد.
ویژگی لیست (list attribute) عنصر <input>، باید به ویژگی id عنصر <datalist> اشاره کند.
![datalist Element in HTML datalist Element in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/19.png)
خروجی قطعه کد بالا در مرورگر به صورت زیر است.
![datalist element در طراحی سایت datalist element در طراحی سایت](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/20.png)
The <output> Element
عنصر <output> نشان دهنده نتیجه یک محاسبه است (مانند محاسبه ای که توسط یک اسکریپت انجام می شود).
مثال زیر یک محاسبه انجام می دهد و نتیجه را در عنصر <output> نشان می دهد:
![output element in HTML output element in HTML](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/21.png)
خروجی قطعه کد بالا در مرورگر به صورت زیر است.
![output Element in Web design output Element in Web design](../../../uploadedImages/articleContent/WebDesign/HTML/32-%20HTML%20Form%20Elements/22.png)
HTML Form Elements
1- <form>
یک فرم HTML برای ورودی کاربر تعریف می کند.
2- <input>
یک کنترل ورودی را تعریف می کند.
3- <textarea>
یک کنترل ورودی چند خطی (منطقه متن) را تعریف می کند.
4- <label>
یک برچسب برای عنصر <input> تعریف می کند.
5- <fieldset>
عناصر مرتبط را در یک فرم گروه بندی می کند.
6- <legend>
یک عنوان برای عنصر <fieldset> تعریف می کند.
7- <select>
یک لیست کشویی (drop-down list) را تعریف می کند.
8- <optgroup>
گروهی از گزینه های مرتبط را در یک لیست کشویی تعریف می کند.
9- <option>
یک گزینه را در یک لیست کشویی تعریف می کند.
10- <button>
یک دکمه قابل کلیک را تعریف می کند.
11- <datalist>
فهرستی از گزینه های از پیش تعریف شده برای کنترل های ورودی را مشخص می کند.
12- <output>
نتیجه یک محاسبه را مشخص می کند.