HTML5 and CSS3 Fundamentals – HTML5 Form Elements

How to Use HTML5 Form Elements

We started this discussion by defining what HTML forms are and their main functions in web development process. We discussed the most common form elements. In this discussion, we look at new HTML 5 elements and attributes.

HTML 5 has introduced new elements together with new attributes. These new elements are meant to give hints to your browser about what type of the keyboard layouts to display for the on-screen keyboards. This is all meant to give you an impeccable experience while filling out the forms.

It’s important to note that web browser support for HTML5 elements will vary from one browser to another. In case the browser does not support HTML5, then it defaults to HTML4—which is supported by virtually all browsers.

So, let’s find out what’s new in HTML5 form elements.

New Input Types of Forms in HTML 5

Here are the new input types of forms in HTML 5

  1. Color

The color input type is used to provide the user with a native color picker. For instance the HTML code below illustrates this:

<input type="color" value="#00ff22">
  1. Date

It’s used to indicate the date picker. This provides users with mechanisms to easily select the date.  For instance the HTML code below illustrates this:

<input type="date" value="2015-05-05">
  1. Datetime

It’s an element that’s used to select both the date and the time for a particular day. The HTML code below illustrates this:

<input type="datetime" value="2015-05-05 T12:30:22.10">
  1. Datetime-local

This HTML element is used to select both the date and the time, which captures the local settings for your system. The HTML code below illustrates this:

<input type="datetime-local" value="2015-05-05 T10:20">
  1. Email

It provides a field for entering the e-mail address. For instance, the code below illustrates this:

<input type="email" value="someone@email.com">
  1. Month

It’s used to elect a full month. For instance, the code below illustrates how a full month can be selected by this HTML element:

<input type="month" value="2015-05">
  1. Number

It’s used for selecting numbers only. For instance, the HTML code below shows how you can define a field for picking numbers only:

<input type="number" value="200">

 

New Attributes for Forms in HTML 5

Here’s a list of new attributes that have been added to HTML5 to complement the new input types:

  1. autofocus

It’s used to set to the field when the element has been loaded. For instance, the code below sets an autofocus for the text field:

<input type="text" autofocus>
  1. formaction

This new attribute overrides the JavaScript’s validation in HTML 4 and previous versions of HTML. It’s used to override the action attribute of the form. For instance, the code below illustrates this:

<input type="submit" formaction="http://www.stoneriverelearning.com" value="Submit">
  1. formenctype

It specifies the form’s encoding type when submitting data. For instance, the HTML code below illustrates this:

<input type="submit" formenctype=" http://www.stoneriverelearning.com" value="Submit with enctype">
  1. formmethod

It’s used to override the form’s method attribute. For instance, the code below illustrates this:

<input type="submit" formmethod="GET" value="Submit">
  1. max

It specifies the maximum value for the number that has been entered in a text field.

The code below illustrates this:

<input type="range" max="100">
  1. min

It specifies the maximum value for the number that has been entered in a text field. The code below illustrates this:

<input type="range" max="0">
Well, that’s all that we can discuss about HTML 5 form elements. Try to experiment with these new HTML5 form elements and notice the difference between HTML4 and HTML5 form elements.

GET YOUR FREE PYTHON EBOOK!

(Visited 294 times, 1 visits today)