2 of 30

Introduction

HTML form tag used to collect information from visitors.
HTML form tag is used to design interactive web pages.
In addition to usual content , it contains special elements called controls.
HTML provides several control elements such as buttons,textboxes, password fields, checkboxes, radio buttons, selection boxes, hidden fields etc.,
Users enter the data using control elements, these data are usually sent to or submitted to a program at the server side.
In server program, in turn, process the data and take necessary action .

3 of 30

To make the form interactive., two things must be specified in the <form> tag.
The address of the program that will handle the form contents using action attribute.
The method by which the form data will be passed using method attribute .

Syntax for <form >:

Form elements like buttons, text box etc.,

</form>

4 of 30

Method Attribute

This attribute specifies how the form will submit the data to the address specified by the action attribute.

There are two possible values for method attribute.

GET:

Default method,the data are appended to the URL.
Information being passed will be visible in the address bar of the browser.
Vulnerable for sensitive data, not used usually.
It allows only ASCII characters

POST:

Data are sent as a part of HTTP request message and are not appended to the URL.
Data sent using this method are not visible and is useful for sensitive data.
It allows non-ASCIII characters too.

5 of 30

From Elements

Data are collected using different types of control elements.
Each control element should have a name , specified by attribute “name”.
Each control element has an initial value, specified by attribute “value”(users change the value).
Whenever form is submitted , the name-value pair of some controls is sent.
Most of the control elements are created using the <input> tag.
<input> has “type” attribute, specifies the type of input.
There are ten input types: text, password, checkbox, radio, button, sumit, reset, hidden, file and image.

6 of 30

Example of Form Elements

7 of 30

Attributes of the input tag

8 of 30

Label

The content of the <label> tag is a piece of ordinary text.

It is used to add a label to form field.

It describe meaning of the associated form field.

<label> form_content... </label>

9 of 30

Textfield

Most commonly used input element is text filed, and is used to get single-line textual data.
Attributes of text are:

Name: name of the textfield.

Size: indicates size of th text.

Value: indicates default value of the text.

Readonly: indicates the text field information can not be modified.

Maxlength: allows the user to enter text of maximum length.

Align: indicates the alignment of the text field. It might be left, right , middle.

10 of 30

<!DOCTYPE html>

<html>

<body>

<h2>Text field</h2>

<form >

<label >First name:</label><br>

</form>

</body>

</html>

11 of 30

Password

Passwords fields are similar to text fields except that characters entered are displayed as dots or asterisks.
This allows us to hide information from others.
It is used to accept sensitive information like passwords, credit card numbers,bank account details ,etc.

Note: characters entered are not encrypted, they are only shown as asterisks or dots.

12 of 30

Password Field Example

<!DOCTYPE html>

<html>

<body>

<h2>Text field</h2>

<form>

<label>Username:</label><br>

<label >Password:</label><br>

</form>

</body>

</html>

13 of 30

Check Box

A checkbox is like a toggle switch i.e, it can be in either of the two states checked or unchecked.

Checkboxes allow visitors to select one or more options from the set of related alternatives.

A check box is created using < input > tag and specifying the type=”checkbox”.

14 of 30

CheckBox

<!DOCTYPE html>

<html>

<body>

<h2>Check Box</h2>

<form>

</form>

</body>

</html>

Value attribute stores the value to be returned when the checkbox is checked.

15 of 30

Radio Button

It will allow users to select any one among a set of relative alternatives.
A radio button is like a check box, can be in either of the two states: on (checked), off( unchecked).
A group of radio buttons is created by giving same name to each button in the group.
When one radio button in one group is selected, remaining all radio buttons will automatically deselected.
A radio button is created using < input > tag and specifying the type=”radio”.

16 of 30

<!DOCTYPE html>

<html>

<body>

<h2>Radio Button</h2>

<p>Choose your favorite Web language:</p>

<form>

<label >JavaScript</label>

</form>

</body>

</html>

17 of 30

Selection List or DropDown Lists

It is like a group of radio buttons or checkboxes, allows users to choose one or more options.
It takes less space than radio buttons and checkboxes.
But , disadvantage is that users can not see all the options until they click on it.
A selection list is created using <select > tag, items of selected lists are created using <option> tag.
Size attribute displays how many items are to be displayed, if this is “yes”, users may select multiple items.
If no size attribute is provided , all items are displayed.

18 of 30

<!DOCTYPE html>

<html>

<body>

<h2>Selection List</h2>

<form>

<label>Choose your Favorite city in India</label>

<option>New Delhi</option>

<option>Indore</option>

<option>Jaipur</option>

<option>Jodhpur</option>

<option>Chandigarh</option>

<option>Mumbai</option>

<option>Bengaluru</option>

<option>Lucknow</option>

<option>Amritsar</option>

</select>

</form>

</body>

</html>

19 of 30

TEXT AREA

Text area is an extension of text field, where text can spam multiple lines.
It is used when users wants to enter a large amount of text.
The <textarea> element is often used in a form, to collect user inputs like comments or reviews.
It can hold unlimited number of characters and the texts are displayed in a fixed-width font
The size of a text area is specified by the <cols> and <rows> attributes.
The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the text area will be submitted).
The id attribute is needed to associate the text area with a label.

Syntax:

----------

</textarea>

20 of 30

Example

<!DOCTYPE html>

<html>

<body>

enter your text here

</textarea>

</body>

</html>

21 of 30

File upload

The file form field allows to select one or more files to be sent to the server side.
The files could be a text, image, or other files.
When the form is submitted , the content of the file is sent to the server.
The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
To define a file-select field that allows multiple files to be selected, add the multiple attribute.

22 of 30

Example

<!DOCTYPE html>

<html>

<body>

<h2>File Upload</h2>

Select a file(.pdf)<br>

</form>

</body>

</html>

Note:

difficult part of file control is to write server-side script that processes the file data.
Such processing must be robust and controlled so that no one can server disk space intentionally or unintentionally.

23 of 30

BUTTON

Push buttons can be created using the <input> tag, with type attribute “button”.
The caption is the value of the value attribute of the input tag.

Ex:

24 of 30

Buttons created using <input> tag, can only have text caption.
Buttons can also be created using the <button> tag.

<button> Logout </button>

25 of 30

Action Buttons

Two types of buttons we use almost for all forms are:

Submit button
Reset button

Submit button:

Submit button is used to send the url to the server script whose URL is specified by the “action” attribute of the form tag.

26 of 30

<!DOCTYPE html>

<html>

<body>

<h2>Button</h2>

<form >

</input>

</form>

</body>

</html>

WILL CREATE SUBMIT BUTTON WITH TEXT ON BUTTON AS “Send Request”, which when clicked, the form response will be submitted.

27 of 30

RESET Button

When reset button is clicked , the form fields are assigned their default initial values.
It is created as

28 of 30

<!DOCTYPE html>

<html>

<body>

<h2>Button</h2>

<form >

</input>

</form>

</body>

</html>

Attribute type specifies that it is a reset button and value specifies that text to be displayed on the reset button.

29 of 30

<!DOCTYPE html>

<html>

<body>

<h2>Button</h2>

<form >

<input type="reset" value="Restore Default Values"

onclick="return confirm('Do you really want to reset the form?')">

</input>

</form>

</body>

</html>

In this case , reset button is clicked, a dialog box appears for confirmation.

So, if the user clicks reset button accidentally the user may have chance to cancel it.

30 of 30

Image Button

<!DOCTYPE html>

<html>

<body>

<h2>Button</h2>

<form >

</input>

</form>

</body>

</html>

For good looking of buttons in forms, we use graphical submit button.
To use this property, the <input> tag with type attribute set to image.