میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

تگ های فرم

تگ های فرم در  Html

با عرض سلام و خسته نباشید خدمت تمام کاربران عزیز و  برنامه نویسان گرامی امروز با مبحث تگ های فرم در HTML در خدمت شما دوستان عزیز خواهیم بود  برای اینکه  بتونین دیگر مباحث مربوط به برنامه نویسی 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”>

تگ label

تگ <label> برای چندین تگ فرم یک برچسب را تعریف می کند.

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

تگ <label> همچنین به کاربرانی که در کلیک کردن روی مناطق بسیار کوچک (مانند دکمه های رادیویی یا کادرهای انتخاب) مشکل دارند کمک می کند – زیرا وقتی کاربر متن را در تگ <label> کلیک می کند ، دکمه / جعبه رادیویی را بهش متصل می کند.

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

 

 

تگ select

تگ <select> لیست کشویی را تعریف می کند:

<label for=”cars”>ماشین</label>
<select id=”cars” name=”cars”>
<option value=”pride”>پراید</option>
<option value=”samand”>سمند</option>
<option value=”D”>دوو</option>
<option value=”Rd”>آردی</option>
</select>

نتیجه در مرورگر :


تگ <option> به طور پیش فرض گزینه ای را انتخاب می کند که می تواند انتخاب شود. به طور پیش فرض ، اولین مورد در لیست کشویی انتخاب می شود.

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

<option value=”RD” selected>آردی</option>

 

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

<label for=”cars”>ماشین</label>
<select id=”cars” name=”cars” size=”3″>
<option value=”pride”>پراید</option>
<option value=”samand”>سمند</option>
<option value=”D”>دوو</option>
<option value=”Rd”>آردی</option>
</select>

نتیجه در مرورگر :


 

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

<label for=”cars”>ماشین</label>
<select id=”cars” name=”cars” size=”3″ multiple>
<option value=”pride”>پراید</option>
<option value=”samand”>سمند</option>
<option value=”D”>دوو</option>
<option value=”Rd”>آردی</option>
</select>

نتیجه در مرورگر :


 

 

تگ textarea

تگ textarea  یک قسمت ورودی چند خطی را تعریف می کند (یک منطقه متن):

<textarea name=”message” rows=”10″ cols=”30″>
متن خود را اینجا وارد کنید

</textarea>

ویژگی rows تعداد قابل مشاهده خطوط در یک text area را مشخص می کند.
صفت cols عرض قابل مشاهده یک text area را مشخص می کند.
با استفاده از CSS می توانید اندازه متن را نیز تعریف کنید.

تگ button

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

<button type=”button” onclick=”alert(‘Hello World!’)”>Click Me!</button>

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

 

عناصر fieldset و legend

از تگ <fieldset> برای گروه بندی داده های مرتبط در یک فرم استفاده می شود.
عنصر <legend> عنوانی را برای عنصر <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=”Submit”>
  </fieldset>
</form>

تگ datalist

تگ datalist لیستی از گزینه های از پیش تعریف شده برای تگ input را مشخص می کند.
کاربران هنگام ورود داده ها ، یک لیست کشویی از گزینه های از پیش تعریف شده مشاهده می کنند.
ویژگی لیست تگ 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 نتیجه یک محاسبه را نشان می دهد (مانند آنچه توسط اسکریپت انجام شده است).

<form action=”/action_page.php”
oninput=”x.value=parseInt(a.value)+parseInt(b.value)”
>

  ۰
  <input type=”range”  id=”a” name=”a” value=”50″>
  ۱۰۰ +
  <input type=”number” id=”b” name=”b” value=”50″>
  =
  <output name=”x” for=”a b”></output>
  <br><br>
  <input type=”submit”>
</form>

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

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟