عناصر فرم

Main Page Tutorial
موارد آموزشی
فرم‌های HTML
۱	فرم‌ها
۲	عناصر فرم
۳	انواع ورودی
۴	ویژگی‌های ورودی
۵	ویژگی ورودی Form
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

این بخش همهٔ عنصرهای فرم در HTML را توصیف می‌کند.

عنصر <input>

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

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

مثال

<input type="text" id="firstname" name="firstname">

مشاهدهٔ نتیجه

اگر ویژگی type حذف شود، فیلد ورودی نوع پیش فرض را می‌پذیرد:”text” (متن).

همهٔ انواع مختلف ورودی در بخش بعدی پوشش داده می‌شوند: انواع ورودی در HTML

عنصر <select>

عنصر <select> یک لیست کرکره‌ای (به انگلیسی: drop-down) را مشخص می‌کند:

مثال

1<select id="cars" name="cars">
2  <option value="volvo">Volvo</option>
3  <option value="saab">Saab</option>
4  <option value="fiat">Fiat</option>
5  <option value="audi">Audi</option>
6</select>

مشاهدهٔ نتیجه

عنصر <option> گزینه ای را مشخص می‌کند که می‌تواند انتخاب شود.

بطور پیش فرض، اولین گزینهٔ لیست کرکره ای انتخاب شده‌است.

برای تعیین گزینه از پیش انتخاب شده، ویژگی selected را به آن گزینه اضافه کنید:

مثال

<option value="fiat" selected>Fiat</option>

مشاهدهٔ نتیجه

مقدارهای قابل رویت

از ویژگی size برای تعیین تعداد مقادیر قابل رویت استفاده کنید:

مثال

1<select name="cars" size="3">
2  <option value="volvo">Volvo</option>
3  <option value="saab">Saab</option>
4  <option value="fiat">Fiat</option>
5  <option value="audi">Audi</option>
6</select>

مشاهدهٔ نتیجه

امکان انتخاب چند گزینه:

از ویژگی multiple برای ایجاد امکان انتخاب بیش از یک گزینه استفاده می‌شود:

مثال

1<select name="cars" size="4" multiple>
2  <option value="volvo">Volvo</option>
3  <option value="saab">Saab</option>
4  <option value="fiat">Fiat</option>
5  <option value="audi">Audi</option>
6</select>

مشاهدهٔ نتیجه

عنصر <textarea>

عنصر <textarea> فیلد ورودی چند خطی را مشخص می‌کند (یک حوزه متنی):

مثال

1<textarea name="message" rows="10" cols="30">
2The cat was playing in the garden.
3</textarea>

مشاهدهٔ نتیجه

ویژگی rows تعداد خطوط قابل رویت در حوزه متن را تعیین می‌کند.

ویژگی cols عرض یک حوزه متن را تعیین می‌کند.

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

ساخت نمونه مثال این بخش در دست اقدام است.

همچنین می‌توان با استفاده از CSS اندازه حوزه متن را نیز تعیین کرد:

مثال

1<textarea name="message" style="width:200px; height:600px;">
2The cat was playing in the garden.
3</textarea>

مشاهدهٔ نتیجه

عنصر <button>

عنصر <button> یک کلید قابل کلیک را مشخص می‌کند:

مثال

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

مشاهدهٔ نتیجه

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

ساخت نمونه مثال این بخش در دست اقدام است.

توجه: همیشه ویژگی type برای عنصر کلید مشخص کنید. مرورگرهای مختلف ممکن است typeهای پیش فرض متفاوتی برای عنصر button داشته باشند.

عناصر <fieldset> و <legend>

عنصر <fieldset> برای گروه‌بندی داده‌های مرتبط در یک فرم استفاده می‌شود.

عنصر <legend> یک زیرنویس برای عنصر <fieldset> تعریف می‌کند.

مثال

 1<form action="/action_page.php">
 2  <fieldset>
 3    <legend>Personalia:</legend>
 4    <label for="fname">First name:</label><br>
 5    <input type="text" id="fname" name="fname" value="John"><br>
 6    <label for="lname">Last name:</label><br>
 7    <input type="text" id="lname" name="lname" value="Doe"><br><br>
 8    <input type="submit" value="Submit">
 9  </fieldset>
10</form>

مشاهدهٔ نتیجه

کد HTML بالا به این شکل در مرورگر نمایش داده می‌شود: ساخت نمونه مثال این بخش در دست اقدام است.

عنصر <datalist>

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

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

ویژگی list عنصر <input> باید به ویژگی id مربوط به عنصر <datalist> ارجاع دهد.

مثال

 1<form action="/action_page.php">
 2  <input list="browsers">
 3  <datalist id="browsers">
 4    <option value="Internet Explorer">
 5    <option value="Firefox">
 6    <option value="Chrome">
 7    <option value="Opera">
 8    <option value="Safari">
 9  </datalist>
10</form>

مشاهدهٔ نتیجه

عنصر <output>

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

مثال

یک محاسبه انجام داده و نتایج را در عنصر <output> نشان می‌دهد:

 1<form action="/action_page.php"
 2  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
 3  0
 4  <input type="range"  id="a" name="a" value="50">
 5  100 +
 6  <input type="number" id="b" name="b" value="50">
 7  =
 8  <output name="x" for="a b"></output>
 9  <br><br>
10  <input type="submit">
11</form>

مشاهدهٔ نتیجه

عنصرهای فرم HTML

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

برای دسترسی به لیست کامل همهٔ تگ‌های HTML از مرجع تگ HTML ما دیدن کنید.

صفحهٔ بعد»

«صفحهٔ قبل