آموزش HTML – فصل بیست و سوم: خاصیت Type در Input

خاصیت یا همان اتریبیوت type در یک input قادر است تا نوع زمینه ورودی را مشخص کند. ویژگی type در یک زمینه ورودی مقادیر بسیار متفاوتی می تواند داشته باشد. این فصل از آموزش های HTML گام به گام نتران، به شرح کلیه مقادیر ممکن برای خاصیت type در یک زمینه ورودی اختصاص دارد.

آموزش HTML – فصل بیست و سوم: خاصیت Type در Input

Type های المان input در اچ تی ام ال

در اینجا type های متفاوت المان input وجود دارند که می توانید در اچ تی ام ال استفاده کنید:

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

تایپ text در المان input

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

مثال:


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

نام:

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

تایپ password در input

<input type="password"> یک زمینه ورودی گذر واژه یا همان password را تعریف می کند.

مثال:


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

نام کاربری:

رمز عبور:

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

تایپ submit در input

<input type="submit"> یک دکمه را برای ثبت کردن داده فرم به یک form-handler تعریف می کند.

Form-handler به صورت نمونه یک صفحه سرور است با یک سند یا script برای پردازش داده ورودی. Form-handler در خاصیت action از فرم مشخص می شود.

مثال :


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

نام:

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


اگر شما خاصیت مقدار یا value یک دکمه submit را از قلم بیاندازید دکمه یک متن پیشفرض می گیرد (معمولا submit):

مثال:


تایپ ورودی reset

<input type="reset"> یک دکمه ریست یا بازنشاندن را تعریف می کند که با کلیک بر روی آن تمام مقادیر زمینه های فرم به مقدار پیشفرض خود بازنشانده می شوند.

مثال :


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

نام:

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


اگر شما مقادیر ورودی را تغییر دهید و سپس بر روی دکمه reset کلیک کنید تمام مقادیر به مقدار های اولیه که تایین شده اند بازنشانی میشوند.

تایپ ورودی radio

<input type="radio"> یک دکمه رادیو ای را تعریف می کند. دکمه های رادیو ای به کاربر ها این امکان را می دهند که فقط یک از چند گزینه محدود را انتخاب کنند.

مثال :


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

آقا
خانم

تایپ ورودی checkbox

<input type="checkbox"> یک چک باکس را تعریف می کند. چک باکس ها به کاربر این امکان را می دهند که هیچ یک یا چند مورد از گزینه های محدود را انتخاب کنند.

مثال :


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

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

تایپ ورودی button

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

مثال:


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

تایپ های input در اچ تی ام ال پنج

در اچ تی ام ال پنج یک سری type های جدید برای input اضافه شده:

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

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

تایپ ورودی color

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

مثال :


مثال بالا این چنین چاپ می شود:

رنگ مورد علاقه خود را انتخاب کنید:

تایپ ورودی date

<input type="date"> برای زمینه های ورودی ای استفاده می شود که باید یک تاریخ باشند. وابسته به پشتیبانی مرورگر یک انتخابگر تاریخ می تواند در زمینه ورودی ظاهر شود.

این تایپ در مرورگر اپل سافاری پشتیبانی نمی شود.

مثال:


شما همچنین می توانید از خاصیت های min و max استفاده کنید تا به تاریخ محدودیت اضافه کنید.

مثال:


مثال بالا چنین چاپ می شود (مرگر شما باید از این قابلیت پشتیبانی کند تا درست مشاهده کنید):

تاریخ قبل از 1980-01-01:
تاریخ بعد از 2000-01-01:

تایپ ورودی datetime-local

<input type="datetime-local"> یک زمینه ورودی تاریخ و زمان را بدون ناحیه زمانی مشخص می کند. وابسته به پشتیبانی مرورگر یک انتخابگر تاریخ می تواند در زمینه ورودی ظاهر شود.

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

مثال :


تایپ ورودی email

<input type="email"> برای زمینه های ورودی ای استفاده می شود که باید حاوی یک آدرس ایمیل باشند. وابسته به پشتیبانی مرورگر آدرس ایمیل میتواند به صورت اتوماتیک هنگام ثبت شدن اعتبار سنجی شود. یعنی مرورگر بررسی می کند که مقدار وارد شده یک ایمیل است یا خیر؟ بعضی گوشی های تلفن هوشمند type ایمیل را شناسایی کرده و یک .com به صفحه کلید برای هماهنگ شدن با ورودی ایمیل اضافه می کنند تا کاربر راحت تر ایمیل را وارد کند.

مثال :


تایپ ورودی file

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

مثال :


تایپ ورودی month

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

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

مثال :


تایپ ورودی number

<input type="number"> یک زمینه ورودی عددی را تعریف می کند. شما همچنین می توانید محدودیت هایی بر این که کاربر ها چه اعدادی را می توانند وارد کنند قرار دهید. مثال زیر یک زمینه ورودی عددی را نمایش می دهد که شما در آن می توانید از 1 تا 5 را وارد کنید.


مثال بالا چنین چاپ خواهد شد:

تعداد (بین 1 و 5):

ایجاد محدودیت برای ورودی های کاربر در HTML

در اینجا چند محدودیت ورودی معمولی را بررسی می کنیم که برخی از آنها در اچ تی ام ال پنج جدید هستند.

  • Disabled : مشخص می کند که یک زمینه ورودی باید غیر فعال باشد.
  • Max : مشخص کننده مقدار حداکثر برای یک زمینه ورودی است. (HTML 5)
  • Maxlength : مشخص کننده حداکثر تعداد کارکتر های یک زمینه ورودی است.
  • Max : مشخص کننده مقدار حداقل برای یک زمینه ورودی است. (HTML 5)
  • Pattern : یک جمله معمولی را برای تطبیق دادن در مقابل مقدار ورودی مشخص می کند. (HTML 5)
  • Readonly : مشخص می کند که یک زمینه ورودی فقط قابل خواندن است و نمی توان آن را تغییر داد.
  • Required : مشخص می کند که یک زمینه ورودی لازمه ثبت داده فرم است و بدون پر کردن آن در روال اختلال ایجاد می شود. (HTML 5)
  • Size : مشخص کننده عرض یک زمینه ورودی به تعداد کاراکتر ها است.
  • Step : مشخص کننده فاصله عددی قانونی برای یک زمینه ورودی است. (HTML 5)
  • Value : مشخص کننده مقدار معمول یک زمینه ورودی است.

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

مثال زیر یک زمینه ورودی عددی را نمایش می دهد که در آن شما می توانید از 0 تا 100 را در فواصل ده تایی وارد کنید. مقدار اولیه 30 است.

مثال :


تایپ ورودی range

<input type="range"> یک کنترل برای انتخاب کردن عددی است که مقدار دقیقش مهم نیست مثل یک کنترل اسلایدر. محدوده معمول از 0 تا 100 است هرچند شما می توانید محدودیت هایی قرار دهید که چه اعدادی قابل تایید هستند، این کار با با خاصیت های min و max و step انجام می شود.

مثال:


تایپ ورودی search

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

مثال :


تایپ ورودی tel

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

نکته : تایپ tel در حال حاظر فقط بر روی safari 8 پشتیبانی می شود.

مثال :


تایپ ورودی time

<input type="time"> به کاربر این اجازه را می دهد که یک زمان را انتخاب کند (بدون ناحیه زمانی) . وابسته به پشتیبانی مرورگر یک انتخاب گر زمان میتواند در زمینه ورود ظاهر شود.

این تایپ در مروگر اپل سافاری پشتیبانی نمی شود.

مثال :


تایپ ورودی url

<input type="url"> برای زمینه های ورودی استفاده می شود که باید حاوی یک url باشند. وابسته به پشتیبانی مرورگر زمینه url به صورت اتوماتیک معتبر شناخته می شود. بعضی گوشی های هوشمند تایپ url را شناسایی کرده و یک .com به صفحه کلید برای هماهنگ شدن با ورودی اضافه می کنند.

مثال :


تایپ ورودی week

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

این قابلیت فقط در گوگل کروم و اپرا در دسترس است.

مثال :



ویدیوها و مطالب مشابه