HTML5 Input Types

Posted by under Web Development

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 val­ue.
  • max=“10” is the max­i­mum accept­able val­ue.
  • 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 val­ue.
  • value=“6” is the default val­ue.

HTML5 also adds some more attrib­ut­es.

  • 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 pick­ers.

  • 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 oth­ers.

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