HTML5 New Form Elements

Aug 7, 2013
Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email
Download Source

In HTML5 there are tons of new form elements being added. All of these brings a lot of advantage to the Web developers and consumers at the same time. With these new improvements, accepting different types of input from our users and providing validation for these fields will be much more easier and more enjoyable.

Today, we will explore some of these new form elements. So let's jump right into it. Following is the list of some of these new HTML5 elements that we will be looking into.

  • required
  • email
  • url
  • number
  • range
  • outout

As usual I will be using Visual Studio 2012 to create this sample. But the actual sample only contains html page, so any text editor would do just fine.

required attribute

Going further in HTML5 forms, if you want to make any input field required, just add this extra attribute to your input and browser itself will make sure to validate this business rule for you.

required HTML5 Attribute

email input Type

This new input type makes sure that if you are asking for an email from the user, it is actually correct email address format and not some junk data. Again the validation is performed by the browser without you writing any JavaScript or other types of validation.

Note :- Validations rules might be different on different browser, or at least they are at the time of this writing.

Input Type Email

url input Type

Similar to the email input type, this makes sure the data entered by the user is actually a URL and not some garbage data. Of course, without you needing to write any validation logic.

Input Type URL

number input Type

So many times in our forms we need ask users to input numbers and we need to write validations around that to make sure the the value entered into that box is indeed a number. Going further you would be able to create an input type number, and browser will make sure that only numbers are entered into the input box.

Input Type Number

range input Type

Similar to the numeric input type but when the vale is going to be between predefined set of min and max values. Generally the browser will render this element as a slider control.

Input Type range

output Element

This element can be used to take some other fields value and display inside this control. In our example we will try to display result of our range input type above into and output element.

HTML5 Output eement

With this introduction, let's go ahead and create an HTML page inside our empty Asp .Net Empty Web Application using Visual Studio 2012. Go ahead and run the page and try submitting the form.

Required Error

Email Error

URL Error

Other Elements