HOME HTML

How to Create HTML5 Form? Step By Step Tutorials

HTML5 Form
Written by Nauman Rehmat

HTML5 is very good at creating forms. Its provide very useful tags that help you to create a full fledged form whether it is a contact form or about form or something else. Today i’ll tell you how you can create a simple form that will have nearly all attributes a person needs for creating a form. This will consist of step by step tutorial for better understanding. We will divide the form in different parts, so we can show the code with its output.

Also See:

Sample HTML5 Form

HTML5 Form.jpg

In the form shown in screenshot I’ve placed some important features that are mostly used in HTML5 form creation. I will divide the form in different parts and will be explaining each element in detail so you will be able to implement it.Let’s get started with the handy features of HTML5 Form Creation.

Input Type: Text

In the above form we have two fields which uses input type as text. One is Name and the other one is Department. we use text input type when we want to show our data in the text field while we write unlike password.

Text fields.jpg

Code for the two text fields is given below:


Name: <input type="text" name="std_name" placeholder="at least 3 characters">
<br><br>
Department: <input type="text" name="std_department" placeholder="Must">

Place holder is one of another tag that is used in the above text field which show a hint to the user about what to be entered or the importance of that field.

Input Type: Password

Password input type is used when you require a user to enter his password. It can also be done using text input type but the main reason behind using password input type is that when we enter our password in the password field it don’t show the characters rather it shows *, so other other person will not be able to read your password.

Code for the password field is shown below:

password input type.jpg


Passward: <input type="passward" name="std_passward" placeholder="*****">* Must have one uppercase and a lower case.

Input Type: Radio

Radio input type is used when we require to choose a single option between two or more. In radio boxes you can’t check multiple options. As in the example you can see that if we require a user to enter his gender, So he will check either male or female. He can’t select both of options at single time as it;s not possible. View the code below for radio boxes.

radio input.jpg


Gender: <input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female" >Female

Input Type: Check Box

If you are required to input multiple option at a single time check box will be needed.i.e

If skills of a person are required then he may have multiple skills or may have a single skill or if we ask a person for the places he visited so he may have visited multiple places.

check boxes.jpg


<input type="checkbox" name="checklist">HTML
<input type="checkbox" name="checklist">CSS
<input type="checkbox" name="checklist">PHP
<input type="checkbox" name="checklist">JAVA
<input type="checkbox" name="checklist">RUBY

Drop Down List

In HTML5 Forms to replace the radio input type you can use drop down menu. It feels good to me rather than radio buttons. You can use it according to your choice. To use drop down menu use the below code.

dropdown menu.jpg

Martial Status:


<select name="Martial Status">
<option value="Maried">YES</option>
<option value="Unmaried">NO</option>
</select>

Text Area

In HTML5 Forms you can use the text are if you want someone to enter a few words about him. Text area is used while you don’t want to bound a person to some options. Text area can be entered as follows:

text area.jpg


<textarea rows="4" cols="50" name="comment" form="usrform">
Your Bio... max 20 words</textarea>

Submit Button

One of the last element in the above form is the submit button. This is the most important thing you must need to submit your data. To use the button simply write the below code:

submit html5.jpg


<input type="button" name="submit" value="Submit">

You can View the whole code. Click the view button below:

[button color=”red” size=”small” link=”http://www.infoocode.com/wp-content/uploads/2016/03/HTML5-Form.txt” icon=”” target=”true”]View[/button]

Last words

Hope this sample HTML5 Form will help the beginners to understand the basic form elements. I’ll be adding more features to it soon wait for the update.

So friends if you have any queries regarding HTML5 Forms feel free to ask in the comment box and do share this important stuff with your friends. Contact us to share your precious suggestions. Learn and Share 🙂

 

About the author

Nauman Rehmat

Nauman Rehmat is the owner of InfooCode and several other blogs.He is interested in Programming and SEO. He is also pursuing a degree in Computer Software Engineering from Comsats.

Leave a Comment

Pin It on Pinterest

Shares
Share This