انواع ورودی جدید HTML5 (Email, URL, Date, Number, Range)

انواع ورودی جدید HTML5: سادگی و اعتبار در فرم‌ها! 🚀

سلام به همه! HTML5 کلی امکانات جدید و خفن به فرم‌ها اضافه کرده که کار رو برای ما خیلی راحت‌تر کرده. دیگه لازم نیست برای خیلی از اعتبارسنجی‌های اولیه، سراغ جاوا اسکریپت بریم. امروز می‌خوایم چند تا از این ورودی‌های جدید و مفید رو بررسی کنیم.

این ورودی‌های جدید، نه تنها ظاهر بهتری دارن، بلکه کمک می‌کنن کاربر اطلاعات رو با دقت بیشتری وارد کنه و فرم شما هم اطلاعات صحیح‌تری دریافت کنه.

۱. type=”email”: چک کردن ایمیل! 📧

قبلاً برای چک کردن فرمت ایمیل باید از جاوا اسکریپت استفاده می‌کردیم، اما الان با type="email"، مرورگر خودش یه بررسی اولیه انجام می‌ده. اگه کاربر فرمت ایمیل رو رعایت نکنه (مثلاً “@” یا “.” رو نداشته باشه)، مرورگر بهش خطا می‌ده.

<label for="user-email">آدرس ایمیل:</label>
<input type="email" id="user-email" name="user_email" placeholder="example@domain.com" required>
<!--
  - 'required' رو اضافه کردیم تا این فیلد اجباری بشه.
  - مرورگر سعی می‌کنه فرمت ایمیل رو چک کنه.
-->

نکته: این اعتبارسنجی فقط در حد فرمت هست و چک نمی‌کنه که ایمیل واقعاً وجود داره یا نه!

۲. type=”url”: چک کردن آدرس وب! 🌐

شبیه به ایمیل، این نوع ورودی برای دریافت آدرس وب‌سایت‌ها طراحی شده. مرورگر بررسی می‌کنه که ورودی کاربر فرمت یه URL رو داشته باشه (مثلاً با http:// یا https:// شروع بشه).

<label for="website">وب‌سایت شما:</label>
<input type="url" id="website" name="website" placeholder="https://www.mywebsite.com">
<!--
  - اگه کاربر آدرس رو وارد نکنه، خطایی نمی‌گیره مگه اینکه 'required' باشه.
  - مرورگر فرمت URL رو چک می‌کنه.
-->

۳. type=”number”: فقط عدد! 🔢

این نوع ورودی به کاربر اجازه می‌ده فقط عدد وارد کنه. همچنین معمولاً دکمه‌های کوچکی برای افزایش و کاهش عدد کنارش نشون می‌ده (که ظاهرش بستگی به مرورگر و سیستم عامل داره).

<label for="item-count">تعداد مورد نظر:</label>
<input type="number" id="item-count" name="item_count" min="1" max="10" value="1">
<!--
  - min: حداقل مقدار مجاز.
  - max: حداکثر مقدار مجاز.
  - value: مقدار پیش‌فرض.
  - کاربر نمی‌تونه عددی خارج از محدوده min و max وارد کنه.
-->

نکته: خصوصیت‌های min و max برای اعتبارسنجی عددی خیلی مفید هستن.

۴. type=”range”: اسلایدر! 🎚️

برای انتخاب مقداری از یک محدوده مشخص، بدون نیاز به تایپ عدد، از type="range" استفاده می‌کنیم. این یه اسلایدر (Slider) نشون می‌ده که کاربر می‌تونه با کشیدن اون، مقدار مورد نظرش رو انتخاب کنه.

<label for="volume">میزان صدا:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50"> <span>50</span>
<!--
  - min, max: محدوده اسلایدر رو تعیین می‌کنن.
  - value: مقدار پیش‌فرض.
  - معمولاً کنارش یه المان دیگه (مثل span) برای نمایش مقدار انتخاب شده قرار می‌دن که با جاوا اسکریپت آپدیت می‌شه.
-->

نکته: برای نمایش مقدار انتخاب شده به صورت زنده، معمولاً از جاوا اسکریپت استفاده می‌شه تا با حرکت اسلایدر، مقدار داخل <span> یا یه عنصر دیگه به‌روز بشه.

۵. type=”date”: انتخاب تاریخ! 📅

این ورودی یه تقویم زیبا در اختیار کاربر قرار می‌ده تا به راحتی تاریخ مورد نظرش رو انتخاب کنه. این کار ورود تاریخ رو خیلی راحت‌تر و دقیق‌تر می‌کنه.

<label for="birthdate">تاریخ تولد:</label>
<input type="date" id="birthdate" name="birthdate">
<!--
  - مرورگرهای مختلف ممکنه ظاهر متفاوتی برای تقویم نشون بدن.
  - می‌تونید از min و max برای تعیین بازه تاریخ مجاز هم استفاده کنید.
  - مثال: min="1950-01-01" max="2023-12-31"
-->

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

استفاده از این ورودی‌های جدید HTML5، کیفیت فرم‌های شما رو بالا می‌بره و تجربه کاربری رو بهبود می‌بخشه. با این ابزارهای جدید، فرم‌هاتون هم زیباتر می‌شن و هم هوشمندتر! موفق باشید! 🎉