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||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.|
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.
<input type="text" autofocus /> <input type="text" placeholder ="some text" /> <input type="text" required />
We will discuss these new attributes in the further chapters.