طراحی سایت طراحی سایت .

طراحی سایت

آموزش گام به گام و تصویری HTML قسمت بیستم و پنجم (ایران گستر)

HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.

 

 

[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
Input های HTML5
همزمان با معرفی HTML5 انواع مختلفی از input ها نیز به توسعه دهندگان معرفی شد تا بتوانند با استفاده از آن ها برنامه های کاربردی تر و راحت تری بنویسند. آن ها عبارت اند از:(ایران گستر)

color
date
datetime-local
email
month
number
range
search
tel
time
url
week
نکته: از آن جایی که این نوع input ها نسبتا جدید تر هستند ممکن است در تمام مروگر ها کار نکنند. اگر input ای در مرورگری پشتیبانی نشود، به جای آن یک فیلد خالی از نوع <"input type="text> نمایش داده خواهد شد.(ایران گستر)

 

Input های رنگی
این نوع از input ها به صورت <"input type="color> مشخص می شوند و کارشان ایجاد فیلد هایی است که رنگ خاصی را انتخاب کنند. اگر مرورگر کاربر از این input پشتیبانی کند یک color picker برای کاربر نمایش داده خواهد شد:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18



 

Color Picker


The input type="color" is used for input fields that should contain a color.


 

رنگ مورد نظرتان را انتخاب کنید


 

  
  

 

این قابلیت در internet explorer 11 و safari 9.1 و نسخه های قبلی این دو مرورگر پشتیبانی نمی شود.


 


مشاهده ی خروجی در JSBin

 

Input های تاریخ
input های نوع <"input type="date> فیلد هایی مخصوص نگه داری تاریخ می سازند. اگر مرورگر کاربر از آن پشتیبانی کند یک date picker نمایش داده خواهد شد:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18



 

Date Field


The input type="date" is used for input fields that should contain a date.


Depending on browser support:
A date picker can pop-up when you enter the input field.


 


  تاریخ تولد:
  
  

 

این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari پشتیبانی نمی شود.


 


مشاهده ی خروجی در JSBin

شما همچنین می توانید از attribute های min  و max استفاده کنید تا محدودیت هایی را برای این تاریخ ایجاد کنید:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19



 

Date Field Restrictions


Use the min and max attributes to add restrictions to dates:


 

تاریخی قبل از سال 1980-01-01 را انتخاب کنید:




تاریخی بعد از سال 2000-01-01 را انتخاب کنید:






 

این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari پشتیبانی نمی شود.


 


مشاهده ی خروجی در JSBin

 

Input های Datetime-local
این نوع از input ها با <"input type="datetime-local> مشخص شده و کار آنها دریافت ساعت و تاریخ (بدون هر گونه time zone – منطقه ی زمانی) می باشد:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18



 

Local Date Field


The input type="datetime-local" specifies a date and time input field, with no time zone.


Depending on browser support:
A date picker can pop-up when you enter the input field.


 

  Birthday (date and time):
  
  

 

این قابلیت در internet explorer 12 و نسخه های قبلی آن و همچنین در  safari و firefox پشتیبانی نمی شود.


 


مشاهده ی خروجی در JSBin

 

Input های ایمیل
این نوع input ها با <"input type="email> مشخص می شوند و کارشان دریافت ایمیل کاربران است. این نوع input ها معمولا از نظر ظاهری دقیقا شبیه به فیلدهای متنی ساده هستند و تنها تفاوتشان در این است که آدرس ایمیل کاربر را validate می کنند؛ یعنی چک می کنند که آدرس ایمیل نامعتبر نباشد و از الگوی صحیح پیروی کند.(ایران گستر)

همچنین برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید “com.” را اضافه کنند.(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18



 

Email Field


The input type="email" is used for input fields that should contain an e-mail address:


 

  E-mail:
  
  

 


هشدار:این قابلیت در Internet Explorer 9 و نسخه های قبل از آن پشتیبانی نمی شود.


 


مشاهده ی خروجی در JSBin

سعی کنید در خروجی بالا یک ایمیل نا معتبر (مانند example.com یا example یا example.com@me و …) وارد کنید. خواهید دید که فرم ثبت نخواهد شد و به جای آن یک هشدار به شما نمایش داده می شود.(ایران گستر)

 

Input های فایل
کار این نوع input ها که با <"input type="file> مشخص می شوند دریافت فایل های کاربر است. در صورتی که نیاز باشد کاربر فایلی را روی سرور شما آپلود کند (مانند تصویر پروفایل) می توانید از این نوع input استفاده کنید:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16



 

File upload


 

Show a file-select field which allows a file to be chosen for upload:


  


  یک فایل انتخاب کنید:
  


  

 


مشاهده ی خروجی در JSBin

 

Input های ماه
نوع <"input type="month> به کاربر اجازه می دهد که یک ماه و سال را انتخاب کند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18



 

Month Field


The input type="month" allows the user to select a month and year.


Depending on browser support:
A date picker can pop-up when you enter the input field.


 

  Birthday (month and year):
  
  

 

هشدار: این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.


 


مشاهده ی خروجی در JSBin

 

Input های عددی
این نوع input ها که به صورت <"input type="number> مشخص می شوند به کاربر اجازه میدهند که در یک فیلد تنها از اعداد استفاده کند. شما می توانید با min و max حداقل و حداکثر اعداد مجاز را نیز تعیین کنید.(ایران گستر)

در مثال زیر به مرورگر گفته ایم که کاربر حق دارد یک عدد بین 1 و 5 را انتخاب کند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18



 

Number Field


The input type="number" defines a numeric input field.


You can use the min and max attributes to add numeric restrictions in the input field:


 

  Quantity (between 1 and 5):
  
  

 

هشدار: این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.


 


مشاهده ی خروجی در JSBin

 

Input های محدوده
این نوع input ها با <"input type="range> مشخص می شوند و کارشان تعیین عددی است که مقدار دقیق آن برای ما مهم نیست (مانند slider ها). حد پیش فرض آن از 0 تا 100 است اما شما می توانید آن را تغییر دهید:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20



 

Range Field


Depending on browser support:
The input type "range" can be displayed as a slider control.


 


  Points:
  
  

 


هشدار:
این قابلیت در internet explorer 9 و نسخه های قبل تر از آن پشتیبانی نمی شود.


 


مشاهده ی خروجی در JSBin

 

Input های جست و جو
این نوع input ها با <"input type="search> مشخص می شوند و فیلدهایی برای قسمت جست و جو در سایت شما هستند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15



 

Search Field


The input type="search" is used for search fields (behaves like a regular text field):


 

  Search Google:
  
  

 


مشاهده ی خروجی در JSBin

این input ها از نظر کارکرد و از نظر ظاهر هیچ تفاوتی با فیلد های متنی ساده ندارند. تفاوت اصلی در بحث semantics و درک موتور های جست و جو از سایت شما است.

 

Input های تلفن
این نوع input ها که با <"input type="tel> مشخص می شوند مسئولیت دریافت شماره تلفن کاربران را دارند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15



 

Telephone Field


The input type="tel" is used for input fields that should contain a telephone number:


 

Telephone:

Format: 123-45-678

 


مشاهده ی خروجی در JSBin

احتمالا متوجه قسمت "{pattern="[0-9]{3}-[0-9]{2}-[0-9]{3 نشده اید. از آنجا که هر کشوری الگوی شماره تلفن های مخصوص خودش را دارد شما می توانید این الگو را بر اساس شماره تلفن های کشور خودتان تنظیم کنید. در الگوی بالا گفته شده است {3}[0-9] که یعنی 3 رقم اول شماره تلفن می توانند شامل اعداد 0 تا 9 (همه ی اعداد) بشوند. سپس دو رقم بعدی و در آخر سه رقم بعدی را مشخص کرده ایم. شما می توانید سعی کنید این الگو را مطابق با ایران طراحی کنید.(ایران گستر)

 

Input های زمان
این نوع input ها با <"input type="time> مشخص می شوند و به کاربر اجازه می دهند که بدون ذکر هیچ time zone یا منطقه ی زمانی، یک زمان خاص را انتخاب کند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19



 

Time Field


The input type="time" allows the user to select a time (no time zone):


 

Depending on browser support:
A time picker might pop-up when you enter the input field.


 

  Select a time:
  
  

 

این قابلیت در internet explorer 12 و نسخه های قبل تر آن و همچنین در safari پشتیبانی نمی شود.


 


مشاهده ی خروجی در JSBin

 

Input های URL
این نوع input ها به صورت <"input type="url> مشخص می شوند و مسئولیت دریافت یک آدرس اینترنتی (URL) را دارند. برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید “com.” را اضافه کنند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



 

URL Field


The input type="url" is used for input fields that should contain a URL address:


 

  Add your homepage:
  
  

 

این قابلیت در internet explorer 9 و نسخه های قبل آن پشتیبانی نمی شود.


 


مشاهده ی خروجی در JSBin

کار اصلی این نوع فیلد validate کردن داده ی کاربر است؛ یعنی چک می کند تا ببیند آیا آدرس URL ای که کاربر وارد کرده است دارای الگوی صحیحی است یا خیر. می توانید این مورد را در خروجی بالا چک کنید.(ایران گستر)

 

Input های هفته
این نوع input ها به صورت <"input type="week> نوشته می شوند و به کاربر اجازه می دهند تا یک هفته و یک سال را انتخاب کند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18



 

Week Field


The input type="week" allows the user to select a week and year:


Depending on browser support:
A date picker can pop-up when you enter the input field.


 

  Select a week:
  
  

 

این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.


 


مشاهده ی خروجی در JSBin


برچسب: ،
امتیاز:
 
بازدید:

+ نوشته شده: ۲۷ مهر ۱۳۹۸ساعت: ۱۲:۰۴:۰۸ توسط:فاطمه فیصلی موضوع: نظرات (0)