نوع ورودی‌های 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-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"> برای فیلدهایی که باید شامل مقادیر در یک محدوده خاص باشند استفاده می‌شود.

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

مثال

<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>
  جستجو در گوگل:
  <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>

به طور مستقیم امتحان کنید