خانه / آموزش HTML / بخش سی و چهارم-انواع ورودی های HTML
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
"

تاریخ بروزرسانی: ۱۱ آذر ۱۳۹۷ تعداد بازدید : 6 بازدید بدون دیدگاه

بخش سی و چهارم-انواع ورودی های HTML

قدم قبلی >< قدم بعدی

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

در این آموزش html به معرفی انواع ورودی های HTML می پردازیم.

در این فصل انواع ورودی های مختلف برای عنصر <input> را معرفی میکنیم.

نوع ورودی Text

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

نوع ورودی Password

<input type = “password”> یک فیلد رمز عبور را تعریف می کند:

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

نوع ورودی Submit

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

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

فرم دستیار در مشخصه عمل فرم مشخص شده است:

اگر مقدار Attribute button را حذف کنید، دکمه یک متن پیش فرض را دریافت می کند:

نوع ورودی Reset

<input type = “reset”> یک دکمه تنظیم مجدد را تنظیم می کند که تمامی مقادیر فرم را به مقادیر پیش فرض آنها باز می گرداند:

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

نوع ورودی Radio

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

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

نوع ورودی Checkbox

<input type = “checkbox”> یک چک باکس را تعریف می کند.

جعبه های چک اجازه دهید که کاربر گزینه های ZERO یا MORE را برای تعداد محدودی از گزینه ها انتخاب کند.

نوع ورودی Button

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

انواع ورودی HTML5

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

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

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

نوع ورودی color

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

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

نوع ورودی Date

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

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

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

نوع ورودی  Datetime-local

<input type = “datetime-local”> یک فیلد ورودی تاریخ و زمان را بدون هیچ زون زمان مشخص می کند.

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

نوع ورودی Email

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

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

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

نوع ورودی File

<input type = “file”> یک فیلد انتخاب فایل و یک “Browse” را برای آپلود فایل تعریف می کند.

نوع ورودی Month

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

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

نوع ورودی Number

<input type = “number”> یک فیلد ورودی عددی را تعریف می کند.

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

مثال زیر یک فیلد ورودی عددی را نشان می دهد، جایی که می توانید مقدار ۱ تا ۵ را وارد کنید:

نوع ورودی Range

<input type = “range”> یک کنترل را برای وارد کردن یک شماره تعیین می کند که مقدار دقیق آن مهم نیست (مانند کنترل لغزنده). محدوده پیش فرض ۰ تا ۱۰۰ است. با این حال، می توانید محدودیت هایی را برای تعداد عددی با حداقل، حداکثر و ویژگی های مرحله پذیرفته کنید.

نوع ورودی Search

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

نوع ورودی Tel

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

توجه: نوع تلفن در حال حاضر تنها در Safari 8 پشتیبانی می شود.

نوع ورودی Time

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

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

نوع ورودی Url

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

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

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

نوع ورودی Week

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

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

 

گام قبلی >< گام بعدی
بخش سی و چهارم-انواع ورودی های HTML
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=12044


کانال تلگرام تیک تم

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *