در جلسه قبلی آموزش HTML با اعتبارسنجی HTML آشنا شدیم. در این بخش به input های جدید فرم ها در HTML خواهیم پرداخت.
در بخش دوم آموزش فرم ها قصد داریم input های جدید HTML5 را معرفی کنیم.
Input های جدید HTML5
HTML5 چندین <input>
جدید مثل email
, date
, time
, color
, range
و غیره را معرفی کرده است.
برای افزایش تجربه کاربری (UX) و ساختن فرم های تعاملی بیشتر می توانید از این نوع های جدید استفاده کنید.
به هر حال, اگر مرورگر شما در تشخیص این input
های جدید به مشکل بربخورد, آنها را مانند یک باکس متن ساده نمایش می دهد.
در این بخش از آموزش HTML قصد داریم نگاه کوتاهی به این input
های جدید بیاندازیم:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
input رنگ
Input نوع color
به کاربر اجازه انتخاب یک رنگ از لیست آبشاری انتخابگر رنگ را می دهد که خروجی آن یک مقدار hex برای رنگ است.
1 2 3 4 5 |
<form> <label> Select Color: <input type="color" name="mycolor"> </label> </form> |
توجه: این فیلد type=”color”
توسط اینترنت اکسپلورر و سافاری اپل پشتیبانی نمی شود. در حال حاضر توسط فایرفاکس, کروم و اپرا پشتیبانی می شود.
Input تاریخ
Input نوع date
به کاربر اجازه انتخاب تاریخ از تقویم آبشاری را می دهد.
1 2 3 4 5 |
<form> <label> Select Date: <input type="date" name="mydate"> </label> </form> |
توجه: این فیلد type=”date”
توسط اینترنت اکسپلورر و فایرفاکس پشتیبانی نمی شود. در حال حاضر توسط سافاری, کروم و اپرا پشتیبانی می شود.
Input تاریخ و زمان
Input نوع datetime
به کاربر اجازه انتخاب تاریخ و زمان را می دهد.
1 2 3 4 5 |
<form> <label> Date & Time: <input type="datetime" name="mydatetime"> </label> </form> |
توجه: این فیلد type=”datetime”
توسط اینترنت اکسپلورر و فایرفاکس, کروم و اپرا پشتیبانی نمی شود. در حال حاضر فقط توسط سافاری پشتیبانی می شود.
Input تاریخ و زمان محلی
Input نوع datetime-local
به کاربر اجازه انتخاب تاریخ و زمان محلی را می دهد. تاریخ و زمان محلی اطلاعات مربوط به منطقه زمانی را ارایه نمی دهد.
1 2 3 4 5 |
<form> <label> Local Date & Time: <input type="datetime-local" name="mylocaldatetime"> </label> </form> |
توجه: این فیلد type=”datetime”
توسط اینترنت اکسپلورر و فایرفاکس پشتیبانی نمی شود. در حال حاضر فقط توسط سافاری, کروم و اپرا پشتیبانی می شود.
Input ایمیل
Input نوع email
به کاربر اجازه وارد کردن آدرس ایمیل را می دهد. این فیلد بسیار شبیه فیلد با نوع text است اما اگر با ویژگی های مورد نیاز ترکیب کنید می توانید یک ترکیب برای اعتبارسنجی صحیح آدرس ایمیلی که باید وارد شود ایجاد کنید.
1 2 3 4 5 |
<form> <label> Email Address: <input type="email" name="myemail" required> </label> </form> |
این اعتبارسنجی برای فیلد type=”email”
توسط همه مرورگرهای معروف اینترنت اکسپلورر +۱۰ و فایرفاکس, کروم و اپرا و سافاری پشتیبانی می شود
نکته: شما می توانید فیلد ایمیل را بر اساس وضعیت اعتبارسنجی استایل دهی کنید, زمانی که یک مقدار وارد شد با استفاده از از سودو کلاس های :valid
, :invalid
یا :required
در CSS می توانید این کار را انجام بدید.
Input ماه
Input نوع month
به کاربر اجازه انتخاب ماه و سال از تقویم آبشاری را می دهد.
1 2 3 4 5 |
<form> <label> Select Month: <input type="month" name="mymonth"> </label> </form> |
توجه: این فیلد type=”month”
توسط اینترنت اکسپلورر و فایرفاکس پشتیبانی نمی شود. در حال حاضر فقط توسط سافاری, کروم و اپرا پشتیبانی می شود.
Input عدد
Input نوع number
به کاربر اجازه وارد کردن مقدار عددی را می دهد. شما با خصوصیت min
, max
, step
می توانید فقط یک سری مقداری خاص را دریافت کنید.
1 2 3 4 5 |
<form> <label> Select Number: <input type="number" value="1" min="1" max="10" step="0.5" name="mynumber"> </label> </form> |
این اعتبارسنجی برای فیلد type=”number”
توسط همه مرورگرهای معروف اینترنت اکسپلورر +۱۰ و فایرفاکس, کروم و اپرا و سافاری پشتیبانی می شود. البته اینترنت اکسپلورر ممکن است دکمه افزایش کاهش عدد را نمایش ندهد.
Input محدوده
Input نوع range
به کاربر اجازه وارد کردن مقدار عددی بین یک محدوده را می دهد. این نوع بسیار شبیه number
است اما یک کنترل ساده تر روی متن را می دهد.
1 2 3 4 5 |
<form> <label> Select Number: <input type="range" value="1" min="1" max="10" step="0.5" name="mynumber"> </label> </form> |
این اعتبارسنجی برای فیلد type=”range”
توسط همه مرورگرهای معروف اینترنت اکسپلورر +۱۰ و فایرفاکس, کروم و اپرا و سافاری پشتیبانی می شود.
Input جستجو
Input نوع search
برای ساخت فیلد جستجو کاربرد دارد.
یک فیلد جستجو مانند فیلد متن است اما در بعضی از مرورگرها مثل گوگل کروم و سافاری, همین که شروع با تایپ در باکس جستجو می کنید, یک آیکون ضربدر کوچک در سمت راست فیلد برای حذف کردن مقدار داخل فیلد نمایان می شود
1 2 3 4 5 |
<form> <label> Search Website: <input type="search" name="mysearch"> </label> </form> |
توجه: این فیلد type=”search”
توسط اینترنت اکسپلورر۹ و فایرفاکس و ورژن های قبلی پشتیبانی نمی شود. در حال حاضر فقط توسط سافاری, کروم و اپرا و اینترنت اکسپلورر۱۰+ پشتیبانی می شود.
Input شماره تماس
Input نوع tel
برای ساخت یک فیلد برای وارد کردن شماره تلفن کاربرد دارد.
1 2 3 4 5 |
<form> <label> Telephone Number: <input type="tel" name="mytelephone" required> </label> </form> |
توجه: این فیلد type=”tel”
توسط هیچ مرورگری پشتیبانی نمی شود. اما باز هم کاربردی است. در گوشی های آیفون و بعضی از دیوایس های اندروید با این فیلد کیبورد مجازی کاربر بصورت عددی نمایش داده می شود مثل وارد کردن شماره کارت در درگاه پرداخت بعضی از بانک ها.
Input شماره تماس
Input نوع tel
برای ساخت یک فیلد برای وارد کردن زمان با فرمت خاص کاربرد دارد.
1 2 3 4 5 |
<form> <label> Select Time: <input type="time" name="mytime"> </label> </form> |
توجه: این فیلد type=”time”
توسط اینترنت اکسپلورر و فایرفاکس پشتیبانی نمی شود. در حال حاضر فقط توسط سافاری, کروم و اپرا پشتیبانی می شود.
Input آدرس URL
Input نوع url
برای وارد کردن آدرس وب کاربرد دارد. شما می توانید از خصوصیات مختلفی استفاده کنید
1 2 3 4 5 |
<form> <label> Website URL: <input type="url" name="mywebsite" required> </label> </form> |
توجه: این اعتبارسنجی برای فیلد type=”url”
توسط همه مرورگرهای معروف اینترنت اکسپلورر +۱۰ و فایرفاکس, کروم و اپرا و سافاری پشتیبانی می شود.
Input آدرس week
Input نوع week
برای انتخاب یک هفته و سال توسط لیست آبشاری تقویم کاربرد دارد.
1 |
Select Week: <input type="week" name="myweek"> |
توجه: این فیلد type=”week”
توسط اینترنت اکسپلورر و فایرفاکس پشتیبانی نمی شود. در حال حاضر فقط توسط سافاری, کروم و اپرا پشتیبانی می شود.
امیدوارم در این بخش آموزش HTML , از انواع input های جدید HTML5 نهایت استفاده را برده باشید.
در بخش بعدی با تگ Canvas آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.