The very first thing that I learned as a programmer that seemed to be interesting and fun to play with. Its like cherry for every program. It makes every application a beautiful potray, its like making up a bride . But jokes apart, HTML(
) is a markup language that is used to create web pages as suggested by Wiki . And now coming to our topic
Hyper Text Markup Language
Lets not mess the Article and focus only the topics specified and get through them in details.
Gone are those days standing in queues and filling up forms, may it be for exams, posting mails, banks, hospitals almost everywhere, we used to fill forms to be specific paper forms. Now its technology that has succeeded the old forms with the one click events. With the Html tags and the helpers its a cake making show. Visit the respective websites you want to sign in or sign up for, fill the forms and yes you are done. Saving time that has now become the crucial part of life.
Its now derived that these forms are one of mandatory parts of any website you visit. Lets go deeper and explore what they exactly are.
Lets first know what Html4 was and then talk about its successor Html5
HTML4 has a set of form fields that you can use. There are:
Most of these form fields use the input element, but some form fields have their own elements. Html4 can contain form elements like text fields, password fields, radio buttons, checkboxes, and submit buttons.
The elements frame, frameset, and noframes are being removed from the language, as well as acronym, applet, basefont, big , blink, center , dir, font, isindex, strike , tt and u.All of these can be handled using CSS or other methods.
As we know every successor has inheritance from its predecessor, similarly Html5 has its properties similar to Html4 and much enhanced too.
Html5 Input Types
Every Html element for a form creation use input types. We all have encountered right!!
Something like this:- input type=
Yes we have.
This are some examples regarding the input types. These are vital elements for Html forms. And yes we all know what these are and how they perform. And more we will know from the demo code.
- class:- this performs the same as id but id's are used uniquely for specific elements whereas classes can be used commonly.
- name:- The name attribute specifies the name of an anchor.The name attribute is used to create a bookmark inside a document.
These are some of the attributes used during data entry.
Html5 Form Elements
Apart from the elements provided by the Html4,Html5 has the following more elements:
- <datalist>:-specifies a list of pre-defined options for an <input> element.
- <keygen>:-purpose is to provide a secure way to authenticate users.
- <output>:-represents the result of a calculation (like one performed by a script).
Lets see one by one how to implement in our application:-
<option value="Internet Explorer">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security" />
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b">
- value :-Sets the text value to be displayed in the text field as default text.
- size :-The approximate size in characters of this text field. Note, that the size will not always fit the given number of characters, and is often different in different browsers.
- maxlength :-The maximum number of characters that is allowed to type into this text field. The value must be a number.
- readonly :-Sets the text field in read-only mode, meaning you cannot change the text displayed in the text field. Valid values are
- disabled :-Sets the text field in disabled mode, meaning you cannot change the text displayed in the text area. Furthermore, when the form is submitted, the value of the text field is not submitted. Valid values are
Html Form Attributes
Html5 has new attributes into its bag. The attributes added make coding much easier. Some of them are:-
- autocomplete:-As the name suggests.The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
- nonvalidate:-The novalidate attribute is a boolean attribute. When present, it specifies that the form-data (input) should not be validated when submitted.
Some new attributes for input element are:
- height and width
- and many more...
First name:<input type="text" name="fname" autocomplete="On">
Last name: <input type="text" name="lname" autocomplete="On">
<form action="demo_form.asp" novalidate>
E-mail: <input type="email" name="user_email">
Lets go for our Demo
We start using the elements, the attributes and make our form. In the demo I have used the input types : text,radio,checkbox,file,buttons. Uploading files, selecting from multiple options.
Below are the elements how they look when used:-
Using the code
Formidable Form With HTML5 Putting Together what we discussed
Below is what we are going to bring up :-
<input type="text" value="Enter your Name"style="background-color:blue" title="Enter your name"/>
<input type="text" value="Enter in Integer"style="background-color:blue" title="Enter your age"/>
<input type="radio" value="male" title="Male"/>Male
<input type="radio" value="female" title="Female"/>Female
<input type="checkbox" value="Student"/>Graduate
<input type="checkbox" value="Graduate"/>B-tech
<input type="checkbox" value="Graduate"/>B-Sc
<input type="checkbox" value="Graduate"/>B-Com
<input type="checkbox" value="Graduate"/>Post-Graduate
Date of Birth:
<input type="text" value="dd/mm/yyyy"style="background-color:blue" title="Enter your DOB"/>
<input type="text" value="email@example.com"style="background-color:blue" title="Enter your E-mail"/>
Upload your Profile Pic:<input type="file" name="pic" accept="image/*" title="Profile Pic">
Select your favorite color: <input type="color" name="favcolor">
<input type="submit" value="Submit your color" title="Your color chosen">
<input type="submit" value="You are done" title="click here"/>
Points of Interest
Now we are done. But one more thing we need to render the CSS stylesheets and JS scripts if used right!!
<link rel="stylesheet" type="text/css" href="form.css">
and yes in the head section. Its a better practice to keep your CSS at the top and the JS scripts at the bottom of Html page.
I have written 1 article previously. This is my first into the competetion. Not too complicated, easy for beginners to learn, short and handy.