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

عنصر <form> می تواند حاوی یکی یا چند تا، از عناصرِ فرم زیر باشد:

• <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 در این مقاله در W3schools توضیح داده شده اند.

بررسی عنصر <label>

عنصر <label> برای چند عنصر مختلف فرم، یک برچسب تعریف می کند. استفاده از عنصر <label> برای صفحه خوان ها(screen-reader) بسیار مفید است؛ زیرا وقتی که کاربر، فوکوس را روی عنصر input ببرد، صفحه خوان، برچسب را با صدای بلند قرائت می کند. ( این ویژگی برای افراد روشندل مفید می باشد).

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

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

بررسی عنصر <select>

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

<label for="cars">یک ماشین را انتخاب کنید:</label>
  <select id="cars" name="cars">
    <option value="neisan">نیسان آبی</option>
    <option value="praid">پراید</option>
    <option value="hatchback">پراید هاچ بک</option>
    <option value="peikan">پیکان</option>
  </select>

عنصر <option> یک گزینه را تعریف می کند، که می تواند در لیست مذکور، انتخاب شود. به طور پیش فرض، اولین آیتم در لیست کشویی، مورد انتخاب قرار می گیرد. برای تعریف یک گزینه ی از قبل انتخاب شده، خصوصیت selected را در آن گزینه اضافه کنید:

<option value="hotchback" selected>پراید هاچ بک</option>

مقادیر قابل مشاهده، در لیست select

استفاده از خصوصیت size برای مشخص کردن تعدادِ مقادیرِ قابل مشاهده(number of visible values) در لیست:

<label for="cars">یک ماشین را انتخاب کنید:</label>
  <select id="cars" name="cars" size="3">
    <option value="neisan">نیسان آبی</option>
    <option value="praid">پراید</option>
    <option value="hotchback">پراید هاچ بک</option>
    <option value="peikan">پیکان</option>
  </select>

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

برای اینکه به کاربر امکان دهیم که بتواند بیش از یک مقدار را انتخاب کند، می توانیم از خصوصیت multiple استفاده کنیم:

<select id="cars" name="cars" size="4" multiple>
    <option value="neisan">نیسان آبی</option>
    <option value="praid">پراید</option>
    <option value="hotchback">پراید هاچ بک</option>
    <option value="peikan">پیکان</option>
</select>

بررسی عنصر <textarea>

عنصر <textarea> باعث ایجاد یک فیلد ورودیِ(input field) چندخطی یعنی یک ناحیه ی چندخطی(text area) می شود:

<textarea name="message" rows="10" cols="30">
همه جای ایران سرای من است
</textarea>

خصوصیت rows تعداد خط های text area که قابل مشاهده باشند را مشخص می کند.

خصوصیت cols درواقع عرض قابل مشاهده ی text area را مشخص می کند.

کد بالا، در مرورگر، به صورت زیر نمایش داده می شود:

ما همچنین می توانیم با استفاده از CSS، سایز text area را مشخص کنیم:

<textarea name="message" style="width:200px; height:600px;">
همه جای ایران سرای من است
</textarea> 

بررسی دکمه ی <button>

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

<button type="button" onclick="alert('سلام به شما')">اینجا کلیک کنید</button>

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

اینجا کلیک کنید

دقت کنید، با این دستور، یک دکمه ی ساده ی سفید نمایش داده می شود و دکمه ی سبز رنگ بالا، به خاطر کدهای آماده ی سایت sina2 تشکیل شده است.

نکته: همواره برای عنصرِ دکمه ی خود، خصوصیت type را مشخص کنید. زیرا ممکن است مرورگرهای متفاوت، از 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="احسان"><br>
    <label for="lname">نام خانوادگی:</label><br>
    <input type="text" id="lname" name="lname" value="عباسی"><br><br>
    <input type="submit" value="ارسال">
  </fieldset>
</form>

بررسی عنصر <datalist>

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

<form action="/action_page.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit" value="ارسال">
</form>

بررسی عنصر <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" value="ارسال">
</form>