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

دروس 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


این فصل ویژگی های مختلف المان input را توصیف می کند.

ویژگی مقدار (vlaue)

ویژگی مقدار ورودی value مقدار اولیه را برای یک قسمت ورودی مشخص می کند:

فیلدهای ورودی با مقادیر اولیه (پیش فرض):

مثال

<form action="">
  نام:<br>
  <input type="text" name="firstname" value="احمد ">
</form>
خودتان آزمایش کنید »

ویژگی فقط خواندنی (readonly)

ویژگی فقط خواندنی readonly ورودی مشخص می کند که یک قسمت ورودی فقط خواندنی است.

یک قسمت ورودی فقط خواندنی قابل اصلاح نیست (با این وجود کاربر می تواند در آن تب بزند ، آن را برجسته کند و متن را از آن کپی کند).

هنگام ارسال فرم ، مقدار یک قسمت ورودی فقط خواندنی ارسال می شود!

یک قسمت ورودی فقط خواندنی:

مثال

<form action="">
  نام:<br>
  <input type="text" name="firstname" value="احمد" readonly>
</form>
خودتان آزمایش کنید »

ویژگی غیر فعال (disabled)

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

یک قسمت ورودی غیرفعال غیرقابل استفاده و قابل کلیک نیست.

هنگام ارسال فرم ، مقدار یک قسمت ورودی غیرفعال ارسال نمی شود!

مثال

<form action="">
  نام:<br>
  <input type="text" name="firstname" value="احمد" disabled>
</form>
خودتان آزمایش کنید »

اندازه ویژگی (size)

ویژگی اندازه size ورودی ، عرض قابل مشاهده در نویسه های یک قسمت ورودی را مشخص می کند.

مقدار پیش فرض اندازه 20 است.

توجه: ویژگی size با انواع ورودی زیر کار می کند: متن ، جستجو ، تلفن ، آدرس اینترنتی ، ایمیل و رمز عبور.

مثال

<form action="">
  نام:<br>
  <input type="text" name="firstname" value="احمد" size="40">
</form>
خودتان آزمایش کنید »

ویژگی حداکثر طول (maxlength)

ویژگی حداکثر maxlength ورودی حداکثر تعداد نویسه های مجاز در یک قسمت ورودی را مشخص می کند.

توجه: هنگام تنظیم حداکثر طول maxlength ، قسمت ورودی بیش از تعداد نویسه مشخص شده را نمی پذیرد. با این حال ، این ویژگی هیچ بازخوردی ارائه نمی دهد. بنابراین ، اگر می خواهید به کاربر هشدار دهید ، باید کد JavaScript را بنویسید.

مثال

<form action="">
  نام:<br>
  <input type="text" name="firstname" maxlength="10">
</form>
خودتان آزمایش کنید »

توجه : : محدودیت های ورودی ایمن نیستند و JavaScript روش های زیادی برای افزودن ورودی معتبر ارائه می دهد. برای محدود کردن ایمن ورودی ، باید توسط گیرنده (سرور) نیز تأیید شود!


ویژگی های HTML5

HTML5 ویژگی های زیر را برای <input> اضافه کرد:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

و ویژگی های زیر برای <form>:

  • autocomplete
  • novalidate

ویژگی تکمیل خودکار (autocomplete)

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

هنگامی که تکمیل خودکار فعال است ، مرورگر به طور خودکار ورودی را براساس مقادیری که کاربر قبلاً وارد کرده است ، تکمیل می کند.

نکته :: می توانید تکمیل خودکار را برای فرم "روشن" "on" فعال کرده و "خاموش" "off" را برای برخی از فیلدهای ورودی غیرفعال کنید ، یا بالعکس.

ویژگی تکمیل خودکار autocomplete با <form> و انواع <input> زیر کار می کند: متن ، جستجو ، آدرس اینترنتی ، تلفن ، ایمیل ، رمز ورود ، برچسب های تاریخ ، دامنه و رنگ.

Opera Safari Chrome Firefox Internet Explorer

مثال

فرم HTML با تکمیل خودکار (و برای یک قسمت ورودی غیرفعال است):

<form action="/action_page.php" autocomplete="on">
  نام:<input type="text" name="fname"><br>
  نام خانوادگی : <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>
خودتان آزمایش کنید »

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


ویژگی را نامعتبر کنید (اعتبار سنجی نمی کند) novalidate

ویژگی novalidateیک ویژگی <form> است.

در صورت وجود ، novalidate نشان می دهد که داده فرم نباید پس از ارسال تأیید شود.

Opera Safari Chrome Firefox Internet Explorer

مثال

نشان می دهد که فرم پس از ارسال قابل تأیید نیست:

<form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>
خودتان آزمایش کنید »

ویژگی فوکوس خودکار autofocus

ویژگی فوکوس خودکار autofocus مشخص می کند که قسمت ورودی باید به طور خودکار روی بارگذاری صفحه تمرکز کند.

Opera Safari Chrome Firefox Internet Explorer

مثال

اجازه دهید قسمت ورودی "نام" به طور خودکار بر روی بارگذاری صفحه تمرکز کند:

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

ویژگی فورم form

ویژگی فرم form یک یا چند شکل را تعریف می کند که المان <input> به آنها تعلق دارد.

Opera Safari Chrome Firefox Internet Explorer

مثال

قسمت ورودی خارج از فرم HTML (اما هنوز بخشی از فرم):

<form action="/action_page.php" id="form1">
  نام: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

نام خانوادگی : <input type="text" name="lname" form="form1">
خودتان آزمایش کنید »

ویژگی شکل گیری formaction

ویژگی شکل گیری ورودی formaction آدرس پرونده را مشخص می کند که هنگام ارسال فرم پردازش ورودی را انجام می دهد.

توجه: این ویژگی صفت عمل المان <form> را نادیده می گیرد.

ویژگی شکل گیری با انواع ورودی زیر کار می کند: ارسال type="submit" و تصویر. .

Opera Safari Chrome Firefox Internet Explorer

مثال

یک فرم HTML با دو دکمه ارسال ، با عملکردهای مختلف:

<form action="/action_page.php">
  نام: <input type="text" name="fname"><br>
  نام خانوادگی : <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin">
</form>
خودتان آزمایش کنید »

ویژگی formenctype

ویژگی formenctype ورودی مشخص می کند که فرم داده هنگام ارسال باید رمزگذاری شود (فقط برای فرم های دارای روش = " ارسال") "method="post .

توجه: این ویژگی formenctype ویژگی enctype المان <form>را نادیده می گیرد. .

ویژگی formenctype با انواع ورودی زیر کار می کند: ارسال و تصویر.

Opera Safari Chrome Firefox Internet Explorer

مثال

فرم با دو دکمه ارسال. اولی فرم داده را با رمزگذاری پیش فرض می فرستد ، دومی فرم داده را با کد "multipart / form-data" و "multipart/form-data" ارسال می کند:

<form action="/action_page_binary.asp" method="post">
  نام: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>
خودتان آزمایش کنید »

ویژگی روش فرم formmethod

ویژگی ورودی formmethod روش HTTP را برای ارسال فرم-داده به URL تعریف می کند.

توجه: این ویژگی formmethod ویژگی متد المان <form> را نادیده می گیرد.

ویژگی formmethod با انواع ورودی زیر کار می کند: ارسال و تصویر.

داده های فرم را می توان به عنوان متغیرهای URL ( روش = "دریافت" "get") یا به عنوان یک معامله HTTP post ارسال کرد ( روش = "ارسال" "post").

یادداشت های مربوط به روش "دریافت":

  • این روش داده ها را در جفت نام / مقدار به URL اضافه می کند
  • این روش برای ارسال فرم هایی که کاربر بخواهد نتیجه را علامت گذاری کند ، مفید است
  • مقدار داده ای که می توانید در یک URL قرار دهید محدودیتی دارد (بین مرورگرها متفاوت است) ، بنابراین ، نمی توانید مطمئن باشید که همه داده های فرم به درستی منتقل می شوند
  • هرگز از روش "دریافت" برای انتقال اطلاعات حساس استفاده نکنید! (رمز عبور یا سایر اطلاعات حساس در نوار آدرس مرورگر قابل مشاهده خواهد بود)

یادداشت های مربوط به روش "ارسال":

  • این روش فرم-داده را به عنوان یک معامله پست HTTP ارسال می کند
  • موارد ارسالی فرم با روش "ارسال" را نمی توان نشانه گذاری کرد
  • روش "ارسال" از "دریافت" قوی تر و ایمن تر است و "پست" محدودیت اندازه ندارد
Opera Safari Chrome Firefox Internet Explorer

مثال

فرم با دو دکمه ارسال. اولی فرم-داده را با روش = "دریافت" ارسال می کند. مورد دوم فرم-داده را با روش = "ارسال" ارسال می کند:

<form action="/action_page.php" method="get">
  نام: <input type="text" name="fname"><br>
  نام خانوادگی : <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>
خودتان آزمایش کنید »

ویژگی formnovalidate

ویژگی formnovalidate ویژگی نوساز عنصر <form> را لغو می کند.

از ویژگی formnovalidate می توان با "type="submit استفاده کرد.

Opera Safari Chrome Firefox Internet Explorer

مثال

فرم با دو دکمه ارسال (با و بدون اعتبار):

<form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>
خودتان آزمایش کنید »

ویژگی Formtarget ( هدف)

ورودی formtarget یک ویژگی یک نام یا یک کلمه کلیدی را مشخص می کند که نشان می دهد پاسخی که پس از ارسال فرم دریافت می شود در کجا نمایش داده شود.

توجه: این ویژگی صفت مورد formtarget المان <form> را نادیده می گیرد. .

ویژگی formtarget با انواع ورودی زیر کار می کند: ارسال و تصویر. type="submit" و type="image".

Opera Safari Chrome Firefox Internet Explorer

مثال

فرم با دو دکمه ارسال ، با پنجره های مختلف هدف:

<form action="/action_page.php">
  نام: <input type="text" name="fname"><br>
  نام خانوادگی : <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>
خودتان آزمایش کنید »

ویژگی های ارتفاع و عرض height یا width

مشخصه های ارتفاع و عرض width ورودی ارتفاع height و عرض المان را مشخص می کند.

نکته: همیشه ویژگی های ارتفاع و عرض را برای تصاویر مشخص کنید. در صورت تنظیم ارتفاع و عرض ، فضای بارگیری شده برای تصویر هنگام بارگذاری صفحه محفوظ است. بدون این ویژگی ها ، مرورگر اندازه تصویر را نمی داند و نمی تواند فضای مناسب را برای آن رزرو کند. نتیجه این خواهد بود که در هنگام بارگذاری (هنگام بارگیری تصاویر) صفحه آرایی تغییر می کند.

Opera Safari Chrome Firefox Internet Explorer

مثال

یک تصویر را به عنوان دکمه ارسال ، با ویژگی های ارتفاع و عرض تعریف کنید:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
خودتان آزمایش کنید »

ویژگی لیست list

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

Opera Safari Chrome Firefox Internet Explorer

مثال

یک عنصر <input> با مقادیر از پیش تعریف شده در یک <datalist>:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
خودتان آزمایش کنید »

حداقل و حداکثر ویژگی ها (min و max)

ویژگی های min و max حداقل و حداکثر مقادیر را برای عنصر <input> تعریف می کنند. .

ویژگی های min و max در انواع ورودی زیر کار می کنند: تعداد ، دامنه ، تاریخ ، زمان محلی - محلی ، ماه ، زمان و هفته.

Opera Safari Chrome Firefox Internet Explorer

مثال

<input>المان با حداقل و حداکثر مقادیر:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
خودتان آزمایش کنید »

ویژگی چندگانه multiple

ویژگی multiple نشان می دهد که کاربر مجاز است بیش از یک مقدار در عنصر <input> وارد کند.

ویژگی چندگانه multiple با انواع ورودی زیر کار می کند: ایمیل و پرونده.

Opera Safari Chrome Firefox Internet Explorer

مثال

یک قسمت بارگذاری پرونده که مقادیر مختلفی را در بر می گیرد:

Select images: <input type="file" name="img" multiple>
خودتان آزمایش کنید »

ویژگی الگو pattern

ویژگی الگو pattern بیان منظمی را تعریف می کند که مقدار عنصر <input> در برابر آن آزمایش شود.

ویژگی الگو pattern در انواع ورودی زیر کار می کند: متن ، جستجو ، آدرس اینترنتی ، تلفن ، ایمیل و رمز عبور.

نکته :: از ویژگی عنوان جهانی title برای توصیف الگو برای کمک به کاربر استفاده کنید.

نکته :: در آموزش JavaScript درباره عبارات منظم بیشتر بیاموزید.

Opera Safari Chrome Firefox Internet Explorer

مثال

یک قسمت ورودی که فقط می تواند شامل سه حرف باشد (بدون عدد یا نویسه خاص):

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
خودتان آزمایش کنید »

ویژگی مکان یاب (مکان نگهدارنده) placeholder

ویژگی متغیر نگهدارندهplaceholder اشاره ای را مشخص می کند که مقدار مورد انتظار فیلد ورودی را توصیف می کند (مثال مقدار n یا توصیف کوتاه قالب).

قبل از اینکه کاربر مقدار وارد کند ، یک نکته در قسمت ورودی نمایش داده می شود.

ویژگی placeholder با انواع ورودی زیر کار می کند: متن ، جستجو ، آدرس اینترنتی ، تلفن ، ایمیل و رمز عبور.

Opera Safari Chrome Firefox Internet Explorer

مثال

قسمت ورودی با متن نگهدارنده متن:

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

ویژگی مورد نیاز required

ویژگی مورد نیاز required نشان می دهد که قسمت ورودی باید قبل از ارسال فرم تکمیل شود.

ویژگی مورد نیاز required با انواع ورودی زیر کار می کند: متن ، جستجو ، آدرس اینترنتی ، تلفن ، ایمیل ، گذرواژه ، انتخاب کنندگان تاریخ ، شماره ، کادر تأیید ، رادیو و پرونده.

Opera Safari Chrome Firefox Internet Explorer

مثال

قسمت ورودی اجباری:

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

ویژگی مرحله step

ویژگی step محدوده های مجاز اعداد (مراحل) برای المان <input> را مشخص می کند. .

مثالها: اگر مرحله = "3" باشد ، اعداد معتبر -3 ، 0 ، 3 ، 6 و غیره هستند.

نکته : : برای ایجاد دامنه ای از مقادیر معتبر می توان از ویژگی step همراه با ویژگی های max و min استفاده کرد.

ویژگی step بر روی انواع ورودی زیر کار می کند: تعداد ، دامنه ، تاریخ ، تاریخ-محلی ، ماه ، زمان و هفته.

Opera Safari Chrome Firefox Internet Explorer

مثال

فیلد ورودی با تعداد فواصل مجاز مشخص شده:

<input type="number" name="points" step="3">
خودتان آزمایش کنید »

تمرینات HTML

خود را امتحان کنید

تمرین :

در قسمت ورودی زیر ، یک حفره نگهدارنده اضافه کنید که می گوید "نام شما در اینجا".

<form action="/action_page.php">
<input type="text" >
</form>

شروع یک تمرین


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

برچسب توضیح
<form> فرم HTML را برای ورودی کاربر تعریف می کند
<input> یک کنترل ورودی را تعریف می کند





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

Farsiw3.ir