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

دروس 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> را توصیف می کند.

ترجمه شده از انگلیسی ورودی - input (داده) نوع - type (داده).


انواع ورودی HTML

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

کدها سمت چپ نوشته شده اند زیرا در فارسی علامت ها جا به جا و بهم ریخته می شوند

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

نوع ورودی متن - Input Type Text

<"input type="text> یک فیلد ورودی متن تک خطی را تعریف می کند:

مثال

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

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

نام:

نام خانوادگی:


نوع ورودی : رمز ورود - Input Type Password

"<input type="password> یک قسمت رمز عبور تعریف می کند :

مثال

<form>
  نام کاربری:<br>
  <input type="text" name="username"><br>
  رمز عبور کاربر:<br>
  <input type="password" name="psw">
</form>
خودتان آزمایش کنید »

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

نام کاربری:

رمز عبور کاربر:

زمینه ها را پر کنید! نویسه ها در قسمت رمز عبور پوشانده می شوند (به صورت ستاره یا دایره نمایش داده می شوند).


نوع ورودی ارسال - Input Type Submit

<"input type="submit> دکمه ای را برای ارسال داده های فرم به یک کنترل کننده فرم تعریف می کند.

فرم-کنترل کننده معمولاً یک صفحه سرور با یک اسکریپت برای پردازش داده های ورودی است.

کنترل کننده فرم در ویژگی action مشخص شده است:

مثال

<form action="/action_page.php">
  نام:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  نام خانوادگی:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
خودتان آزمایش کنید »

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

نام:

نام خانوادگی


اگر ویژگی مقدار دکمه ارسال را حذف کنید ، دکمه یک متن پیش فرض دریافت می کند:

مثال

<form action="/action_page.php">
  نام:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  نام خانوادگی:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit">
</form>
خودتان آزمایش کنید »

بازنشانی نوع ورودی - Input Type Reset

<"input type="reset> یک دکمه تنظیم مجدد را تعریف می کند که تمام مقادیر فرم را به مقادیر پیش فرض خود بازنشانی می کند:

مثال

<form action="/action_page.php">
  نام :<br>
  <input type="text" name="firstname" value="Mickey"><br>
  نام خانوادگی<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>
خودتان آزمایش کنید »

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

نام:

نام خانوادگی:


اگر مقادیر ورودی را تغییر دهید و سپس روی دکمه "Reset" کلیک کنید ، داده های فرم به مقادیر پیش فرض بازنشانی می شوند.


نوع ورودی رادیو - Input Type Radio

<"input type="radio> یک دکمه رادیو را تعریف می کند.

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

مثال

<form>
  <input type="radio" name="gender" value="مرد" checked> Male<br>
  <input type="radio" name="gender" value="female"> زن<br>
  <input type="radio" name="gender" value="other"> دیگر
</form>
خودتان آزمایش کنید »

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

مرد
زن
دیگر

کادر انتخاب نوع ورودی - Input Type Checkbox

<"input type="checkbox>کادر تأیید را تعیین می کند.

کادرهای تأیید به کاربر اجازه می دهند گزینه های صفر یا بیشتر از تعداد محدودی گزینه را انتخاب کند.

مثال

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> من یک دوچرخه دارم <br>
  <input type="checkbox" name="vehicle2" value="Car"> من یک ماشین دارم
</form>
خودتان آزمایش کنید »

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

من یک دوچرخه دارم
من یک ماشین دارم

دکمه نوع ورودی - Input Type Button

<"input type="button> یک دکمه را تعریف می کند: :

مثال

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

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


انواع ورودی HTML5

HTML5 چندین نوع ورودی جدید اضافه کرد:

  • رنگ
  • تاریخ
  • تاریخ محلی
  • ایمیل
  • ماه
  • عدد
  • میزان
  • جستجو
  • تماس
  • زمان
  • ادرس وب
  • هفته

انواع جدید ورودی که توسط مرورگرهای وب قدیمی پشتیبانی نمی شوند مانند <"input type="text> رفتار می کنند.


نوع ورودی رنگ - Input Type Color

<"input type="color> برای فیلدهای ورودی استفاده می شود که باید حاوی یک رنگ باشد.

بسته به پشتیبانی مرورگر ، یک انتخابگر رنگ می تواند در قسمت ورودی نشان داده شود.

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  رنگ مورد علاقه خود را انتخاب کنید:
  <input type="color" name="favcolor">
</form>
خودتان آزمایش کنید »

نوع ورودی تاریخ - Input Type Date

<"input type="date> برای فیلدهای ورودی که باید حاوی یک تاریخ باشد استفاده می شود.

بسته به پشتیبانی مرورگر ، یک انتخاب کننده تاریخ می تواند در قسمت ورودی نشان داده شود.

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  تاریخ تولد:
  <input type="date" name="bday">
</form>
خودتان آزمایش کنید »

همچنین می توانید از ویژگی های min و max برای افزودن محدودیت به تاریخ استفاده کنید:

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
 تاریخ قبل از 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  وادر کردن تاریخ بعد از 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>
خودتان آزمایش کنید »

نوع ورودی تاریخ / زمان محلی - Input Type Datetime-local

<"input type="datetime-local>فیلد ورودی تاریخ و زمان را مشخص می کند ، بدون منطقه زمانی.

بسته به پشتیبانی مرورگر ، یک انتخاب کننده تاریخ می تواند در قسمت ورودی نشان داده شود.

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  تولد (تاریخ و زمان):
  <input type="datetime-local" name="bdaytime">
</form>
خودتان آزمایش کنید »

نوع ورودی ایمیل - Input Type Email

<"input type="email> برای فیلدهای ورودی استفاده می شود که باید حاوی آدرس ایمیل باشد.

بسته به پشتیبانی مرورگر ، آدرس ایمیل می تواند هنگام ارسال به طور خودکار تأیید شود.

برخی از تلفن های هوشمند نوع ایمیل را تشخیص داده و برای مطابقت با ورودی ایمیل ، ".com" را به صفحه کلید اضافه می کنند.

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  ایمیل:
  <input type="email" name="email">
</form>
خودتان آزمایش کنید »

نوع ورودی فایل ها - Input Type File

<"input type="file> یک قسمت انتخاب پرونده و یک دکمه "مرور" برای بارگذاری پرونده را تعریف می کند.

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  فایلی را انتخاب کنید: <input type="file" name="myFile">
</form>
خودتان آزمایش کنید »

نوع ورودی ماه - Input Type Month

<"input type="month> به کاربر اجازه می دهد ماه و سال را انتخاب کند.

بسته به پشتیبانی مرورگر ، یک انتخاب کننده تاریخ می تواند در قسمت ورودی نشان داده شود.

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>
خودتان آزمایش کنید »

نوع ورودی شماره - Input Type Number

<"input type="number> یک قسمت ورودی عددی را تعریف می کند.

همچنین می توانید محدودیت هایی را برای تعداد پذیرفته شده تعیین کنید.

مثال زیر یک قسمت ورودی عددی را نشان می دهد ، جایی که می توانید مقداری از 1 تا 5 را وارد کنید:

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  کمییت از 1 تا 5:
  <input type="number" name="quantity" min="1" max="5">
</form>
خودتان آزمایش کنید »

محدودیت های ورودی

لیستی از برخی محدودیت های ورودی معمول:

ویژگی توضیح
checked نشان می دهد که قسمت ورودی باید از قبل در بارگذاری صفحه انتخاب شود (برای type="checkbox" یا type="radio")
disabled مشخص می کند که یک قسمت ورودی باید غیرفعال شود
max حداکثر مقدار را برای یک قسمت ورودی مشخص می کند
maxlength حداکثر تعداد نویسه ها را برای یک قسمت ورودی مشخص می کند
min حداقل مقدار را برای یک قسمت ورودی مشخص می کند
pattern یک عبارت منظم را برای بررسی مقدار ورودی در مقابل تعیین می کند
readonly مشخص می کند که یک قسمت ورودی فقط خواندنی است (قابل تغییر نیست)
required مشخص می کند که یک فیلد ورودی لازم است (باید پر شود)
size عرض (به نویسه) یک قسمت ورودی را مشخص می کند
step فواصل قانونی شماره را برای یک قسمت ورودی مشخص می کند
value مقدار پیش فرض را برای یک قسمت ورودی مشخص می کند

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

مثال زیر یک قسمت ورودی عددی را نشان می دهد ، جایی که می توانید مقداری از 0 تا 100 را در مراحل 10 وارد کنید. مقدار پیش فرض 30 است:

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
خودتان آزمایش کنید »

محدوده نوع ورودی - Input Type Range

<input type="range"> كنترلي را براي وارد كردن عددي كه مقدار دقيق آن مهم نيست تعريف مي كند (مانند كنترل لغزنده). دامنه پیش فرض 0 تا 100 است. با این حال ، می توانید محدودیت هایی را برای تعداد پذیرفته شده با ویژگی های حداقل ، حداکثر و مرحله تعیین کنید: min, max یا step :

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  <input type="range" name="points" min="0" max="10">
</form>
خودتان آزمایش کنید »

نوع ورودی جستجو - Input Type Search

<"input type="search> برای زمینه های جستجو استفاده می شود (یک قسمت جستجو مانند یک متن متنی منظم رفتار می کند).

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  جستجو در گوگل:
  <input type="search" name="googlesearch">
</form>
خودتان آزمایش کنید »

نوع ورودی تماس - Input Type Tel

<"input type="tel>برای فیلدهای ورودی که باید حاوی یک شماره تلفن باشد استفاده می شود.

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  شماره تماس:
  <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
خودتان آزمایش کنید »

نوع ورودی زمان - Input Type Time

<"input type="time>> به کاربر اجازه می دهد تا زمانی را انتخاب کند (منطقه زمانی ندارد).

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

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  انتخاب زمان:
  <input type="time" name="usr_time">
</form>
خودتان آزمایش کنید »

نوع ورودی آدرس وب - Input Type Url

<"input type="url> برای فیلدهای ورودی استفاده می شود که باید حاوی آدرس URL باشد.

بسته به پشتیبانی مرورگر ، قسمت URL می تواند هنگام ارسال به طور خودکار تأیید شود.

برخی از تلفن های هوشمند نوع url را تشخیص می دهند و ".com" را برای مطابقت با ورودی url به صفحه کلید اضافه می کنند.

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  صفحه اصلی خود را اضافه کنید:
  <input type="url" name="homepage">
</form>
خودتان آزمایش کنید »

نوع ورودی هفته - Input Type Week

<"input type="week> به کاربر اجازه می دهد یک هفته و سال را انتخاب کند.

بسته به پشتیبانی مرورگر ، یک انتخاب کننده تاریخ می تواند در قسمت ورودی نشان داده شود.

Opera Safari Chrome Firefox Internet Explorer

مثال

<form>
  Select a week:
  <input type="week" name="week_year">
</form>
خودتان آزمایش کنید »

تمرینات HTML

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

تمرین:

در فرم زیر یک قسمت ورودی برای متن با نام "نام کاربری" اضافه کنید.

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

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


ویژگی HTML نوع ورودی

برچسب توضیح
<input type=""> نوع ورودی برای نمایش را مشخص می کند





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

Farsiw3.ir