3 HTML Form

Hiren Joshi

A form is a container that contains one or more controls like text boxes, radio buttons, check boxes that can receive data.To create a form <form> tag is used. The most useful attributes of form tag are: method and action.When a form is submitted to the server for processing, the data in the controls is sent along with HTTP request.Method attribute specifies which HTTP method is used to submit the form data. The value a method attribute can set is get or post. By default it is get.When get method is used, the data is sent for processing to server by control is displayed as part of the URL. The post method does not show data as part of the URL when data is sent for processing to the server.The action method is used to specify the URL of the page or server-side script that will process the data in a form.

The <input> tag is used to specify the input object types.

The type attribute of <input> tag is used to specify the type of input object.

The following table shows various input attributes.

Following code snippet shows to create textboxes for username and password.

<html>

<body>

Username:

<br>

Password:

<br>

</form>

</body>

</html>

Name attribute is the most common attribute for all control except submit and reset. This name value is used for writing code.

The text type can have additional size, maxlength and value attributes.

Size attributes define the length of textbox for having the no. of characters in a textbox.

Maxlength determines the maximum length of textbox having maximum no. of characters in a textbox.

Value attributes displays the content in textbox when form loads on to browser.

Following code snippet shows radio button use.

<html>

<body>

Gender:

<input type=”radio” name=”gender” value=”Male” checked>Male

<input type=”radio” name=”gender” value=”Female”>Female

</form>

</body>

</html>

The value attribute is submitted to the server when form is processed.

The checked attribute checked the value. It is a Boolean attribute.

<html>

<body>

Skills:

<input type=”checkbox” name=”skills” value=”ASP.NET”>ASP.NET <input type=”checkbox” name=”skills” value=”Perl”>Perl

<input type=”checkbox” name=”skills” value=”Java”>Java

<input type=”checkbox” name=”skills” value=”Php”>Php

</form>

</body>

</html>

The submit button submitted data for the processing and reset button reset the controls.

<html>

<body>

</form>

</body>

</html>

The following code snippet shows use of button type.

<html>

<body>

</form>

</body>

</html>

The following code snippet shows use of image type.

<html>

<body>

<input type=”image” name=”Agree” src=”Autumn Leaves.jpg” width=”30″ height=”30″

alt=”click me”>

</form>

</body>

</html>

The following code shows use of file type:

<html>

<body>

Use the browse button to select file:

</form>

</body>

</html>

SELECT

The <select> tag allows user to select a single or more value from the available values.

The following code allows to select only one values from the available option.

<html>

<body>

Highest Education Qualification:

</select>

</form>

</body>

</html>

To select multiple values from the available options set the multiple attribute of select tag.

<html>

<body>

Job location preferences:

<br>

<option>Bangalore</option>

<option>Noida</option>

<option>chennai</option>

<option>Ahmedabad</option>

<option>Mumbai</option>

<option>Calcutta</option>

<option>Delhi</option>

</select>

</form>

</body>

</html>

The <textarea> tag make a large area for enter user input.

<html>

<body>

Address:

<br>

</textarea>

</form>

</body>

</html>

<html>

<body>

Username:

<br>

Password:

<br>

Address:

<br>

</textarea>

<br>

Gender:

<input type=”radio” name=”gender” value=”Male” checked>Male

<input type=”radio” name=”gender” value=”Female”>Female

<br>

Skills:

<input type=”checkbox” name=”skills” value=”ASP.NET”>ASP.NET <input type=”checkbox” name=”skills” value=”Perl”>Perl

Highest Education Qualification:

</select>

<br>

Job location preferences:

<br>

<option>Bangalore</option>

<option>Noida</option>

<option>chennai</option>

<option>Ahmedabad</option>

<option>Mumbai</option>

<option>Calcutta</option>

<option>Delhi</option>

</select>

</form>

</body>

</html>

To display form for good look a form table tag can be used.

CSS [Cascading Style Sheet]

Cascading style sheets are used to display web pages by specifying the fonts, colors, spacing and layout of the pages.

A CSS file consists of rule sets. The rule set is a combination of selector and declaration block.

The selector is identifier while declaration is made of property and value.

Selector

{

Color: red; declaration

}

Property value

CSS rule set can be a HTML element like h1, ID or class.

ID identifier begin with # symbol.

Class identifier has . prefix and then class-name.

HTML element:

{

Color: red;

}

#footer

{

Font-size: 50%;

Text-align: left;

}

Class

.menu_color

{

Color:silver;

}

The extension of cascading style sheet is .css

There are 3 types of style sheets.

1. External

2. Internal and

3. Embedded

External style sheet is a style sheet which is add in the html by using link tag in HTML.

Let us create an external style sheet in notepad.

body

{

background-color:Red;

}

Save this file as styles.css.

Now to use this style sheet in a web page include it in <head> tag of HTML.

<html>

<head>

<title> CSS Example </title>

</head>

<body>

This is body text.

</body>

</html>

Below code is a example of internal stylesheet.

<html>

<head>

<title> CSS Example </title>

body

{

color:green;

}

</style>

</head>

<body>

This is body text.

</body>

</html>

Embedded style sheet is shown in below code.

<html>

<head>

<title> CSS Example </title>

</head>

This is body text.

</body>

</html>

you can view video on HTML Form

References:

Ivan Bayross, Web Enabled Commercial Application Development Using HTML/Javascript/DHTML/PHP , BPB Publications.
Steven Holzner, HTML Black book, Kogent Learning Solutions Inc.
Deidre Hayes, Sams teach yourself HTML 4 in 10 minutes,
4. Ed Tittel , Mary Burmeister, HTML4 for Dummies, Wiley
Robert Sebesta, Programming the World Wide Web, Pearson Education Inc.
Deitel, Internet and World Wide Web How to Program, Pearson
Anne Boehm, Murach’s HTML, XHTML and CSS, Murachs
Elisabeth Robson, Eric Freeman, “Head First HTML and CSS “, O’Reilly
Thomas Powell, HTML and CSS The Complete Reference, McGrawHill Education India
John Duckett, Beginning HTML, XHTML, CSS and Java Script, Willy India
http://www.php.net
http://www.w3schools.com/
http://www.tutorialspoint.com/