آموزش HTML - عناصر فرم

فرم های HTML به شما امکان می دهد ورودی های کاربر مانند متن، اعداد، چک باکس ها، دکمه های رادیویی و موارد دیگر را جمع آوری کنید. در اینجا رایج ترین عناصر فرم HTML را بررسی می کنیم:

<form>: این عنصر یک ظرف برای تمام عناصر فرم ایجاد می کند.همچنین مشخص می کند که هنگام ارسال فرم چگونه باید داده های فرم به سرور ارسال شود.

<form action="/submit-form.php" method="post">
  <!-- عناصر فرم در اینجا آورده می شود -->
</form>

<input>: این عنصر یک فیلد ورودی فرم مانند یک فیلد متنی، چک باکس یا دکمه رادیویی ایجاد می کند. ویژگی type نوع فیلد ورودی را تعیین می کند.

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

<label>: این عنصر یک برچسب برای یک عنصر فرم ایجاد می کند. با استفاده از ویژگی for با عنصر فرم مرتبط می شود.

<label for="email">پست الکترونیک:</label>
<input type="email" id="email" name="email">

<select> و <option>: این عناصر یک لیست کشویی ایجاد می کنند. عنصر <select> لیست را ایجاد می کند و عناصر <option> گزینه ها را در لیست ایجاد می کنند.

<label for="color">رنگ مورد علاقه:</label>
<select id="color" name="color">
  <option value="red">قرمز</option>
  <option value="green">سبز</option>
  <option value="blue">آبی</option>
</select>

<textarea>: این عنصر یک فیلد ورودی متن چند خطی ایجاد می کند.

<label for="message">پیام:</label>
<textarea id="message" name="message"></textarea>

<button>: این عنصر دکمه ای ایجاد می کند که می تواند برای ارسال فرم، تنظیم مجدد فرم یا انجام برخی اقدامات دیگر استفاده شود.

<button type="submit">ارسال</button>
<button type="reset">بازنشانی</button>

<fieldset> و <legend>: این عناصر یک کادر برای عناصر فرم مرتبط و یک عنوان برای کادر ایجاد می کنند.

<fieldset>
  <legend>آدرس حمل و نقل</legend>
  <!-- عناصر فرم آدرس حمل و نقل در اینجا آورده می شود -->
</fieldset>

<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>