02 HTML - Intermediate Part I

HTML: Intermediate Part I
Learning Outcomes
After going through this module, you will be able to:

● Lesson 1: Forms: Build interactive forms using <form> and various
input elements like text fields, checkboxes, radio buttons, and
submit buttons.
○ Create HTML forms using the <form> element.
○ Incorporate various input elements, such as text fields,
checkboxes, radio buttons, and submit buttons, within forms.

○ Understand and implement form attributes like action and method.
○ Apply form validation techniques to ensure data integrity.
○ Develop interactive and user-friendly web forms following best
practices
● Lesson 2: Tables: Create structured tables using <table>, <tr>,

<td>, and <th> tags to display tabular data.
○ Construct well-structured HTML tables using the <table>, <tr>,
<td>, and <th> elements.

○ Define table headers for improved data comprehension.
○ Populate tables with rows and cells to organize and display tabular
data effectively
Lesson 1: Forms
Here is the fundamental structure of an HTML form:
<!DOCTYPE html>
<html>
<head>
<title>Sample Form</title>
</head>
<body>
<h1>Sample Form</h1>


<form action="#" method="post">



<label for="input1">Label for Input 1:</label>
<input type="text" id="input1" name="input1"
placeholder="Enter text here">


<input type="checkbox" id="input2" name="input2"
value="checkbox_value">
<label for="input2">Checkbox Label</label>


<input type="radio" id="input3a"
name="radio_group" value="option1">
<label for="input3a">Option 1</label>
<input type="radio" id="input3b"

name="radio_group" value="option2">
<label for="input3b">Option 2</label>


<input type="submit" value="Submit">
</form>
</body>
</html>
Explanation of the basic form structure:

. <form> Element: This is the container for all the input elements and
buttons. It has two important attributes:
○ action: Specifies where the form data will be sent for processing.
It can be a URL or a file name.

○ method: Defines how the form data is sent. Common methods are
GET and POST.

. Input Elements: Inside the form, you can include various input
elements like text fields, checkboxes, radio buttons, etc. Each input
element has attributes like type, id, name, and may also have a value.
Use labels (<label>) to provide a description for each input element.
. <label> Element: Labels are used to describe what each input element
represents. The for attribute of the <label> should match the id of the
associated input element. This helps improve accessibility and user
experience.
. Submit Button: Typically, a form includes a submit button that allows
the user to send the form data to the specified URL for processing.


<label for="input1">Label for Input 1:</label>
<input type="text" id="input1" name="input1"
placeholder="Enter text here">
In this example, the name attribute is used to identify the field, and when the
form is submitted, the data for this field will be sent to the server with the name
“input1.”
While the id attribute is not required for form fields to be submitted, it can
be useful for targeting form elements with JavaScript or for improving
accessibility through labels associated with the for attribute.
For debugging purposes, let’s add JavaScript code to check if the form we
created is working.


<script>
document.getElementById("myForm").addEventListener("subm
it", function(event) {
event.preventDefault(); // Prevent the form
from actually submitting
// Access and display form data

var form = event.target;
var formData = new FormData(form);
// Iterate through form data and log it (for

debugging)
for (var pair of formData.entries()) {
console.log(pair[0] + ": " + pair[1]);
}
});
</script>
</body>
</html>
To check the data submitted, right-click on your web page, select Inspect, and
then Console. You can see something like this.
Action and Method
Here are examples of different values for the action and method attributes in an
HTML form element:
. Action to a Specific URL with GET Method:
<form action="https://example.com/submit-form"
method="get">
In this example, the form data will be sent to the URL "https://example.com/
submit-form" using the GET method. The data will be appended to the URL as
query parameters.
. Action to the Same Page with POST Method:
<form action="#" method="post">
In this example, the form data will be submitted to the same page (as indicated
by the "#" symbol) using the POST method.
. Action to a Relative Path with POST Method:
<form action="/submit-form" method="post">
In this example, the form data will be sent to a relative path "/submit-form" on
the same domain using the POST method. The actual URL will depend on the
current page's location.
. Action to an Email Address with POST Method (mailto):
<form action="mailto:example@example.com" method="post">
In this example, the form data will be used to open the default email client with
a new email composition to "example@example.com." This approach uses the
"mailto" action and the POST method to pass data to the email client.
Simple Validation Techniques in HTML 5
To apply form validation techniques in HTML to ensure data integrity, you can
use various attributes and features provided by HTML5. Here are some
common form validation techniques:
. Required Fields: You can mark fields as required using the required
attribute. This ensures that users must fill in these fields before
submitting the form.
<input type="text" name="username" required>
. Minimum and Maximum Length: You can set a minimum and

.
maximum length for input fields using the minlength and maxlength
attributes.
<input type="text" name="password" minlength="6"

maxlength="12">
. Email Validation: For email input fields, you can use the type="email"
attribute, which provides basic email format validation.
<input type="email" name="user_email">
. Pattern Matching (Regular Expressions): You can use the pattern

attribute to specify a regular expression pattern that input data must
match.
<input type="text" name="zip_code" pattern="\d{5}">
. Custom Validation Messages: You can use the pattern attribute

along with the title attribute to provide custom error messages for
specific input fields.
<input type="text" name="zip_code" pattern="\d{5}"

title="Please enter a valid 5-digit zip code">
Create a repository in your own account named myhtml-sandbox.
Practice Set 01
Copy the code from Pancake's repository, html-intermediate-codes. Modify the

signup_form.html. The signup form will allow the user to register an account.
Modify the HTML code so that instead of asking for the full name of the user,
ask for the last name, first name, and middle name. Apply the required attribute
to those fields that need to be required.
Practice Set 02
Add validation to the password textfield using the pattern attribute.
Practice Set 03
Modify employee_reg.html; values from input should be displayed in the

console.
Lesson 2: Tables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>COVID-19 Data</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<h1>COVID-19 Data</h1>
<table>
<thead>
<tr>
<th>Country</th>
<th>Total Cases</th>
<th>Total Deaths</th>
<th>Total Recovered</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>5,824,715</td>
<td>114,308</td>
<td>2,372,347</td>
</tr>
<tr>
<td>India</td>
<td>3,219,755</td>
<td>59,449</td>
<td>2,542,302</td>
</tr>
<tr>
<td>Brazil</td>
<td>2,966,711</td>
<td>99,702</td>
<td>2,068,394</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total:</td>
<td>12,011,181</td>
<td>273,459</td>
<td>6,983,043</td>
</tr>
</tfoot>
</table>
</body>
</html>
In this example:
. The <table> element is used to create the table structure.
. <thead> is used for the table header row, and <tbody> is used for the
table body where data rows are placed.
. Each row within <tbody> contains data for a specific country, with
columns for Country, Total Cases, Total Deaths, and Total Recovered.
. <tfoot> is used to create a footer-like section below the table. You can
use this section to display summary information or totals for the data
in the table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Table with Merged Cells</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
th {
}
</style>
</head>
<body>
<h1>HTML Table with Merged Cells</h1>
<table>
<tr>
<th colspan="2">Header 1</th>
<th rowspan="2">Header 2</th>
<th colspan="2">Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
</tr>
<tr>
<td rowspan="2">Row 3, Cell 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
In this example:
. colspan is used to merge cells horizontally. For example, <th
colspan="2">Header 1</th> merges two header cells in the first row
into one.
. rowspan is used to merge cells vertically. For example, <td
rowspan="2">Row 3, Cell 1</td> merges the cell in the first column of
the third row with the cell in the first column of the fourth row,
spanning two rows.
Practice Set 04
● Define the table structure with rows and columns. Your table should
have at least three columns: Product Name, Price, and Availability.
● Populate the table with data for at least five different products. Include
information such as product names, prices, and whether they are
available.
● Apply table headers (<th>) for the columns.
● Use appropriate HTML table elements such as <table>, <tr> (table
row), <td> (table data cell), and <th> (table header cell) to structure
your table.
● Add CSS styles if you'd like to enhance the appearance of your table.
You can style headers, cells, and borders as desired.
● Add more features to your table, such as alternating row colors and
aligning data.
● Save your HTML file with an appropriate name, like
"product_table.html."
Practice Set 05
● Create an HTML table to display information about different events.

The table should include the following columns: Event Name, Date,
and Location.
● Create a table header row (<tr>) and add headers for each column
using <th> elements.
● Add at least three rows of event data using <tr> elements. Include
event names, dates, and locations for each row.
● Use colspan to merge the cells in the "Event Name" column for a more
visually appealing header. For example, merge two cells to create a
single header cell for "Event Details."
● Save your HTML file with an appropriate name, like "event_table.html."

02 HTML - Intermediate Part I

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

02 HTML - Intermediate Part I

Uploaded by

Copyright:

Available Formats

HTML: Intermediate Part I

After going through this module, you will be able to:

checkboxes, radio buttons, and submit buttons, within forms.

● Lesson 2: Tables: Create structured tables using <table>, <tr>,

<td>, and <th> elements.

Here is the fundamental structure of an HTML form:

<input type="radio" id="input3b"

Explanation of the basic form structure:

It can be a URL or a file name.

GET and POST.

// Access and display form data

// Iterate through form data and log it (for

Action and Method

. Action to the Same Page with POST Method:

<form action="#" method="post">

. Action to a Relative Path with POST Method:

<form action="/submit-form" method="post">

. Action to an Email Address with POST Method (mailto):

<form action="mailto:example@example.com" method="post">

Simple Validation Techniques in HTML 5

<input type="text" name="username" required>

. Minimum and Maximum Length: You can set a minimum and

<input type="text" name="password" minlength="6"

<input type="email" name="user_email">

. Pattern Matching (Regular Expressions): You can use the pattern

<input type="text" name="zip_code" pattern="\d{5}">

. Custom Validation Messages: You can use the pattern attribute

<input type="text" name="zip_code" pattern="\d{5}"

Create a repository in your own account named myhtml-sandbox.

Copy the code from Pancake's repository, html-intermediate-codes. Modify the

Add validation to the password textfield using the pattern attribute.

Modify employee_reg.html; values from input should be displayed in the

● Create an HTML table to display information about different events.

You might also like