Lab3
Lab3
Lab # 03
Hyper Text Markup Language (form)
Objective:
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.
<form>
.
input elements
.
</form>
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.
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>
<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>
<iframesrc="URL"></iframe>
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>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<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.
<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 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:
The method attribute specifies the HTTP method (GET or POST) to be used
when submitting the form data:
However, when GET is used, the submitted form data will be visible in the page address field:
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.
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>
table, th, td {
border: 1px solid black;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<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.
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.
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>
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.
Tasks:
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)
Learning outcomes: