المان فرم HTML
این فصل تمام المان فرم HTML را توصیف می کند.
المان های <form> در HTML
المان <form> در HTML می تواند شامل یک یا چند المان شکل زیر باشد:
inputlableselecttextareabuttonfieldsetlegenddatalistoutputoptionoptgroup
المان <input>
یکی از پرکاربردترین عناصر شکل ، المان <input> است.
المان <input> بسته به ویژگی نوع typeاز چند طریق قابل نمایش است.
اگر ویژگی type حذف شود ، قسمت ورودی نوع پیش فرض را می گیرد:
"text".
انواع مختلف ورودی در فصل بعدی شرح داده شده است.
المان <select> را انتخاب کنید
المان <select> لیست کشویی را تعریف می کند:
مثال
<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> گزینه ای را انتخاب می کند که می تواند انتخاب شود.
به طور پیش فرض ، اولین مورد در لیست کشویی انتخاب می شود.
برای تعریف یک گزینه از پیش انتخاب شده ، ویژگی انتخاب شده selected را به
گزینه اضافه کنید:
مقادیر قابل مشاهده:
از ویژگی 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>
خودتان آزمایش کنید »
اجازه انتخاب های چندگانه:
از ویژگی چندگانه multiple استفاده کنید تا به کاربر اجازه دهید بیش از یک
مقدار را انتخاب کند:
مثال
<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> یک قسمت ورودی چند خطی را تعریف می کند (یک منطقه
متن):
مثال
<textarea name="message" rows="10" cols="30">
گربه در باغ بازی می
کرد.
</textarea>
خودتان آزمایش کنید »
ویژگی سطرها rows تعداد قابل مشاهده خطوط در یک متن را مشخص می کند.
مشخصه cols عرض قابل مشاهده یک منطقه متن را مشخص می کند.
به این ترتیب کد HTML بالا در یک مرورگر نمایش داده می شود:
با استفاده از CSS می توانید اندازه متن را نیز تعریف کنید:
مثال
<textarea name="message"
style="width:200px; height:600px;">
گربه در باغ بازی می کرد.
</textarea>
خودتان آزمایش کنید »
المان دکمه <button>
المان <button> یک دکمه قابل کلیک را تعریف می کند:
:
به این ترتیب کد HTML بالا در یک مرورگر نمایش داده می شود:
توجه: همیشه ویژگی نوع type را برای المان دکمه مشخص کنید. مرورگرهای مختلف ممکن است از انواع مختلف پیش فرض برای المان دکمه استفاده کنند.
المان های فرم HTML5
HTML5 المان های فرم زیر را اضافه کرد:
<datalist><output>
توجه : : مرورگرها موارد ناشناخته را نمایش نمی دهند. عناصر جدیدی که در مرورگرهای قدیمی پشتیبانی نمی شوند ، صفحه وب شما را "از بین می برند".
المان <datalist>
المان <datalist> لیستی از گزینه های از پیش تعریف شده برای المان <input> را مشخص می کند.
.
کاربران هنگام وارد کردن داده ها ، یک لیست کشویی از گزینه های از پیش تعریف شده مشاهده می کنند.
ویژگی لیست list المان <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>
المان <output> نتیجه یک محاسبه را نشان می دهد (مانند آنچه توسط
اسکریپت انجام شده است).
مثال
یک محاسبه را انجام دهید و نتیجه را در یک عنصر <output> نشان دهید:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a"
value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
خودتان
آزمایش کنید »
تمرینات HTML
المان های فرم HTML
| برچسب | توضیح |
|---|---|
| <form> | فرم HTML را برای ورودی کاربر تعریف می کند |
| <input> | یک کنترل ورودی را تعریف می کند |
| <textarea> | کنترل ورودی چند خطی را تعریف می کند (منطقه متن) |
| <label> | یک برچسب برای عنصر <input>تعریف می کند |
| <fieldset> | المان مرتبط را در یک فرم گروه بندی می کند |
| <legend> | عنوان المان <fieldset> را تعریف می کند |
| <select> | لیست کشویی را تعریف می کند |
| <optgroup> | یک گروه از گزینه های مرتبط را در یک لیست کشویی تعریف می کند |
| <option> | یک گزینه را در یک لیست کشویی تعریف می کند |
| <button> | یک دکمه قابل کلیک را تعریف می کند |
| <datalist> | لیستی از گزینه های از پیش تعریف شده را برای کنترل های ورودی مشخص می کند |
| <output> | نتیجه یک محاسبه را تعریف می کند |
سایت توسط چارچوب farsiw3.ir طراحی شده است.
