تقویت فرم های HTML5

استانداردهای اصلی HTML با گزینه‌های فیلد فرم کاملاً بدون اشکال بودند. این روزها توسعه دهندگان وب انواع اطلاعات را از فرم ها جمع آوری می کنند. برای کمک به آن، استاندارد HTML5 برخی از انواع فرم های زیباتر را تعریف می کند که می توانید از آنها استفاده کنید. این بخش شما را به آنچه که هستند راهنمایی می کند.

لیست داده ها
عنصر datalist در HTML5 جدید است. این به شما امکان می دهد یک لیست گزینه برای لیست های کشویی ایجاد کنید که از ویژگی تکمیل خودکار استفاده می کنند که توسط Google محبوب شده است.
همانطور که شروع به تایپ یک مقدار در کادر متنی می کنید، لیستی که در کادر کشویی ظاهر می شود به مقادیری محدود می شود که با آنچه تایپ کرده اید مطابقت دارند. ویژگی لیست داده به سه بخش نیاز دارد:
»»یک تگ که لیست داده ها را تعریف می کند
»» یک عنصر فهرست داده که لیست را تعریف می کند
»» یک یا چند تگ که مقادیر لیست را تعریف می کنند یک لیست کامل داده به این صورت است:

صفت لیست در تگ به مقدار مشخصه فهرست داده برای لیست داده برای استفاده اشاره دارد. این به شما امکان می دهد چندین لیست داده را در فرم خود تعریف کنید. شکل 3-7 نشان می دهد که چگونه لیست داده ها در عمل به نظر می رسد. در این مثال، همانطور که من کاراکترها را تایپ کردم، مقادیر فهرست داده منطبق ظاهر شد در کادر کشویی، انتخاب های من را محدود می کند. توجه داشته باشید که مسابقه به حروف بزرگ و کوچک حساس است و اینکه تطابق در هر نقطه از رشته متن مقادیر گزینه انجام شود.

فیلدهای ورودی اضافی
یکی از ویژگی های هیجان انگیزتر در اضافات فرم استاندارد HTML5 این است اضافه شده به تگ . HTML5 13 نوع عنصر ورودی اضافی را تعریف می کند:
»»color: یک پالت رنگی برای بازدیدکنندگان سایت تولید می کند تا یک رنگ را انتخاب کند. برمی گرداند مقدار رنگ RGB مرتبط با رنگ انتخاب شده.
»»date: یک تقویم ماه گرافیکی برای انتخاب تاریخ تولید می کند. را برمی گرداند مقادیر سال، ماه و روز انتخاب شده است.
»»datetime: یک تقویم ماه گرافیکی برای انتخاب یک تاریخ و یک متن تولید می کند کادر برای انتخاب زمان
سال، ماه، تاریخ، ساعت، دقیقه انتخاب شده را برمی گرداند، دوم، و مقادیر کسری از ثانیه، همراه با منطقه زمانی.
»»datetime-local: همان فیلد فرم را با نوع ورودی datetime تولید می کند. اما منطقه زمانی را بر نمی گرداند.
“”پست الکترونیک: برای وارد کردن یک آدرس ایمیل منفرد یا لیستی از آدرس های ایمیل جدا شده با کاما.
»»month: یک تقویم ماه گرافیکی تولید می کند. سال و ماه انتخاب شده را برمی گرداند.
»»number: یک جعبه چرخشی برای افزایش یا کاهش یک مقدار عددی در a تولید می کند جعبه متن مقدار عددی انتخاب شده را برمی گرداند.
»» range: یک نوار لغزنده برای انتخاب یک مقدار از یک محدوده تولید می کند. شما محدوده را مشخص کنید با استفاده از ویژگی های min و max در تگ. مقدار عددی انتخاب شده را برمی گرداند.
»»جستجو: یک کادر متنی تولید می کند که برخی از مرورگرها مانند جعبه جستجو (مانند یک نماد ذره بین). مقدار وارد شده در کادر متن را برمی گرداند.
»»tel: یک جعبه متن استاندارد برای وارد کردن شماره تلفن تولید می کند. مقداری مرورگرها ممکن است فرمت متن وارد شده را تأیید کنند تا مطمئن شوند که با a مطابقت دارد
فرمت شماره تلفن مقدار وارد شده در کادر متن را برمی گرداند.
»»time: یک انتخابگر زمان تولید می کند که دو مقدار عددی را به همراه a نشان می دهد جعبه چرخشی برای افزایش یا کاهش مقادیر. مقادیر عددی نشان می دهد
1 تا 12 برای ساعت و 0 تا 59 برای دقیقه. را برمی گرداند مقادیر انتخاب شده در قالب زمانی
»»url: یک کادر متنی برای وارد کردن URL متنی تولید می کند. برخی از مرورگرها ممکن است اعتبارسنجی کنند
فرمت URL وارد شده متن وارد شده در کادر متن را برمی گرداند.
»»week: یک تقویم گرافیکی برای انتخاب یک عدد هفته برای مشخص شده تولید می کند سال سال و شماره هفته انتخاب شده را برمی گرداند. اینها فیلدهای ورودی بسیار شگفت انگیزی را در صفحات وب شما ایجاد می کنند! تنها نکته منفی این است که مرورگرهای مختلف ممکن است از روش های مختلفی برای تولید این موارد استفاده کنند فیلدها را تشکیل دهید بیایید یک مثال را برای ایجاد یک برنامه آزمایشی مرور کنیم تا بتوانید ببینید مرورگرهای شما چگونه فیلدهای ورودی جدید را مدیریت می کنند:

1. ویرایشگر متن، ویرایشگر برنامه یا توسعه یکپارچه مورد علاقه خود را باز کنید
2. کد زیر را وارد کنید:
   
   
   HTML5 Input Types Test
   

Testing the HTML5 Input Types

HTML5 Input Fields
Color Selector

Date Selector

DateTime Selector

DateTime-Local Selector

Email Selector

Month Selector

Number Selector

Range Selector

Search Selector

Telephone Selector

Time Selector

URL Selector

Week Selector

فایل را به عنوان inputtypestest.html در پوشه DocumentRoot برای خود ذخیره کنید وب سرور (مانند c:\xampp\htdocs برای XAMPP در ویندوز، یا / برنامه/XAMPP/htdocs برای XAMPP در macOS).

4. وب سرور خود را راه اندازی کنید.
5. یک مرورگر باز کنید و URL زیر را وارد کنید:

http://localhost:8080/inputtypestest.html

6. پنجره مرورگر را ببندید و وب سرور را خاموش کنید. فایل inputtypestest.html یک راه عالی برای مشاهده نحوه ظاهر انواع ورودی جدید HTML5 در مرورگرهای مختلف است.
   در دستگاه تلفن همراه شما دستگاه‌های تلفن همراه از صفحه‌کلیدهای مجازی استفاده می‌کنند که با کلیک روی فیلد فرم ورودی، روی صفحه ظاهر می‌شوند. اکثر دستگاه های تلفن همراه سفارشی می شوند صفحه کلید بسته به نوع فیلد فرم ورودی که روی آن کلیک می کنید. به عنوان مثال، در نوع ورودی تلفن، دستگاه تلفن همراه ممکن است فقط یک صفحه کلید عددی را نمایش دهد. برای وارد کردن شماره تلفن؛ برای نوع ورودی ایمیل، دستگاه تلفن همراه ممکن است صفحه کلید را با دکمه com نمایش دهید.