Creating Forms in HTML [Basic]

In the HTML document, we designed only one way communication in the web. The HTML document open and show the message. Forms are the tools to improve the user interface in the web. Using forms we can design a web page on which the user can communicate his wish, opinion and suggestions. Let’s see how to create forms in HTML.

A form is an area that can contain form elements. Form elements are elements that slow users to enter information like text, fields and text area fields, drop down menu, radio buttons, check boxes, etc.

A form is defined with the <form> tag.

<form>
<input />
<input />
<input />
<input />
</form>

Action Attribute

Forms are used to get input from the users. The user input is submitted to the server. The action attribute informs the browser the location of the server to which the form input has to be submitted.

Method Attribute

The method attribute has only two choices of values. They are,

Method="get"
Method="post"

These denotes the protocol the server users in the implementing the forms features. Usually the vale used for the method attribute is,

Method="post"

This is the recommended protocol with the post method, the information form the users is put into the data stream of HTTP, and the backend program can read the data as input through the “standard input” data stream.

In the case of the method = “get”, the data received in the form are placed at the end of URL. If the form is very big and has a number of inputs, the get method causes the URL to be very long. So the method = “get” option is often discouraged.

HTML Form Elements

1. Text Fields

Text fields are used when we want to user to type letters, numbers, etc. in a form.

<form>
First Name: <input type="text" name="firstname" />
Last Name: <input type="text" name="lastname" />
</form>

It will look in browser as,

First Name:
Last Name:

Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.

2. Check Boxes

Check boxes are used when we want the user to select one or more options of limited numbers of choices.

<form>
<input type="checkbox" name="vehicle" value="bike" /> Do You Have Bike
<input type="checkbox" name="vehicle" value="car" /> Do You Have Car
<input type="checkbox" name="gadget" value="mobile" /> Do You Have Mobile
<input type="checkbox" name="gadget" value="laptop" /> Do You Have Laptop
</form>

It will look in browser as,

Do You Have Bike
Do You Have Car
Do You Have Mobile
Do You Have Laptop

Note that write text after the check box tag, it will align all the boxes left side and will look better.

3. Radio Buttons

Radio buttons are used when we want the users to select one of a limited number of choices.

<form>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
<input type="radio" name="sex" value="unspecified" /> Unspecified
</form>

It will look in browser as,

Male
Female
Unspecified

Note that write text after the radio button tag, it will align all the boxes left side and will look better.

4. Form’s Action Attribute and Submit Button

When the user clicks on submit button, the content of the form is sent to another file. The form’s action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

<form name="input" action="html_form_database.html" method="get">

<b>Enter Your Name</b>
First Name: <input type="text" name="firstname" />
Last Name: <input type="text" name="lastname" />

<b>Select What You Have</b>
<input type="checkbox" name="vehicle" value="bike" /> Do You Have Bike
<input type="checkbox" name="vehicle" value="car" /> Do You Have Car
<input type="checkbox" name="gadget" value="mobile" /> Do You Have Mobile
<input type="checkbox" name="gadget" value="laptop" /> Do You Have Laptop

<b>Select Your Gender</b>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
<input type="radio" name="sex" value="unspecified" /> Unspecified

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

</form>

It will look like in browser as,

Enter Your Name 

First Name:
Last Name:

Select What You Have

Do You Have Bike
Do You Have Car
Do You Have Mobile
Do You Have Laptop

Select Your Gender

Male
Female
Unspecified

This is the basic of making simple HTML forms.