Summary -

In this topic, we described about new input types and new input attributes.

Getting fresh improvements in a specific one element can always happen, but it doesn’t go too far unless the browsers/audience are using and support those features.

The type attribute new values had the huge value type="text".

HTML5 presents various input types like week, month, time, Date, datetime, datetime-local, email, tel, URL, search, range, color, and number to enhance the client experience and to make the forms highly interactive.

But, if a browser collapses to identify these new input types, it will handle them like a typical text box.

We are going to take a brief look at every new input types of the following –

1 color allows the user to choose a color from the color picker
2 date It allows the user to choose a date from a drop-down calendar.
3 datetime It allows the user to choose a date and time along with time zone
4 datetime-local It allows the user to choose a local date and time
5 email It allows the user to submit e-mail address.
6 month It allows the user to choose a month and year from a drop-down calendar.
7 number It allows the user to register number value with the rise and decline arrow.
8 range It allows the user to range the value with the slider.
9 search It's a text field for registering a search string
10 tel It allows the user to register the phone number with a particular pattern.
11 time It allows the user to enter time.
12 URL It allows the user to enter website URL
13 week It allows the user to choose a week and year from a drop-down calendar.

Advantages -

The advantages of these new input types are great for web designers.

  • First, the new input types decrease our server-side-scripting and reliance on user-side for confirming ordinary data types like URLs, dates, and email addresses.
  • For mobile UI developers, form input types could get things simpler. For example, a form written with HTML5 can use the mobile gadget's native particular keyboards varying on what is the input type target.

HTML5 <input> new attributes

Below new attributes have been enhanced to the <input> element in HTML5 -

  • Autofocus: Automatically focuses one specific form field.
  • placeholder: Offers a clue to the client of what can be entered in the field.
  • required: Used for user side certifications.
  • form: Specifies the fort to which an <input> element belongs to width and height.
  • pattern: Specifies a normal expression that the value of the <input> element is tested against.
Note! In HTML5, we can use attributes that are boolean with or without values. For example, autofocus="autofocus" or also autofocus. I.e. the existence of a boolean attribute on an element signifies the true value, and the deficiency of the attribute signifies the false value. 
<input type="text" autofocus />
<input type="text" placeholder ="some text" />
<input type="text" required />

We will discuss these new attributes in the further chapters.