عناصر فرم در HTML

عناصر فرم در HTML

عنصر <form> در HTML می‌تواند شامل یک یا چند مورد از عناصر فرم زیر باشد:

• <input>

• <label>

• <select>

• <textarea>

• <button>

• <fieldset>

• <legend>

• <datalist>

• <output>

• <option>

• <optgroup>

عنصر <input>

یکی از پرکاربردترین عناصر فرم، عنصر <input> است. عنصر <input> بسته به خصوصیت type آن، می‌تواند به چندین روش نمایش داده شود.

مثال

<label for="fname">نام:</label>
<input type="text" id="fname" name="fname" />

تمام مقادیر مختلف خصوصیت type در فصل بعد پوشش داده شده‌اند: انواع ورودی در HTML.

عنصر <label>

عنصر <label> یک برچسب برای چندین عنصر فرم تعریف می‌کند. این عنصر برای کاربران صفحه‌خوان ♿️ بسیار مفید است، زیرا وقتی کاربر روی عنصر ورودی تمرکز می‌کند، صفحه‌خوان برچسب را با صدای بلند می‌خواند. عنصر <label> همچنین به کاربرانی که در کلیک کردن روی نواحی بسیار کوچک (مانند دکمه‌های رادیویی یا چک‌باکس‌ها) مشکل دارند کمک می‌کند؛ زیرا وقتی کاربر روی متن داخل <label> کلیک می‌کند، دکمه/چک‌باکس مربوطه فعال یا غیرفعال می‌شود.

خصوصیت for در تگ <label> باید برابر با خصوصیت id در عنصر <input> باشد تا این دو به یکدیگر متصل شوند.

عنصر <select>

عنصر <select> یک لیست کشویی (drop-down list) تعریف می‌کند:

مثال

<label for="cars">یک ماشین انتخاب کنید:</label>
<select id="cars" 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 را به آن option اضافه کنید:

مثال

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

مقادیر قابل مشاهده

از خصوصیت size برای مشخص کردن تعداد مقادیر قابل مشاهده استفاده کنید: مثال

<label for="cars">یک ماشین انتخاب کنید:</label>
<select id="cars" 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 استفاده کنید تا به کاربر اجازه دهید بیش از یک مقدار را انتخاب کند: مثال

<label for="cars">یک ماشین انتخاب کنید:</label>
<select id="cars" 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">
The cat was playing in the garden.
</textarea>

خصوصیت rows تعداد خطوط قابل مشاهده در یک ناحیه متنی را مشخص می‌کند. خصوصیت cols عرض قابل مشاهده یک ناحیه متنی را مشخص می‌کند.

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

مثال

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

عنصر <button>

عنصر <button> یک دکمه قابل کلیک را تعریف می‌کند:

مثال

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

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

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

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

مثال

<form action="/action_page.php">
  <fieldset>
    <legend>اطلاعات شخصی:</legend>
    <label for="fname">نام:</label><br />
    <input type="text" id="fname" name="fname" value="John" /><br />
    <label for="lname">نام خانوادگی:</label><br />
    <input type="text" id="lname" name="lname" value="Doe" /><br /><br />
    <input type="submit" value="ارسال" />
  </fieldset>
</form>

این کد در مرورگر به این صورت نمایش داده می‌شود:

Personalia:
First name:
John

Last name:
Doe

عنصر <datalist>

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

مثال

<form action="/action_page.php">
  <input list="browsers" />
  <datalist id="browsers">
    <option value="Edge"></option>
    <option value="Firefox"></option>
    <option value="Chrome"></option>
    <option value="Opera"></option>
    <option value="Safari"></option>
  </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