المان های فرم در HTML

المان فرم دارای چندین المان است.

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

این المان ها را در جدول زیر مشاهده می کنید :

المان input یک محفظه برای جمع آوری اطلاعات توسط کاربر تعریف می کند.

این المان ویژگی type را دارد.

المان input بسته به ویژگی type به کاربر نمایش داده می شود.

مثالی از المان input را به همراه ویژگی type مشاهده می کنید :

<input type="text">

المان lable توضیحاتی درباره محفظه جمع آوری اطلاعات می دهد.

برای اتصال lable به محفظه جمع آوری اطلاعات باید از دو ویژگی id و for استفاده کنید.

باید برای اتصال ، ویژگی id را برای input تعریف کنید.

در ادامه باید ویژگی for را برای المان lable تعریف کنید.

نکته: توجه داشته باشید که مقادیر lable و input باید برابر باشند.

 مثالی از المان lable را مشاهده می کنید :

<lable for="name">name :</lable>
<input type="text" id="name">

برای ایجاد یک لیست کشویی باید از المان select استفاده کنید.

همچنین برای ایجاد دیتا های این لیست باید از المان option استفاده کنید.

مثالی از المان select :

<lable for="name">color :</lable>
<select id="name">
    <option>red</option>
    <option>blue</option>
    <option>green</option>
</select>

المان textarea یک محفظه بزرگ برای جمع آوری اطلاعات کاربر تعریف می کند.

این  المان دارای دو ویژگی cols و rows می باشد.

مقادیری که این دو ویژگی می گیرند ، تعداد کاراکتر محفظه جمع آوری اطلاعات است.

مثالی از المان textarea را مشاهده می کنید :

<textarea cols="15" rows="25">
    دلیل انتخاب رنگ خود را بنویسید
<textarea>

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

این المان بسته به ویژگی type در صفحه نمایش داده می شود.

مقادیر ویژگی type در تگ button :

• • button
  • submit
  • reset
  • menu

مثالی از این المان را مشاهده می کنید :

<button type="reset">

المان fieldset داده های یک فرم را گروه بندی می کند.

مثالی از این المان را مشاهده می کنید :

<fieldset>
    <input type="password">
    <input type="email">
    <input type="submit">
</fieldset>

المان legend یک عنوان برای المان fieldset تعریف می کند.

مثالی از این المان را مشاهده می کنید :

<fieldset>
    <legend>form :</legend>
    <input type="password">
    <input type="email">
    <input type="submit">
</fieldset>

المان datalist ، یک لیست از مقادیر پیشفرض را تعریف می کند.

برای تعریف مقادیر پیشفرض باید از المان option استفاده کنید.

مثالی از این المان را مشاهده می کنید :

<datalist>
    <option>red</option>
    <option>blue</option>
    <option>yellow</option>
</datalist>

المان output نتیجه یک محاسبه را در صفحه نمایش می دهد.

مثالی از این المان را مشاهده می کنید :

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" value="50">
    +<input type="number" id="b" value="25">
    =<output name="x" for="a b"></output>
</form>

المان optgroup برای گروه بندی گزینه های مرتبط در المان selecte است.

مثالی از این ویژگی را مشاهده می کنید :

<select>
    <optgroup>color :</optgroup>
    <option>red</option>
    <option>blue</option>
    <option>yellow</option>
</select>