HTML5 Input Types

HTML5 defines over a dozen new input types that you can use in your forms to allow better input control. We are about to know them today.

  • email
  • url
  • number
  • range
  • date
  • month
  • week
  • time
  • datetime
  • datetime-local
  • search
  • color

email

Email type is used to get email address and it is validated automatically when form is submitted. Browsers that don’t support type=”email” will treat it as type=”text” and render it as a plain text field.

url

Url type is for getting urls/ website addresses. Browsers render type=”url” like a regular text box, so users won’t even notice until they submit the form. Browsers that don’t support HTML5 will treat type=”url” exactly like type=”text”. It is validated when they submit form. It doesn’t allow spaces in the url. it should have an extention like .com, .org, etc.;

number

Number type is used to get a number, And you can even set attributes like min, max, step etc…

The attributes are

  • type=”number” means that this is a number field.
  • min=”0″ specifies the minimum acceptable value.
  • max=”10″ is the maximum acceptable value.
  • step=”2″ combined with the min value, defines the acceptable numbers 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) increases the field’s value by n.
  • input.stepDown(n) decreases the field’s value by n.
  • input.valueAsNumber returns the current value as a floating point number. (The input.value property is always a string.)

Browsers that don’t support type=”number” will treat it as type=”text”. The default value will show up in the field, but the other attributes like min and max will be ignored.

range

Range input is used to get a number as slider. It supports all the attributes number type supports. The only difference is interface. It shows a slider instead of text box. The browsers that don’t support will render it as simple 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)
  • datetime – Selects time, date, month and year (UTC time)
  • datetime-local – Selects time, date, month and year (local time)

Date pickers will be rendered as plain text boxes in browsers that don’t recognize 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 something then it shows a ‘X’ mark, by clicking it clears the text box.

color

Color type is a color picker, which lets you pick a color and returns the color’s hexadecimal representation. Opera supports the color type. The browsers which don’t support it will display a text filed.

demo