HTML5 Input Types

HTML5 defines over a dozen new input types that you can use in your forms to allow bet­ter input con­trol. We are about to know them today.

• email
• url
• num­ber
• range
• date
• month
• week
• time
• date­time
• date­time-local
• search
• col­or

email

Email type is used to get email address and it is val­i­dat­ed auto­mat­i­cal­ly when form is sub­mit­ted. Browsers that don’t sup­port type=“email” will treat it as type=“text” and ren­der it as a plain text field.

url

Url type is for get­ting urls/​ web­site address­es. Browsers ren­der type=“url” like a reg­u­lar text box, so users won’t even notice until they sub­mit the form. Browsers that don’t sup­port HTML5 will treat type=“url” exact­ly like type=“text”. It is val­i­dat­ed when they sub­mit form. It does­n’t allow spaces in the url. it should have an exten­tion like .com, .org, etc.;

number

Num­ber type is used to get a num­ber, And you can even set attrib­ut­es like min, max, step etc… 

The attrib­ut­es are

• type=“number” means that this is a num­ber field.
• min=“0” spec­i­fies the min­i­mum accept­able value.
• max=“10” is the max­i­mum accept­able value.
• step=“2” com­bined with the min val­ue, defines the accept­able num­bers in the range: 0, 2, 4, and so on, up to the max value.
• value=“6” is the default value.

HTML5 also adds some more attributes.

• input.stepUp(n) increas­es the field’s val­ue by n.
• input.stepDown(n) decreas­es the field’s val­ue by n.
• input.valueAsNumber returns the cur­rent val­ue as a float­ing point num­ber. (The input.value prop­er­ty is always a string.)

Browsers that don’t sup­port type=“number” will treat it as type=“text”. The default val­ue will show up in the field, but the oth­er attrib­ut­es like min and max will be ignored.

range

Range input is used to get a num­ber as slid­er. It sup­ports all the attrib­ut­es num­ber type sup­ports. The only dif­fer­ence is inter­face. It shows a slid­er instead of text box. The browsers that don’t sup­port will ren­der it as sim­ple text field.

date, month, week, time, datetime, datetime-local

These are date pickers. 

• date — Selects date, month and year
• month — Selects month and year
• week — Selects week and year
• time — Selects time (hour and minute)
• date­time — Selects time, date, month and year (UTC time)
• date­time-local — Selects time, date, month and year (local time)

Date pick­ers will be ren­dered as plain text box­es in browsers that don’t rec­og­nize type=“date” and others.

search

Search type is just a text type, used for search fields, like a site search, or Google search. When you type some­thing then it shows a ‘X’ mark, by click­ing it clears the text box. 

color

Col­or type is a col­or pick­er, which lets you pick a col­or and returns the color’s hexa­dec­i­mal rep­re­sen­ta­tion. Opera sup­ports the col­or type. The browsers which don’t sup­port it will dis­play a text filed.

demo