FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

Hamdard Institute of Engineering & Technology

Hamdard University

Lab # 03
Hyper Text Markup Language (form)
Objective:

 To learn about HTML.

Theory:

HTML Forms
HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields,
checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea,
fieldset, legend, and label elements.

The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

HTML Forms - The Input Element

The most important form element is the <input> element. The <input> element is used to select user
information.

An <input> element can vary in many ways, depending on the type attribute. An <input> element can be
of type text field, checkbox, password, radio button, submit button, and more.

The most common input types are described below.

Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:

<form>
First name: <input type="text"
First name:
name="firstname"><br>
Last name: <input type="text" name="lastname"> Last name:
</form>

Hamdard Institute of Engineering & Technology, Hamdard University

SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
Password Field
<input type="password"> defines a password field:

<form>
Password: <input type="password" name="pwd">
Password:
</form>
Bottom of Form
Note: The characters in a password field are
masked (shown as asterisks or circles).

Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited
number of choices:

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

Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a
limited number of choices.

<form>
<input type="checkbox" name="vehicle"
I have a bike
value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" I have a car
value="Car">I have a car
</form>

Submit Button
<input type="submit"> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form's
action attribute. The file defined in the action attribute usually does something with the received input:

<form name="input"
action="html_form_action.asp" method="get">
Username: <input type="text" name="user"> Username:
<input type="submit" value="Submit">
</form>

Hamdard Institute of Engineering & Technology, Hamdard University

SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
HTML Iframe:
An iframe is used to display a web page within a web page. Syntax for adding an iframe:

<iframesrc="URL"></iframe>

The URL points to the location of the separate page.

The <form> Element

The HTML <form> element defines a form that is used to collect user input:

<form>
.
form elements
.
</form>

Eg.

<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

Radio Button Input

<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices:

<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>

Hamdard Institute of Engineering & Technology, Hamdard University

SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
<input type="radio" name="gender" value="other"> Other
</form>

The Submit Button

<input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

Normally, the form data is sent to a web page on the server when the user clicks on the submit button.

In the example above, the form data is sent to a page on the server called "/action_page.php". This page
contains a server-side script that handles the form data:

<form action="/action_page.php" target="_blank">

The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used
when submitting the form data:

<form action="/action_page.php" method="get">

Hamdard Institute of Engineering & Technology, Hamdard University

SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University

<form action="/action_page.php" method="post">

When to Use GET?

The default method when submitting form data is GET.

However, when GET is used, the submitted form data will be visible in the page address field:

When to Use POST?

Always use POST if the form data contains sensitive or personal information. The POST method does not
display the submitted form data in the page address field.

Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table
headings are bold and centered. A table data/cell is defined with the <td> tag

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Hamdard Institute of Engineering & Technology, Hamdard University

SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University

HTML Table - Adding a Border

If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property:

table, th, td {
border: 1px solid black;
}

HTML Table - Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property:

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

HTML Table - Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

HTML Forms
HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields,
checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea,
fieldset, legend, and label elements.

The <form> tag is used to create an HTML form:

Hamdard Institute of Engineering & Technology, Hamdard University

SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
<form>
.
input elements
.
</form>

HTML Forms - The Input Element

The most important form element is the <input> element. The <input> element is used to select user
information.

An <input> element can vary in many ways, depending on the type attribute. An <input> element can be
of type text field, checkbox, password, radio button, submit button, and more.

The most common input types are described below.

Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:

<form>
First name: <input type="text"
First name:
name="firstname"><br>
Last name: <input type="text" name="lastname"> Last name:
</form>

Password Field
<input type="password"> defines a password field:

<form>
Password: <input type="password" name="pwd">
Password:
</form>
Bottom of Form
Note: The characters in a password field are
masked (shown as asterisks or circles).

Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited
number of choices:

<form>
<input type="radio" name="gender"
value="male">Male<br>
Male
<input type="radio" name="gender" Female
value="female">Female
</form>
Hamdard Institute of Engineering & Technology, Hamdard University
SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a
limited number of choices.

<form>
<input type="checkbox" name="vehicle"
I have a bike
value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" I have a car
value="Car">I have a car
</form>

Submit Button
<input type="submit"> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form's
action attribute. The file defined in the action attribute usually does something with the received input:

<form name="input"
action="html_form_action.asp" method="get">
Username: <input type="text" name="user"> Username:
<input type="submit" value="Submit">
</form>

HTML Iframe:
An iframe is used to display a web page within a web page. Syntax for adding an iframe:

<iframe src="URL"></iframe>

The URL points to the location of the separate page.

Conclusion
This lab has taught you how to use HTML to create your own web site.

HTML is the universal markup language for the Web. HTML lets you format text, add graphics, create
links, input forms, frames and tables, etc., and save it all in a text file that any browser can read and
display.

The key to HTML is the tags, which indicates what content is coming up.

Hamdard Institute of Engineering & Technology, Hamdard University

SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University

Tasks:

Q1.CreateWebPages that display the timetable of eight semester of your discipline.

Q2.Create students registration form with all concerned fields that are used by the university.

Q3. Implement the different types of lists used in html to obtain following on web browser.(hint: use all
three lists)

Note: Attach a snap shot of every above mentioned task.

Learning outcomes:

Hamdard Institute of Engineering & Technology, Hamdard University

SharaeMadinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan