How better can you do with the new <input> tag in HTML5
You are here:Home » Programming » How better can you do with the new <input> tag in HTML5

How better can you do with the new <input> tag in HTML5


HTML5 was introduced with a lot of new features and modifications to its previous version. It is compatible with the different technologies and used in mobile application development effectively.

HTML5 was introduced with new types for <input> tag. These new types allow better input control & eases the code validation without writing regular expressions every time.

Let's peek into the new <input> types along with the quick demo codes that show how better can you do with them.

Input Type: color

The ‘color’ type is used for input fields that should contain color.
For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  Select your favourite color: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>
</body>
</html>

Executing the above code would result the following:

Select your favorite color:

Input Type: date

The ‘date’ type allows user to select a date. You can select the date from the scroll down calendar that pops up when clicked on the field.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
Select your Birthday: <input type="date" name="bday">
  <input type="submit">
</form>
</body>
</html>

Executing the above code with date type will result the following:


Birthday:


Input Type: datetime

The ‘datetime’ type allows you to select a date and time along with the time zone.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
When is the party? (date and time): <input type="datetime" name="partytime">
  <input type="submit">
</form>
</body>
</html>

The above code after execution shows as follows:


When is the party? (date and time):


Input Type: datetime-local

This input type allows you to choose date and time but no time zone. If no time zone is to be displayed, it is better to use ‘datetime-local’ type in the input form.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  Birthday (date and time): <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>
</body>
</html>

Google Chrome can differentiate the both ‘datetime’ and ‘datetime-local’ types but Firefox and IE 11 cannot render the difference between these two input types.

Executing the above code results:


Birthday (date and time):

Input Type: email

The ‘email’ input type accepts email format of text into the field. The format other than user@example.com will not pass the validation.

It is easy to validate an email format with this type rather than writing regular expression.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  E-mail: <input type="email" name="email">
  <input type="submit">
</form>
<p><b>Note:</b> type="email" is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>


This input type is not compatible with the IE.

The above code looks like as follows when executed:

E-mail:
Note: type="email" is not supported in Internet Explorer 9 and earlier versions.

Input Type: month

The ‘month’ type allows users to select month and year from the drop down calendar.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  When is your birthday? (month and year): <input type="month" name="bdaymonth">
  <input type="submit">
</form>
</body>
</html>

The above give the following result:


When is your birthday? (month and year):


Input Type: number

The ‘number’ input type is used where the fields should contain numbers. The range of numbers between which the user should opt one can be defined by using ‘min’ and ‘max’ attributes.

The following are the attributes that can be used to specify restrictions:
min – To specify a minimum value in the range.
max – To specify a maximum value in the range.
step – To specify the jump interval of numbers.
value – To specify a default value.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  Work experience (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>
<p><b>Note:</b> type="number" is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
This type is not compatible with IE 9 or later versions.

When executed, it shows the result as follows:

Work experience (between 1 and 5):
Note: type="number" is not supported in Internet Explorer 9 and earlier versions.

Input Type: range

The ‘range’ input type allows to choose the range of numbers between the specified end points.

The difference between setting a range with ‘number’ type and ‘range’ type is that you are allowed to choose the range with a slider when using ‘range’ type where as you are allowed to choose a number from the dropdown list of range when using ‘number’ type.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
Rate amfastech: 0<input type="range" name="points" min="1" max="10">10
<input type="submit">
</form>
<p><b>Note:</b> type="range" is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>

Result for above code:

Rate amfastech: 010
Note: type="range" is not supported in Internet Explorer 9 and earlier versions.

Input Type: search

The ‘search’ field can be used to create custom search engines for your website.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form action="http://www.amfastech.com/?q">
  Search amfastech: <input type="search" name="googlesearch"><br>
  <input type="submit">
</form>
</body>
</html>

Result:

Search amfastech:


Input Type: tel

The ‘tel’ type accepts telephone number format into its field. This input type is not supported with most of the browsers including Google Chrome. We may expect it working in the future versions of web browsers.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  Telephone: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>
</body>
</html>

Result:

Telephone:

Input Type: url

The ‘url’ type allows input in URL format.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  Add your blog's URL here: <input type="url" name="blog"><br>
  <input type="submit">
</form>
</body>
</html>

Result:

Add your blog's URL here:


Input Type: week

You can select the number of the week from the dropdown calendar menu by using ‘week’ input type. The week number along with the year is displayed when selected a date.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  Week number(week number with year): <input type="week" name="year_week">
  <input type="submit">
</form>
</body>
</html>

Result:


Week number(week number with year):

Most of the major browser are upgrading to newer versions to avail full benefits of HTML5. Google Chrome, Mozilla Firefox, Safari and Opera are doing better when compared to Internet Explorer. Internet Explorer 11, so claimed better browser than ever, even can’t render HTML5 properly.

Besides all of these, HTML5 is fluid that supports rich content without any further usage of external plugins. That’s the beauty of it! What do you say? Is HTML5 really good? Comment your thoughts and opinions below!



0 comments:

Post a Comment

We're happy to read your thoughts and we'd try our level best to clear your queries if asked. Let's discuss it in a better way. Please don't spam and spoil the conversation :) Thank you!!