Working with Forms

The form element is a powerful part of HTML . Using forms you can get and recieve information from visitors. You may store that data into a file, place an order, gather user statistics, register the person to your web forum, or maybe subscribe them to your weekly newsletter.

A form is defined with the <form> tag.
<form>
<input>
<input>
</form>

Input

Input tag is widely used in form. Input tag is commonly used with type attribute. Below are some examples of <Input> tag with type attribute.

Text Fields

Text Fields are most common used for collecting information such as names, email addresses, URLs, etc . For Example:

<form>
Name:
<input type="text" name="username"><br>
E-Mail:
<input type="text" name="email">
</form>

Name :
E-Mail:

Radio Buttons

Radio Buttons are used with user when you want the user to select one of the limited number of choices.. For Example:

<form>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Male">Female
</form>

Output:

Male Female

CheckBoxes

checkboxes are used when you want the user to select one or more option of a limited number of choices.

<form>
<input type="checkbox" name="course" value="Visual Basic ">Visual Basic
<input type="checkbox" name="course" value="HTML">HTML
<input type="checkbox" name="course" value="Java">Java
</form>

Visual Basic HTML Java

Submit

Displays a send message button at the end of the form. Clicking this will send all the form data.

<form>
Name:
<input type="text" name="username">
<input type="submit" name="submit" value="Submit">
</form>

Name:

Button

Buttons are used to perform any action or send data..

<form>
Name:
<input type="text" name="username">
<input type="button" name="button" value="Button">
</form>

Name:

Reset

Reset type is used to clear all data in form.

<form>
Name:
<input type="text" name="username">
<input type="button" name="button" value="Button">
</form>

Name:

Text Area

The textarea is used for enter a message or comments.

<form>
<textarea cols=60 rows=8 name="message">
</textarea>
</form>

Select

Using <select> tag user can select one or more items from a menu or a scrolling list. They are similiar in functionality to radio buttons or checkboxes. Select menues are created with the <select> and <option> tags. <select> is the list itself and each <option> is an available choice for the user. For example:

<form>
<select name="course">
<option value="PHP">PHP</option>
<option value="ASP">ASP</option>
<option value="JavaScript">JavaScript</option>
<option value="HTML">HTML</option>
<option value="JSP">JSP</option>
</select>
</form>

PHP ASP JavaScript HTML JSP