University of Wah
Web Application
Development
Lec # 02
Lec Syed Ahmad Raza
Introduction to HTML Tables
• HTML Tables allow you to arrange data into
rows and columns on a web page, making it easy
to display information like schedules, statistics, or
other structured data in a clear format.
• An HTML table is created using the <table> tag.
Inside this tag, you use
• <tr> to define table rows,
• <th> for table headers, and
• <td> for table data cells
HTML Tables
• Each <tr> represents a row, and within each row,
<th> or <td> tags represent the cells in that
row, which can contain text, images, lists, or even
another table.
Table Boarder ,Merging Rows & Columns:
• Boarder
• <table border="1">
Rowspan: merges multiple rows.
• <td rowspan="2">Student</td>
Colspan: merges multiple columns.
• <th colspan="2">Details</th>
HTML Tables
HTML Forms
HTML Forms use the <form> tag to collect user
input through various interactive controls. These
controls range from text fields, numeric inputs, and
email fields to password fields, checkboxes, radio
buttons, and submit buttons.
Form Elements:
The HTML <form> includes several elements, each
serving a unique purpose.
For example, the <label> element defines labels for
other <form> elements.
HTML Forms
Form Elements:
The <input> element is versatile and can be used
to capture various types of input data such as text,
password, email, and more simply by altering its
type attribute.
HTML Forms
Form Elements:
•<button>clickable button that perform functionality
•<select> It is used to create a drop-down list.
•<textarea>It is used to get input long text content.
•<datalist>It is used to specify pre-defined list options for
input controls.
HTML Form Attributes
The Action Attribute
•The action attribute defines the action to be
performed when the form is submitted.
•In the example below, the form data is sent to a
file called "action_page.php". This file contains a
server-side script that handles the form data:
HTML Forms Method types: GET
vs. POST
GET Method
Purpose: Retrieve data from the server.
How it works: Appends the form data to the URL as a query
string.
Example: http://example.com/search?q=hello&lang=en-
Characteristics:
•Data is visible in the URL.
•Limited data capacity (typically 2048 characters).
•Can be cached by browsers.
•Can be bookmarked.
HTML Forms Method types: GET
vs. POST
POST Method
Purpose: Send data to the server for processing.
How it works: Sends the form data in the request body.
Example http://example.com/login (data is sent in the
request body)
Characteristics:
•Data is not visible in the URL.
•Larger data capacity.
•Not cached by browsers.
•Not bookmark able.
HTML Forms Method types: GET
vs. POST
• GET: Use for retrieving data, such as searching, filtering, or
sorting.
• POST: Use for sending data, such as creating, updating, or
deleting records.
In HTML forms, specify the method using the method
attribute:
• <form method="get" action="/search">
• <form method="post" action="/login">
HTML Forms Example
Form Validation
• Form Validation means hat a user must fill in
specific fields before submitting a form. This is
typically done using the required attribute, which
prevents form submission if the field is left blank,
ensuring proper data input.
• Syntax
• <input type="text" required />
Form Validation
• Maxlength attribute
• The maxlength attribute in HTML limits the
number of characters a user can input in a field. It
helps prevent excessive input by restricting the
maximum characters, ensuring proper data
length in fields like text, password, or number.
• Syntax
• <input type="..." maxlength="...">
Form Validation
• Minlength attribute
• The minlength attribute in HTML sets the
minimum number of characters required for an
input field. It ensures users provide adequate
data, commonly used in fields like passwords or
phone numbers for validation.
• Syntax
• <input type="..." minlength="...">
Form Validation
• Min and max attributes
• The min and max attributes in HTML set the
minimum and maximum allowable values for
input fields, such as numbers, dates, or ranges,
ensuring users input values within a defined
range for validation.
• Syntax
• <input type="...“ min=" " max=" ">
Form Validation
• Multiple attribute
• The multiple attribute can help us to allow a user
to enter more than one value in a single input
field. The multiple attribute can be used only for
email and file input types.
• Syntax
• <input type="...“ multiple>
Form Validation
• Pattern attribute
• The pattern attribute in HTML specifies a regular
expression that an input field’s value must match.
It ensures users provide data in a specific format,
enhancing validation for fields like email, phone
numbers, or passwords.
• Syntax
• <input type="...“ pattern=" [0-9]{10}" >
Form Validation
• Pattern attribute
• <input type="...“ pattern=" [a-zA-Z0-9]+" >
• pattern that matches against a string of any
length, as long as the string contains only
lowercase letters (a-z), uppercase letters (A-Z), or
numerals (0-9).
Form Validation
• Pattern attribute (Username Patterns)
• Only letters (either case), numbers, and the
underscore; no more than 15 characters. [A-Za-
z0-9_]{1,15}
• Only lowercase letters and numbers; at least 5
characters, but no limit. [a-zd.]{5,}
• Only letters (either case), numbers, hyphens,
underscores, and periods. (Not the slash
character, that is being used to escape the
period.) The username must start with a letter
and must be between 1 and 20 characters long
(inclusive). [a-zA-Z][a-zA-Z0-9-_.]{1,20}
Form Validation
• Pattern attribute (Username Patterns)
• Only letters (either case), numbers, and the
underscore; no more than 15 characters. [A-Za-
z0-9_]{1,15}
• Only lowercase letters and numbers; at least 5
characters, but no limit. [a-zd.]{5,}
• Only letters (either case), numbers, hyphens,
underscores, and periods. (Not the slash
character, that is being used to escape the
period.) The username must start with a letter
and must be between 1 and 20 characters long
(inclusive). [a-zA-Z][a-zA-Z0-9-_.]{1,20}
End of Lecture 02
