Information Technology (IT) Notes for Std. 12th HSC Board Exam

HTML Forms

PART 1

FOR VIDEO TUTORIAL CLICK HERE

TOPICS

Introduction to Forms
Form Elements
<input> tag
Textbox & Password box elements
Radio button and Check box elements
Submit and Reset buttons
Few attributes of <input> tag

Introduction to Forms

Forms are an interactive feature of many websites.

Forms are the primary method for getting data from visitors of the web site.

A form takes the input and sends the data to webserver on clicking submit button.

On the web server backend application scripts will collect the data and store it on the database on the server.

Creating Forms

To create forms in HTML web page

<form> element is used

It is a container tag which will contain all the form elements

Form Elements

<input> element
The <input> element is the most important form element.
Using <input> tag and its type attribute you can create various form elements.
It is an empty tag.

To create text box:

First Name : <input type=“text” name=“fname” size=20>

It defines a single-line text input field.

To create Password box

Password: <input type=“password” name=“pwd” size=16>

The characters in a password field are masked (shown as asterisks or circles).

Radio Button
A radio button is used to select one of many given choices.
Radio buttons are shown in radio groups to show a set of related options, only one of which can be selected.

To create Radio button:

Example -

Gender:

<input type=“radio” name=“gender” value=“male”> Male

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

Checkbox
Checkboxes are used for instances where a user may want to select multiple options

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

To create Checkbox
Example -

<h2>Select your Hobbies: </h2>
<input type=“checkbox” name=“h_read” value=“reading”> Reading

<input type=“checkbox” name=“h_surf” value=“surf”> Surfing

<input type=“checkbox” name=“h_music” value=“music”> Listening to Music

Creating a Simple Form (Form Example No. 1)

<!doctype html>
<html>
<head>
<title>Form example</title>
</head>
<body bgcolor=“#FFFFCC”>
<h1>Submit your information</h1>
<form>
First Name : <input type=“text” name=“fname”>
<br> <br>
Last Name : <input type=“text” name=“lname”>

Gender :

<input type=“radio” name=“gender” value=“male”> MALE

<input type=“radio” name=“gender” value=“female”> FEMALE

Hobbies :

<input type=“checkbox” name=“h_read” value=“reading”> Reading

<input type=“checkbox” name=“h_surf” value=“surf”> Surfing

<input type=“checkbox” name=“h_music” value=“music”> Listening to Music

</form>

</body>

</html>

Submit Button
The Submit Button allows the user to send the form data to the web server.
The form data is typically handled by a Web Server page with a script for processing input data.
The server page is specified in form's action attribute.

Reset Button
A reset button is used to reset all form values to their default values. (clear the form)

Attributes of <input> tag
Type - Specifies the type <input> element to display
Name - Specifies the name of an <input> element
Size - Specifies the width (in characters) of an input field
Maxlength - Specifies the maximum number of character for an input field
Value - Specifies the default value for an input field
Checked - Specifies that an input field should be pre-selected when the page loads (only for radio buttons and checkbox fields)

Disabled - Specifies that an input field is disabled
Required - Specifies that an input field is required (must be filled out) before submitting the form
Readonly - Specifies that an input field is read only (cannot be changed)
Autofocus - Specifies that an <input> element should automatically get focus when the page loads (boolean attribute)

Placeholder – specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).

Title – Provides a tool tip for the input field.

Pattern – Specifies a regular expression that an <input> element's value is checked against.

A regular expression, or regex for short, is a pattern describing a certain amount of text.

FOR HOME WORK PRACTICE

Create the following forms :

NOTES FOR READING

PART 2

FOR VIDEO TUTORIAL CLICK HERE

TOPICS

About Action attribute of <form> tag
Few attributes of <input> tag
Creating Drop-down list box
Attributes of <select> tag
<textarea> tag
Attributes of <textarea> tag

Action attribute of <form> tag
The Action attribute is used to specify where the form data is to be sent to the server after submission of the form.
Action=“URL” - It is used to specify the URL of the document where the data to be sent after the submission of the form.

I have created a php script on my website which will give a response after submitting form to it, so specify the script in action attribute of forms you create...

Add the action attribute in <form> tag as per given below:

<form action=“https://exza.in/response.php”>

The response.php web page will collect the form data and display back the contents.

Creating Drop-down list box
<select> tag is used to create drop-down list box consisting of a number of options, which a user can choose.
Each option is defined by an <option> tag.

In previous simple form example no. 1 add a dropdown list for selecting City.

Attributes of <select> tag
name – Defines a name for the drop-down list.
size – Defines the number of visible options in a drop-down list.
multiple – Specifies that multiple options can be selected at once.
selected – It specifies that an option should be pre-selected when the page loads. (for <option> tag)

E.g. <select name=“city” size=3 MULTIPLE>

required – Specifies that the user is required to select a value before submitting the form.
autofocus – Specifies that the drop-down list should automatically get focus when the page.
disabled – Specifies that a drop-down list should be disabled.

E.g. <select name=“city” size=3 MULTIPLE AUTOFOCUS>

Creating multi-line text box

<textarea> tag is used to create multi-line text box in HTML.

The textarea element can hold unlimited number of characters.

The size of the box can be defined by cols and rows attributes.

In previous simple form example no. 1 add a textarea for Address.

Attributes of <textarea> tag
name – Specifies a name for a text area.
rows – Specifies the visible number of lines in a text area.
cols – Specifies the visible width of a text area.
maxlength – Specifies the maximum number of characters allowed in the text area.

E.g. <textarea name=“address” cols=31 rows=5 maxlength=100>

required – Specifies that a text area is required. It must be filled out before submitting form.
autofocus – Specifies that the textarea should automatically get focus when the page loads.
readonly – Specifies that a text area should be read only (you cannot change).
placeholder – Specifies a short hint that describes the expected value of a text area.
disabled – Specifies that textarea should be disabled.