HTML5 Form elements tutorial for HTML tags
Are you searching a tutorial which gives you complete description about HTML5. Here in this tutorial of HTML5 you will read about the form elements generally used in webpages and their validation through HTML5.
Form Elements in HTML5, tutorial
In my last post I had given some examples of the body elements like article tag, hgroup tag, caption tag, aside tag and many others. In this post of mine on HTML5 I will be giving you detail description about the new tags introduced by HTML5 for form elements.
Some of the most common tags used in form elements are name, username, password, date, email, mobile number and website URL. I will be explaining each of these tags one by one here in this post.
Name input field in HTML5
Let's start with name input field. Name is an input field which should accept only characters and not numbers or special characters as people don't have names with numbers or special characters. So a name input should accept only text and character elements. So, in order to make this validation fast HTML5 has given an alternative to validate this input field in browser itself. So the user will be alerted as soon as he gives any invalid input character on the name field.
It is done through name field validation in HTML 5, which is now supported by most of the updated browsers including Chrome 10+, Opera, Mozilla, and Ie9.
Here is the code:<input type="name" />
Username input field in HTML5
Similarly for usernames we cannot allow all the characters in the input field. We need to restrict with certain literals and characters and alphanumeric characters. In order to validate a username on the browser itself HTML5 has introduced this new element called username. See the example below to understand it better.
Here is the code:
Input Your username: <input type="text" name="username" pattern="^[a-zA-Z&393;&391;a-zA-Z0-9&393;{1,10}$"/>
Password input field in HTML5 form elements
Password is a field which shows only (.)dot characters or *(astrics) characters on typing the password as the password should be a private/hidden info. Password cannot be any language code or scripts. So, here below is an example of password tag supported by HTML5 supporting browsers. It also validates the same on the browser itself.
Password: <input type="password" name="password" accept="text/plain" align="middle" />
Date input field in HTML5 form elements
Date is also now a day a common tag found in the forms of web pages. So, learn how to give an input field which accepts dates only. You can specify a range under which this date tag will be accepting the users input.
Here is the code: <input type="submit" name="Submit" value="submit" />
Email Validation through HTML5, form element
Another very important tag used in the forms of web pages is email. And email validation needed JavaScript code earlier but now through HTML5 one can validate email input from the browser itself without using any JavaScript code.
Here is the code for email validation through HTML5.
Email: < input type="email"/>
URL element in form elements of HTML5
Similarly an URL input field can't accept any garbage text or invalid URL address. So, in order to validate URLs HTML5 introduced another tag for URL validation.
Here is the code for URL validation:<input type="URL"/>
Another very important field which is present in the forms of web pages are Mobile numbers input. So, HTML5 introduced a tag which supports telephone number validation by the browser itself. Enter your mobile number: <input type="tel">
Some other form elements which are present in some of the forms of web pages are datalist, progress field and meter field.
Here below are the codes for each entries:
Select your colour:
<input type="text" id="colorChoice" list="myDatalist">
<datalist id="myDatalist">
<option label="Red" value="red">
<option label="Blue" value="blue">
<option label="Green" value="green">
<option label="Yellow" value="Yellow">
<option label="Violet" value="Violet">
<option label="Indigo" value="Indigo">
<option label="Orange" value="Orange">
</datalist></form>
//Progress or range giving tag in HTML5 <progress max=100 value=50>50%</progress>
//Meter reading giving tag in HTML5 <meter min=10 max=100 value=65>65%</meter>
Here is another good feature of HTML5 which allows you adding two numbers directly on the browser. Try adding two numbers and see the results here itself.
Add any two Numbers:
