ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

لیست کنترل های جدید Html 5 مطلب ویژه

توسط 09 تیر, 1393 3797 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

form-input-type-date-time-type-html5-technotipHTML5 دارای انواع مختلف ورودی های جدید برای فرم ها می باشد. این ویژگی های جدید به شما اجازه کنترل بهتر ورودی و اعتبار را می دهد.  این کنترل های جدید در <input> استفاده می شوند و قابلیت ها و امکاناتی را مثل اعتبار سنجی اطلاعات و انواع فرم های انتخابی را به کاربران می دهد . لیست زیر شامل کنترل های <input> جدید در Html5 است .

برفرض مثال : نوع email در فیلدهای ورودی که باید یک آدرس ایمیل را شامل شود، مورد استفاده قرار می گیرد.
این نوع ورودی در مرورگرهای اپرا و موزیلا فایرفاکس و گوگل کروم پشتیبانی می شود.
مرورگر سافاری در آی فون نوع ایمیل را تشخیص می دهد ، و صفحه کلید را روی صفحه نمایش تغییر می دهد تا با آن جور شود(گزینه های @ و com. را اضافه می کند)

 

نام کنترل  توضیح 
color برای نمایش یک کنترل انتخاب رنگ به کاربر استفاده میشود
datetime برای نمایش یک کادر تاریخ و زمان به کاربر استفاده می شود
date برای نمایش یک کنترل تاریخ و انتخاب تاریخ مورد نظر استفاده می شود .
email برای نمایش یک کادر متن که کاربر بایستی حتما در آن یک آدرس ایمیل وارد نماید ، استفاده می شود
number  برای نمایش یک کادر متن به کاربر جهت وارد نمودن مقادیر عددی استفاده می شود .
month  برای نمایش یک کادر متن جهت انتخاب ماه و سال استفاده می شود .
range

برای قرار دادن یک کادر متن بر روی صفحه استفاده می شود ، که کاربر بایستی یک مقدار عددی را در محدوده تعیین شده برای آن ، وارد نماید .

search برای قرار دادن یک کادر انتخابی جهت جستجو در سایت استفاده می شود . این کنترل از موتور جستجو گوگل استفاده می کند .
time  برای قرار دادن یک کادر انتخابی جهت انتخاب تاریخ به کاربر استفاده می شود .
url برای قرار دادن یک کادر متن بر روی صفحه استفاده می شود ، که کاربر بایستی در آن یک آدرس اینترنتی وارد نماید .
Week برای انتخاب هفته یا سال توسط یک کادر متن استفاده می شود .
tel  برای ایجاد یه کادر متن که تلفن را دریافت می کند استفاده می شود .
Datetime-local  اجازه می دهد تا کاربر تاریخ و زمان منطقه را انتخاب کند.
   

 

نحوه استفاده از هر کنترل بالا را در زیر مشاهده خواهید کرد :

نوع ورودی: color
برای فیلدهای ورودی که باید شامل یک رنگ باشد ، مورد استفاده قرار می گیرد.
این نوع ورودی تنها در مرورگر اپرا پشتیبانی می شود .


نحوه استفاده  :

 

<'input type='color' name='favcolor>

 

نوع ورودی: date
این اجازه را می دهد تا کاربر یک تاریخ را انتخاب کند.
مرورگرهای اپرا – سافاری – گوگل کروم از این نوع ورودی پشتیبانی می کنند .

نحوه استفاده :

 

<'input type='date' name='bday>

 
نوع ورودی: datetime
نوع datetime اجازه می دهد تا کاربر یک تاریخ و زمان را انتخاب کند. (با منطقه زمانی)
این نوع ورودی در مرورگرهای اپرا , سافاری پشتیبانی می شود .

نحوه استفاده :

 

<'input type='datetime' name='bdaytime>

 


نوع ورودی: datetime-local
نوع datetime-local اجازه می دهد تا کاربر تاریخ و زمان منطقه را انتخاب کند.
این نوع ورودی در مرورگرهای اپرا و سافاری  پشتیبانی می شود .

نحوه استفاده :

 

<'input type='datetime-local' name='bdaytime>

 
نوع ورودی: email

نوع email در فیلدهای ورودی که باید یک آدرس ایمیل را شامل شود، مورد استفاده قرار می گیرد.
این نوع ورودی در مرورگرهای اپرا و موزیلا فایرفاکس و گوگل کروم پشتیبانی می شود.
مرورگر سافاری در آی فون نوع ایمیل را تشخیص می دهد ، و صفحه کلید را روی صفحه نمایش تغییر می دهد تا با آن جور شود(گزینه های @ و com. را اضافه می کند)

نحوه استفاده :

 

<'input type='email' name='usremail>

نوع ورودی: month
برای فیلدهای ورودی که باید یک مقدار عددی داشته باشند ، مورد استفاده قرار می گیرد.
شما همچنین می توانید محدودیتی در مورد اعدادی که پذیرفته می شوند تنظیم کنید.
این نوع ورودی در مرورگرهای اپرا, سافاری و گوگل کروم پشتیبانی می شود .

نحوه استفاده  :

<'input type='number' name='quantity' min='1' max='5>

 

برخی ویژگی ها که برای ایجاد محدودیت ها در این نوع ورودی می توان مورد استفاده قرار داد عبارتند از  :
•    max - تعیین حداکثر مقدار مجاز
•    min - تعیین حداقل مقدار مجاز
•    step - تعیین فواصل قانونی شماره
•    value - تعیین مقدار پیش فرض

 

نوع ورودی: range
نوع range برای فیلدهای ورودی است که باید یک مقدار از محدوده ای از اعداد باشد مورد استفاده قرار می گیرد.
شما همچنین می توانید محدودیتی در مورد اعدادی که قابل قبول است تنظیم کنید.
این نوع ورودی در مرورگرهای اپرا, سافاری و گوگل کروم پشتیبانی می شود .

نحوه استفاده :

 

<'input type='range' name='points' min='1' max='10>

 
نوع ورودی: search
نوع search برای جستجو در فیلدهای جستجو مورد استفاده قرار می گیرد.
این نوع ورودی در مرورگرهای سافاری و گوگل کروم پشتیبانی می شود .

نحوه استفاده :

 

<'input type='search' name='googlesearch>

 
ورودی: tel
یک فیلد برای وارد کردن یک شماره تلفن تعریف می کند مانند زیر :
در مرورگرهای اصلی مانند گوگل کروم و سافاری و موزیلا فایرفاکس و اینترنت اکسپلورر و اپرا پشتیبانی نمی شود.

نحوه استفاده :

 

<'input type='tel' name='usrtel>

 

نوع ورودی: time
اجازه می دهد تا کاربر یک زمان را انتخاب کند.
این نوع ورودی در مرورگرهای گوگل کروم , سافاری و اپرا پشتیبانی می شود .

نحوه استفاده  :

<'input type='time' name='usr_time>

 

نوع ورودی: url
نوع url برای فیلدهای ورودی که باید یک آدرس URL را شامل شوند ، مورد استفاده قرار می گیرد.
مقدار فیلد آدرس وقتی که فرم را مشاهده کنید به طور خودکار معتبر می شود.
در مرورگرهای اپرا, گوگل کروم و موزیلا فایرفاکس پشتیبانی می شود .

نحوه استفاده :

<'input type='url' name='homepage>

 

سافاری در آیفون نوع ورودی URL را تشخیص می دهد ، و صفحه کلید را روی صفحه نمایش تغییر می دهد تا با آن جور شود(گزینه .com را اضافه می کند)

نوع ورودی: week
نوع week اجازه می دهد تا کاربر یک هفته و سال را انتخاب کند.
مرورگرهای اپرا , سافاری و گوگل کروم از این نوع ورودی پشتیبانی می کنند.

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در سه شنبه, 03 شهریور 1394 ساعت 15:49
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا