1. خانه
2. مقاله
3. انواع مختلف input در HTML5 برای طراحی سایت

انواع مختلف input در HTML5 برای طراحی سایت

Numbers

برای نمایش عدد از type=number استفاده می کند.به مثال زیر توجه می کنید:

<label for="quantity">I would like to receive  
<input type="number" min="1" name="quantity" id="quantity"> copies of 
<cite>The HTML5 Heraldcite>label>

attribute های دیگری مانند min,max,step در این type وجود دارد که به ترتیب برای فاصله اعداد،ماکزیمم و مینیمم اعداد می باشد.

Ranges

این type هم دارای attribute های min,max,step می باشد به مثال زیر توجه کنید:

<label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:label> 
<input name="rating" type="range" min="1" max="10" step="1">

Colors

این type هم که برای رنگها بکار می رود دارای pattern attribute می باشد که فقط hexadecimal color را قبول می کند.به مثال زیر توجه کنید:

<label for="clr">Color: label> 
<input id="clr" name="clr" type="color" placeholder="#ffffff" pattern="#(?:[0-9A-Fa-f]{6})">

Dates and Times

این type برای نمایش زمان بکار می رود به مثال زیر توجه کنید:

<label for="startdate">Please start my subscription on:label>
<input type="date" min="1904-03-17" max="1904-05-17" id="startdate" name="startdate" required aria-require="true" placeholder="1904-03-17">