نوع‌های ورودی HTML

این فصل توضیح می‌دهد که ورودی‌های عناصر <input> به چه نوع‌هایی هستند.

نوع ورودی: text

<input type="text"> تعریف شده برایورودی متنیزمینه‌ی ورودی یک خطی برای

مثال

<form>
 نام:<br>
<input type="text" name="firstname">
<br>
 نام خانوادگی:<br>
<input type="text" name="lastname">
</form>

آزمایش کنید

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

نام:


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

نوع ورودی: password

<input type="password"> تعریفزمینه‌ی پسورد:

مثال

<form>
 نام کاربر:<br>
<input type="text" name="username">
<br>
 پسورد کاربر:<br>
<input type="password" name="psw">
</form>

آزمایش کنید

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

نام کاربر:


پسورد کاربر:

نکته:حروف در زمینه‌ی پسورد (password) به صورت ماسک قرار می‌گیرند (نمایش به عنوان ستاره یا دایره‌ی پر).

نوع ورودی: submit

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

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

در ویژگی action فرم (form) فرآیندهای پردازش فرم (form-handler) را مشخص کنید.

مثال

<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>

آزمایش کنید

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

نام:


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


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

مثال

<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="radio"> تعریف دکمه‌های رادیویی.

دکمه‌های رادیویی به کاربر اجازه می‌دهد تا تنها یک گزینه از تعداد محدودی گزینه‌ها را انتخاب کند:

مثال

<form>
<input type="radio" name="sex" value="male" checked>مرد
<br>
<input type="radio" name="sex" value="female">زن
</form>

آزمایش کنید

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

مرد

زن

نوع ورودی: مستندات انتخابی

<input type="checkbox"> تعریف مستندات انتخابی.

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

مثال

<form>
<input type="checkbox" name="vehicle" value="Bike">من یک دوچرخه دارم
<br>
<input type="checkbox" name="vehicle" value="Car">من یک ماشین دارم 
</form>

آزمایش کنید

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

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

من یک ماشین دارم

نوع ورودی: دکمه

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

مثال

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

آزمایش کنید

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

نوع ورودی HTML5

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

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

نکته:نوع ورودی قدیمی وب‌گردان‌ها که پشتیبانی نمی‌شوند، به عنوان نوع ورودی text در نظر گرفته می‌شود.

نوع ورودی: number

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

شما می‌توانید محدودیت‌هایی برای اعداد اعمال کنید.

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

مثال

<form>
  مقدار (بین 1 و 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

آزمایش کنید

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

در اینجا برخی از محدودیت‌های ورودی رایج لیست شده‌اند (بعضی از آنها جدیداً در HTML5 اضافه شده‌اند):

ویژگی توضیح
disabled تعیین می‌کند که آیا فیلد ورودی باید غیرفعال باشد.
max حداکثر ارزش فیلد ورودی را تعیین می‌کند.
maxlength حداکثر تعداد کاراکترهای فیلد ورودی را تعیین می‌کند.
min حداقل ارزش فیلد ورودی را تعیین می‌کند.
pattern عبارت قوانین پارتنوپولوس ورودی برای بررسی ارزش ورودی را تعیین می‌کند.
readonly تعیین می‌کند که فیلد ورودی فقط خواندنی است (ناچار به تغییر نیست).
required تعیین می‌کند که آیا فیلد ورودی الزامی است (باید پر شود).
size عرض فیلد ورودی را (به تعداد کاراکتر) تعیین می‌کند.
step تعداد مجاز بین اعداد ورودی فیلد ورودی را تعیین می‌کند.
مقدار مقدار پیش‌فرض فیلد ورودی را تعیین می‌کند.

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

مثال

<form>
  مقدار:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

آزمایش کنید

نوع ورودی: date

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

بسته به پشتیبانی مرورگر، انتخاب‌گر تاریخ در فیلد ورودی ظاهر می‌شود.

مثال

<form>
  تاریخ تولد:
  <input type="date" name="bday">
</form>

آزمایش کنید

شما می‌توانید محدودیت‌هایی به ورودی اضافه کنید:

مثال

<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>

آزمایش کنید

نوع ورودی: color

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

بسته به پشتیبانی مرورگر، انتخاب‌گر رنگ در فیلد ورودی ظاهر می‌شود.

مثال

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

آزمایش کنید

نوع ورودی: range

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

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

مثال

<form>
  <input type="range" name="points" min="0" max="10">
</form>

آزمایش کنید

شما می‌توانید از این ویژگی‌ها برای تعیین محدودیت‌ها استفاده کنید: min،max،step،value.

نوع ورودی: month

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

بسته به پشتیبانی مرورگر، انتخاب‌گر تاریخ در فیلد ورودی ظاهر می‌شود.

مثال

<form>
  تاریخ تولد (ماه و سال):
  <input type="month" name="bdaymonth">
</form>

آزمایش کنید

نوع ورودی: week

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

بسته به پشتیبانی مرورگر، انتخاب‌گر تاریخ در فیلد ورودی ظاهر می‌شود.

مثال

<form>
  هفته‌ای را انتخاب کنید:
  <input type="week" name="week_year">
</form>

آزمایش کنید

نوع ورودی: time

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

بسته به پشتیبانی مرورگر، انتخاب‌گر زمان در فیلد ورودی ظاهر می‌شود.

مثال

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

آزمایش کنید

نوع ورودی: datetime

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

بسته به پشتیبانی مرورگر، انتخاب‌گر تاریخ در فیلد ورودی ظاهر می‌شود.

مثال

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

آزمایش کنید

نوع ورودی: datetime-local

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

بسته به پشتیبانی مرورگر، انتخاب‌گر تاریخ در فیلد ورودی ظاهر می‌شود.

مثال

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

آزمایش کنید

نوع ورودی: email

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

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

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

مثال

<form>
  ایمیل:
  <input type="email" name="email">
</form>

آزمایش کنید

نوع ورودی: search

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

مثال

<form>
  Google را جستجو کنید:
  <input type="search" name="googlesearch">
</form>

آزمایش کنید

نوع ورودی: tel

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

در حال حاضر تنها Safari 8 از نوع tel پشتیبانی می‌کند.

مثال

<form>
  تلفن:
  <input type="tel" name="usrtel">
</form>

آزمایش کنید

نوع ورودی: url

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

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

برخی از تلفن‌های هوشمند نوع URL را تشخیص داده و به صفحه‌کلید ".com" اضافه می‌کنند تا با ورودی URL هماهنگ شوند.

مثال

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

آزمایش کنید