بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

المان فرم HTML


این فصل تمام المان فرم HTML را توصیف می کند.

المان های <form> در HTML

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

  • input
  • lable
  • select
  • textarea
  • button
  • fieldset
  • legend
  • datalist
  • output
  • option
  • optgroup

المان <input>

یکی از پرکاربردترین عناصر شکل ، المان <input> است.

المان <input> بسته به ویژگی نوع typeاز چند طریق قابل نمایش است.

مثال

<input name="firstname" type="text">
خودتان آزمایش کنید »

اگر ویژگی type حذف شود ، قسمت ورودی نوع پیش فرض را می گیرد: "text".

انواع مختلف ورودی در فصل بعدی شرح داده شده است.


المان <select> را انتخاب کنید

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

مثال

<select 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 value="fiat" selected>Fiat</option>
خودتان آزمایش کنید »

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

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

مثال

<select 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 استفاده کنید تا به کاربر اجازه دهید بیش از یک مقدار را انتخاب کند:

مثال

<select 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">
گربه در باغ بازی می کرد.
</textarea>
خودتان آزمایش کنید »

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

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

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

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

مثال

<textarea name="message" style="width:200px; height:600px;">
گربه در باغ بازی می کرد.
</textarea>
خودتان آزمایش کنید »

المان دکمه <button>

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

مثال

<button type="button" onclick="alert('سلام دنیا')">کلیک کنید</button>
خودتان آزمایش کنید »

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


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


المان های فرم HTML5

HTML5 المان های فرم زیر را اضافه کرد:

  • <datalist>
  • <output>

توجه : : مرورگرها موارد ناشناخته را نمایش نمی دهند. عناصر جدیدی که در مرورگرهای قدیمی پشتیبانی نمی شوند ، صفحه وب شما را "از بین می برند".


المان <datalist>

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

کاربران هنگام وارد کردن داده ها ، یک لیست کشویی از گزینه های از پیش تعریف شده مشاهده می کنند.

ویژگی لیست list المان <input> باید به ویژگی id المان <datalist> ارجاع کند.

OperaSafariChromeFirefoxInternet Explorer

مثال

<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> نتیجه یک محاسبه را نشان می دهد (مانند آنچه توسط اسکریپت انجام شده است).

OperaSafariChromeFirefoxInternet Explorer

مثال

یک محاسبه را انجام دهید و نتیجه را در یک عنصر <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

خود را با تمرین تست کنید

تمرین:

در فرم زیر ، یک لیست کشویی خالی با نام " cars" اضافه کنید.

<form action="/action_page.php">
<>
</>
</form>

تمرین را شروع کنید


المان های فرم HTML

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





این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir