FORMS IN HTML


Forms in Html

 

Introduction

A form is simply an area that can contain form fields. For example during user registration you would like to collect information such as name, email address, credit card, etc. A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

 

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax:

 

<form action=”Script URL” method=”GET|POST”>

form elements like input, textarea etc.

</form>

 

What do you need to work with forms?

 

You need nothing more than what is required to work with HTML: a text editor and a web browser. Of course, if you are used to it, you can take advantage of a full IDE such as Visual Studio, Eclipse, Aptana, etc., but it’s up to you.

 

The main difference between an HTML form and a regular HTML document is that, most of the time, the data collected by the form is sent to a web server. In that case, you need to set up a web server to receive and process the data. How to set up such a server is beyond the scope of this article, but if you want to know more, see the article dedicated to this topic: Sending and retrieving form data.

 

 

Attributes of form tag

It has four attributes:

1 ACTION

2 METHOD

3 TARGET

4 ENCTYPE

1 ACTION:  The URI of a program that processes the information submitted via the form. A form is useless unless some kind of processing takes place after the form is submitted. The action attribute is used to inform the browser what page (or script) to call once the “submit” button is pressed

Example

 

Here, the action attribute tells the browser to send the form data to a form-handling  jsp page (which will presumably convert the form data to something more email-friendly):

 

<form action=”form-to-email.jsp”    >

</form>

 

2 METHOD

Two commonly used methods for a request-response between a client and server are: GET and POST.

 

GET – Requests data from a specified resource

POST – Submits data to be processed to a specified resource

 

method=”get”

 

This sends the form information by including it on the URL. The get method sends the information to the server in one step. It is best used for forms where the information is not secure (as it can be seen in the URL), and the amount of information passed is small. Get requests are useful if you want to call a CGI from a link.

<form method=”get” action=””>

method=”post”

 

This sends the form information in the HTTP environment. It is a little more secure, as your customers can’t see it directly (although it is sent in clear text, so it can be hijacked by hackers with packet sniffers). The post method sends the data to the server in two steps. First the browser contacts the server and after the contact is made, it sends the information. It is best used when you have a lot of information to pass (either textarea tags, or just a lot of fields.)

 

<form method=”post” action=””>

 

3 TARGET

A name or keyword indicating where to display the response that is received after submitting the form. In HTML 4, this is the name/keyword for a frame. In HTML5, it is a name/keyword for a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings:

_self: Load the response into the same HTML 4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.

_blank: Load the response into a new unnamed HTML 4 window or HTML5 browsing context.

_parent: Load the response into the HTML 4 frameset parent of the current frame, or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.

_top: HTML 4: Load the response into the full original window, and cancel all other frames. HTML5: Load the response into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.

 

4 ENCTYPE

When the value of the method attribute is post, enctype is the MIME type of content that is used to submit the form to the server. Possible values are:

application/x-www-form-urlencoded: The default value if the attribute is not specified.

multipart/form-data: The value used for an <input> element with the type attribute set to “file”.

text/plain (HTML5)

 

ELEMENTS OF FORM

In a form, there can be several elements to get the input form the user. They are:

1 selection list box

2 input box

3 text area

  1. Select list box:

Select List boxes are a way to offer a list of options to choose from without taking up a lot of space. Only one list item will be shown in view since a drop list is only one line high.

 

The HTML select (<select>) element represents a control that presents a menu of options. The options within the menu are represented by <option> elements, which can be grouped by <optgroup> elements. Options can be pre-selected for the user.

 

Attributes of <select>tag  are as follows

1 name=”decision”        gives a description of the list. This name will be sent in the feedback along with the selected OPTION.

 

2 option               creates the list. There is no ending tag for OPTION.

 

3 selected           creates a default choice. This option will be placed in view when the visitor views the FORM. If SELECTED is not specified in any OPTION, the first OPTION will be the first in view. This property is optional.

4 multiple

This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.

 

Example:

 

Source code:

<html>

<head>

<title> select list box</title>

</head>

<body>

<center><br>

<select name=”cars” >

<option value=”polo”>polo</option>

<option value=”alto”>alto</option>

<option value=”opel”>Opel</option>

<option value=”audi”>Audi</option>

</select>

</center>

</body>

</html>

 

 

In browser:

no

 

Example 2

With use of same example with multiple attribute

Source:

<html>

<head>

<title> select list box</title>

</head>

<body>

<center><br>

<select name=”cars” multiple=”multiple” >

<option value=”polo”>polo</option>

<option value=”alto”>alto</option>

<option value=”opel”>Opel</option>

<option value=”audi”>Audi</option>

</select>

</center>

</body>

</html>

 

Example 3

Suppose you want to select audi car by default lets see how:

 

Source code:

<html>

<head>

<title> select list box</title>

</head>

<body>

<center><br>

<select name=”cars” multiple=”multiple” >

<option value=”polo”>polo</option>

<option value=”alto”>alto</option>

<option value=”opel”>Opel</option>

<option value=”audi” selected>Audi</option>

</select>

</center>

</body>

</html>

 

Note: may or may not be working in Mozilla or other browser.

 

 

2 input box:

The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user.

Input type Value of the type attribute Description Example
BUTTON “button” A push button with no default behavior <input type=”button” name=N>
Checkbox “checkbox” A check box. You must use the value attribute to define the value submitted by this item. <input type=”checkbox” name=N>
Hidden “hidden” The VALUE attribute is required for hidden fields <input type=”hidden” name=N>
Text “text” Text fields are one line areas that allow the user to input text. <input type=”text” name=N>
Password “password” Input in a password field is sent to the server in clear-text <input type=”password” name=N>
Reset “reset” A button that resets the contents of the form to default values. <input type=”reset” name=N>
Submit “submit” A button that submits the form <input type=”submit” name=N>
Radio “radio” radio buttons are used when you want to let the visitor select one – and just one – option from a set of alternatives. If more options are to be allowed at the same time you should use
check boxes instead.
<input type=”radio” name=N>
Image “image” A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels. <input type=”image” name=N>

 

 

1 checkbox

 

THERE ARE various type of attributes used with checkbox as follows:

 

Attribute name Description
Name adds an internal name to the field so the program that handles the form can identify the fields
Value defines what will be submitted if checked
Align defines how the field is aligned i.e TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Tabindex Tab order of the field.
Checked Default check this field.

 

Example:

 

Source code:

<html>

<head>

<title>checkbox</title>

</head>

<body>

<center>

<form name=”nik” >

<b> SELECT YOUR GAME YOU WANT TO PLAY</b><br/>

 

Soccer: <input type=”checkbox” name=”sports” value=”soccer”  /><br />

 

Football: <input type=”checkbox” name=”sports” value=”football”  /><br />

 

Baseball: <input type=”checkbox” name=”sports” value=”baseball”  /><br />

 

Basketball: <input type=”checkbox” name=”sports” value=”basketball”  />

 

</form>

</center>

</body>

</html>

 

 

In browser:

 

  1. RADIO BUTTON

Attributes of radio button Is sama as checkbox field i.e name, value,align and tabindex.

Example:

Source code:

<html>

<head>

<title>checkbox</title>

</head>

<body>

<center>

<form name=”nik” >

What size pizza?<P>

<INPUT TYPE=RADIO NAME=”pizzasize” VALUE=”S”>small<BR>

<INPUT TYPE=RADIO NAME=”pizzasize” VALUE=”M”>medium<BR>

<INPUT TYPE=RADIO NAME=”pizzasize” VALUE=”L”>large<P>

<INPUT TYPE=SUBMIT VALUE=”submit”>

</form>

</center>

</body>

</html>

 

In browser:

<html>

<head>

<title>checkbox</title>

</head>

<body>

<center>

<form name=”nik” >

What size pizza?<P>

<INPUT TYPE=RADIO NAME=”pizzasize” VALUE=”S”>small<BR>

<INPUT TYPE=RADIO NAME=”pizzasize” VALUE=”M”>medium<BR>

<INPUT TYPE=RADIO NAME=”pizzasize” VALUE=”L”>large<P>

<INPUT TYPE=SUBMIT VALUE=”submit”>

</form>

</center>

</body>

</html>

 

 

Difference between radio button and checkbox

In radio button you can select only one value but in checkbox you can select multiple choices.

 

For example:

Source code:

<html>

<head>

<title>checkbox</title>

</head>

<body>

<center>

<form name=”nik” >

 

<b> SELECT YOUR GAME YOU WANT TO PLAY</b><br/>

 

Soccer: <input type=”checkbox” name=”sports” value=”soccer”  /><br />

 

Football: <input type=”checkbox” name=”sports” value=”football”  /><br />

 

Baseball: <input type=”checkbox” name=”sports” value=”baseball”  /><br />

 

Basketball: <input type=”checkbox” name=”sports” value=”basketball”  />

<br/>

 

What size pizza?<P>

<INPUT TYPE=RADIO NAME=”pizzasize” VALUE=”S”>small<BR>

<INPUT TYPE=RADIO NAME=”pizzasize” VALUE=”M”>medium<BR>

<INPUT TYPE=RADIO NAME=”pizzasize” VALUE=”L”>large<P>

<INPUT TYPE=SUBMIT VALUE=”submit”>

</form>

</center>

</body>

</html>

In browser:

 

 

 

  1. Text field , password field and submit button

Attributes used with text field are given below:

Attribute Description
Size defines the width of the field
Maxlength defines the maximum length of the field

 

Name, value ,align and tabindex are also used with it.

 

Example of registration form :

Source code:

<html>

<head>

<title>checkbox</title>

</head>

<body>

<center>

<form name=”nik” >

First Name:

<input type=”text” name=”firstname”><br><br>

Last Name:

<input type=”text” name=”lastname”><br><br>

Password:

<input type=”password” name=”pwd”><br><br>

Radio Button: Are you male or female?<br><br>

<input type=”radio” name=”sex” value=”male”>Male

<input type=”radio” name=”sex” value=”female”>Female<br><br>

Check Box: Check the languages you know<br>

<input type=”checkbox” name=”language” value=”cpp”>CPP<br><br>

<input type=”checkbox” name=”language” value=”java”>JAVA<br><br>

 

<input type=”checkbox” name=”language” value=”ajax”>AJAX<br><br>

<input type=”checkbox” name=”language” value=”html”>HTML<br><br>

<input type=”checkbox” name=”language” value=”php”>PHP<br><br>

<input type=”checkbox” name=”language” value=”c”>C<br><br>

<input type=”submit” value=”submit”><br>

</form>

</center>

</body>

</html>

 

IN BROWSER:

 

 

  1. Textarea

The HTML <textarea> element represents a multi-line plain-text editing control.

Required Attributes

Rows

used to define the number of viewable rows.

 

 

Cols

used to specify the number of viewable columns.

 

Optionl attributes:

Name, disabled, readonly, accesskey, tabindex .

 

 

Example:

Source code:

<html>

<head>

<title>checkbox</title>

</head>

<body>

<center>

<form name=”nik” ><br/><br/><br/>

HERE IS THE TEXT AREA EXAMPLE <br/><br/><br/><br/>

 

<textarea name=”textarea” rows=”10″ cols=”50″>Write something here</textarea><br/><br/>

 

<input type=”submit”/>

</form>

</center>

</body>

</html>