آموزش انواع ورودی (Input) در HTML

آموزش انواع ورودی (Input) در HTML

با جلسه بیست و پنجم آموزش متنی Html در خدمت شما هستیم با آموزش انواع ورودی (Input) در HTML از وب سایت آموزش برنامه نویسی سورس باران. در این جلسه به بررسی و معرفی انواع ورودی (Input) در HTML و خصوصیات ورودی در فرم‌ها می‌پردازیم.

آموزش انواع ورودی (Input) در HTML

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

 

ورودی متنی در Html

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

پیش نمایش

 

ورودی کلمه عبور در Html

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

پیش نمایش

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

 

ورودی submit در Html

<“input type=”submit> یک دکمه برای ارسال داده‌های فرم به یک form-handler که معمولا یک صفحه سرور با کدهایی برای پردازش داده‌های ورودی است و در خصوصیت action فرم مشخص می‌شود، تعریف می‌کند:

پیش نمایش

اگر خصوصیت مقدار دکمه submit را حدف کنید، این دکمه یک متن پیش‌فرض را نمایش خواهد داد:

پیش نمایش

 

ورودی Reset در Html

<“input type=”reset> یک دکمه reset تعریف می‌کند که تمام مقادیر فرم را به مقادیر پیش‌فرض خود باز می‌گرداند:

پیش نمایش

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

 

ورودی Radio در Html

<“input type=”radio> یک رادیو باتن یا دکمه رادیو تعریف می‌کند. دکمه‌های رادیو به کاربر اجازه می‌دهند که تنها یک گزینه را از میان گزینه‌های موجود انتخاب کند:

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



ورودی Checkbox در Html

<“input type=”checkbox> یک چک باکس تعریف می‌کند. چک باکس‌ها به کاربر این امکان را می‌دهند که صفر یا چند گزینه از گزینه‌های موجود را انتخاب کند:

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



پیش نمایش

 

ورودی Button در Html

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

پیش نمایش

 

انواع ورودی (Input) در HTML5

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

– رنگ (color)

– تاریخ (date)

– تاریخ و زمان محلی (datetime-local)

– ایمیل

– ماه (month)

– عدد (number)

– دامنه (range)

– جستجو (range)

– تلفن (tel)

– زمان (time)

– url

– هفته (week)

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

 

ورودی رنگ در Html

<“input type=”color> برای فیلدهای ورودی به کار می‌رود که باید حاوی یک رنگ باشند. با توجه به پشتیبانی مرورگر، یک انتخاب‌کننده رنگ می‌تواند در فیلد ورودی نمایش داده شود:

پیش نمایش

 

ورودی تاریخ در Html

<“input type=”date> برای فیلدهای ورودی که باید حاوی تاریخ باشند به کار می‌رود. با توجه به پشتیبانی مرورگر، یک انتخاب‌کننده تاریخ می‌تواند در فیلد ورودی نمایش یابد:

پیش نمایش

می‌توانید محدودیت هایی برای تاریخ‌ها در نظر بگیرید:

پیش نمایش

 

ورودی Datetime-local در Html

<“input type=”datetime-local> یک فیلد ورودی برای تاریخ و زمان (بدون منطقه زمانی) مشخص می‌کند. با توجه به پشتیبانی مرورگر، یک انتخاب‌کننده تاریخ می‌تواند در فیلد ورودی نمایش یابد:

پیش نمایش

 

ورودی ایمیل در Html

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

پیش نمایش

 

ورودی فایل در Html

یکی از مهمترین نوع input ها نوع File ها هستند. با استفاده از این نوع می‌توانید از کاربر فایل دریافت کنید و به سرور انتقال دهید. پیاده سازی این نوع از input علاوه بر اهمیتش، دشواری خاص خود را نیز دارد.  برای پیاده سازی این نوع input از <input type=”file”> استفاده می‌کنیم.

پیش نمایش

 

ورودی ماه در Html

<“input type=”month> به کاربر امکان می‌دهد که یک ماه و سال را انتخاب کند. با توجه به پشتیبانی مرورگر، یک انتخاب‌کننده تاریخ می‌تواند در فیلد ورودی نمایش یابد:

پیش نمایش

 

ورودی عدد در Html

<“input type=”number> یک فیلد ورودی عددی تعریف می‌کند. همچنین می‌توانید محدودیت تعریف کنید که چه اعدادی پذیرفته شوند. مثال زیر یک فیلد ورودی را نشان می‌دهد که می‌توانید فقط اعداد ۱ تا ۵ را در آن وارد کنید:

پیش نمایش

 

محدودیت ورودی در Html

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

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

مثال زیر یک فیلد ورودی عددی را نشان می‌دهد که فقط می‌توانید یک مقدار از صفر تا صد در ده مرحله در آن وارد کنید. مقدار پیش‌فرض آن هم ۳۰ است:

پیش نمایش

 

ورودی دامنه در Html

<“input type=”range> یک کنترل برای وارد کردن اعدادی تعریف می‌کند که مقدار دقیق آن‌ها مهم نیست. دامنه پیش‌فرض بین صفر تا صد است. البته شما می‌توانید با خصوصیت‌های min، max و step، محدودیت تعریف کنید که چه اعدادی پذیرفته شوند:

پیش نمایش

 

ورودی سرچ در Html

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

پیش نمایش

 

ورودی تلفن در Html

<“input type=”tel> برای فیلدهای ورودی که باید حاوی یک شماره تلفن باشند به کار می‌رود. نوع ورودی تلفن در حال حاضر فقط در مرورگر سافاری ۸ پشتیبانی می‌شود:

پیش نمایش

 

ورودی زمان در Html

<“input type=”time> به کاربر این امکان را می‌دهد که بدون در نظر گرفتن منطقه زمانی، یک زمان را انتخاب کند. با توجه به پشتیبانی مرورگر، یک انتخاب‌کننده زمان می‌تواند در فیلد ورودی نمایش یابد:

پیش نمایش

 

ورودی URL در Html

<“input type=”url> برای فیلدهای ورودی به کار می‌رود که باید حاوی یک آدرس url باشند. با توجه به پشتیبانی مرورگر، فیلد url می‌تواند در هنگام ارسال به صورت خودکار تایید اعتبار شود. برخی از گوشی‌های هوشمند نوع ورودی url را تشخیص داده و یک “.com” در کیبورد اضافه می‌کنند تا در آخر url قرار بگیرد:

پیش نمایش

 

ورودی هفته در Html

<“input type=”week> به کاربر این امکان را می‌دهد تا یک هفته و سال را انتخاب کند. با توجه به پشتیبانی مرورگر، یک انتخاب‌کننده تاریخ می‌تواند در فیلد ورودی نمایش یابد:

پیش نمایش

امیدواریم این مطلب مورد توجه دوستان قرار گرفته باشد.

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی