المان های Form
المان فرم دارای چندین المان است.
هر یک از این المان ها به صورت خاصی اطلاعات را دریافت می کنند.
این المان ها را در جدول زیر مشاهده می کنید :
| نام المان | توضیحات |
|---|---|
| input | این المان یک محفظه برای دریافت اطلاعات توسط کاربر تعریف می کند |
| label | المان lable یک توضیح درباره محفظه جمع آوری اطلاعات می دهد |
| select | المان select یک لیست کشویی را تعریف می کند |
| textarea | المان taxtarea یک باکس برای دریافت اطلاعات متنی تعریف می کند |
| button | المان button یک دکمه قابل کلیک را در صفحه تعریف می کند |
| fieldset | المان fieldset داده های یک فرم را گروه بندی می کند |
| legend | المان legend ، یک عنوان برای المان fieldset تعریف می کند |
| datalist | المان datalist ، لیستی از گزینه های پیشفرض را تعریف می کند |
| output | المان output نتیجه یک محاسبه را در صفحه نمایش می دهد |
| option | المان option یک لیست انتخابی را تعریف می کند |
| optgroup | المان optgroup برای گروه بندی گزینه های مرتبط در المان select است. |
المان input
المان input یک محفظه برای جمع آوری اطلاعات توسط کاربر تعریف می کند.
این المان ویژگی type را دارد.
المان input بسته به ویژگی type به کاربر نمایش داده می شود.
مثالی از المان input را به همراه ویژگی type مشاهده می کنید :
<input type="text">المان lable
المان lable توضیحاتی درباره محفظه جمع آوری اطلاعات می دهد.
برای اتصال lable به محفظه جمع آوری اطلاعات باید از دو ویژگی id و for استفاده کنید.
باید برای اتصال ، ویژگی id را برای input تعریف کنید.
در ادامه باید ویژگی for را برای المان lable تعریف کنید.
نکته: توجه داشته باشید که مقادیر lable و input باید برابر باشند.
مثالی از المان lable را مشاهده می کنید :
<lable for="name">name :</lable>
<input type="text" id="name">المان select
برای ایجاد یک لیست کشویی باید از المان select استفاده کنید.
همچنین برای ایجاد دیتا های این لیست باید از المان option استفاده کنید.
مثالی از المان select :
<lable for="name">color :</lable>
<select id="name">
<option>red</option>
<option>blue</option>
<option>green</option>
</select>المان textarea
المان textarea یک محفظه بزرگ برای جمع آوری اطلاعات کاربر تعریف می کند.
این المان دارای دو ویژگی cols و rows می باشد.
مقادیری که این دو ویژگی می گیرند ، تعداد کاراکتر محفظه جمع آوری اطلاعات است.
مثالی از المان textarea را مشاهده می کنید :
<textarea cols="15" rows="25">
دلیل انتخاب رنگ خود را بنویسید
<textarea>المان button
المان button یک دکمه قابل کلیک را در صفحه تعریف می کند.
این المان بسته به ویژگی type در صفحه نمایش داده می شود.
مقادیر ویژگی type در تگ button :
-
- button
- submit
- reset
- menu
مثالی از این المان را مشاهده می کنید :
<button type="reset">المان fieldset
المان fieldset داده های یک فرم را گروه بندی می کند.
مثالی از این المان را مشاهده می کنید :
<fieldset>
<input type="password">
<input type="email">
<input type="submit">
</fieldset>المان legend
المان legend یک عنوان برای المان fieldset تعریف می کند.
مثالی از این المان را مشاهده می کنید :
<fieldset>
<legend>form :</legend>
<input type="password">
<input type="email">
<input type="submit">
</fieldset>المان datalist
المان datalist ، یک لیست از مقادیر پیشفرض را تعریف می کند.
برای تعریف مقادیر پیشفرض باید از المان option استفاده کنید.
مثالی از این المان را مشاهده می کنید :
<datalist>
<option>red</option>
<option>blue</option>
<option>yellow</option>
</datalist>المان output
المان 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
المان optgroup برای گروه بندی گزینه های مرتبط در المان selecte است.
مثالی از این ویژگی را مشاهده می کنید :
<select>
<optgroup>color :</optgroup>
<option>red</option>
<option>blue</option>
<option>yellow</option>
</select>خلاصه درس
در این بخش با المان های مربوط به فرم آشنا شدید.
در این بخش ، شما با انواع روش دریافت اطلاعات ، توسط کاربر آشنا شدید.
مهمترین المان فرم input می باشد.
احسان اسلامی
