Hello guys,

Today we are going to see how can we build a form in HTML.

Introduction to forms

An HTML form is a section of a document containing normal content, markup, special elements called controls ( checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally “complete” a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.). This tutorial assumes that you already know about forms controls.


<div class="form-container">

<form action"" method="post">

<label for="username">Username</label>

<input type="text" id="username" name="username" value="" /><br/><br/>

<label for="password">Username</label>

<input type="password" id="password" name="pwd" value="" /><br/><br/>

<input type="submit" name="subform" id="submitform" value="Login" />

</form>

</div>

Below it is shown how the form will look like.

Here are the following points to note.

1. Action: It is the destination where the form will get submitted.

2. Method: The method by which form get submitted, there are two methods GET and POST for form submission.

3. <label>: It is the label or we can say text for the input field of the form , for attribute of the label and id attribute of the control i.e. Input or checkbox etc will be the same.

4. Submit button: Submit button has type submit and it is the control which perform form submission. Please note that never give name attribute as name=”submit” , this is just to avoid any future problems.

In this way you can add add various form control in the form like checkboxes, radio buttons, inputs etc. below is one more snippet of the form.


<div class="form-container">

<form action"" method="post">

<label for="username">Username</label>

<input type="text" id="username" value="" /><br/><br/>

<label for="mail">Email</label>

<input type="email" id="mail" value="" /><br/><br/>

<label for="password">Password</label>

<input type="password" id="password" value="" /><br/><br/>

<span>Gender</span><br/>

<label for="male"><input type="radio" id="male" value="male" />Male</label>

<label for="female"></span>input type="radio" id="female" value="female" />Female</label>

<input type="submit" name="subform" id="submitform" value="Login" />

</form>

</div>

Note: type=”email” is HTML 5 feature it will validate the email address internally, it works on the browser which supports HTML 5 like mozilla, chrome, safari and IE9+.

When the form gets submitted we have to do some actions for that we generally use some kind of server side scripting language like PHP, ASP.NET, java etc.

So, here we saw how can we build the form using html.

If you have any questions or feedback feel free to ask through comment section. 🙂

Creating forms in HTML

One thought on “Creating forms in HTML

  • May 27, 2013 at 8:17 pm
    Permalink

    I came to your “Creating forms in HTML – ShareThingz” page and noticed you could have a lot more traffic. I have found that the key to running a website is making sure the visitors you are getting are interested in your subject matter. There is a company that you can get traffic from and they let you try it for free. I managed to get over 300 targetted visitors to day to my website. Visit them today: http://nsru.net/fdse

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *