0% found this document useful (0 votes)
17 views19 pages

Lec.03 HTML Advanced

The document provides an introduction to advanced HTML topics, focusing on forms and semantic HTML to enhance web page structure, interactivity, and accessibility. It covers form creation, input types, validation techniques, and the importance of semantic tags for better SEO and accessibility. Additionally, it highlights HTML5 features, responsive design principles, and includes a practical activity for building a complete registration form.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
17 views19 pages

Lec.03 HTML Advanced

The document provides an introduction to advanced HTML topics, focusing on forms and semantic HTML to enhance web page structure, interactivity, and accessibility. It covers form creation, input types, validation techniques, and the importance of semantic tags for better SEO and accessibility. Additionally, it highlights HTML5 features, responsive design principles, and includes a practical activity for building a complete registration form.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

1.

Introduction to Advanced
HTML

In the last lecture, we learned the basics of HTML: headings, paragraphs,


links, images, lists and tables.

Today, we will cover more advanced topics like forms and semantic HTML.

These topics will help us create better-structured, interactive, and


accessible web pages.

1
2. HTML Forms – Collecting
User Input

Forms allow users to enter data on a webpage. This data can be sent to a
server, for example, in a contact form or login form.

2.1 Basic Form Structure


A form in HTML is created using the <form> tag.
It has two important attributes:

​ •​ action: Defines where the form data will be sent.

​ •​ method: Defines how the data will be sent (e.g., GET or POST).

2
🔹 Example: A Simple Form
<form action="submit-form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>

•​ The <label> tag describes the input field.

•​ The required attribute ensures the user must enter data.

•​ The <button> submits the form.

3
2.2 Common Input Types
Forms use <input> fields to collect different types of data.

Input Type​ ​ Purpose

text Simple one-line text input.

password Hidden password input.

email Requires an email format.

number Allows only numbers.

checkbox Allows multiple selections.

radio Allows only one selection from a group.

submit Button to send the form.

4
🔹 Example: Checkbox and Radio Button
<form>
<p>Select your favorite fruit:</p>
<input type="checkbox" id="apple" name="fruit" value="apple">
<label for="apple">Apple</label>
<input type="checkbox" id="banana" name="fruit" value="banana">
<label for="banana">Banana</label>
<p>Select your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<button type="submit">Submit</button>
</form>

5
2.3 Dropdown Menus (<select>)
A dropdown menu allows users to choose one option.

🔹 Example: Selecting a Country


<label for="country">Choose a country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="canada">Canada</option>
</select>

6
3. Forms Validation

​ •​ Form validation: Using HTML attributes like required, pattern, and


maxlength.
​ •​ Custom error messages with title and placeholder.
​ •​ HTML5 form features like datalist, autocomplete, and novalidate.

🔹 Example: Form with Validation


<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone (10 digits):</label>
<input type="text" id="phone" name="phone" pattern="\d{10}" title="Enter
a 10-digit phone number" required>
<button type="submit">Submit</button>
</form>

✅ Why it’s useful: Ensures better user experience and data accuracy
without JavaScript.

7
datalist – Providing Suggestions for Input Fields

The <datalist> element allows users to choose from a predefined list of


options while still being able to type freely.

It’s useful for fields like cities, countries, or job titles where users can
type their own input but also get suggestions.

🔹 Example: datalist for Country Selection


<label for="country">Choose a country:</label>
<input list="countries" id="country" name="country">
<datalist id="countries">
<option value="USA">
<option value="Canada">
<option value="UK">
<option value="Australia">
</datalist>

✅ How it works:
​ •​ The <input> field is connected to the <datalist> using list="countries".

​ •​ Users can type freely or choose from the list of predefined options.

8
novalidate – Disabling Browser Validation
By default, browsers check form inputs before submitting (e.g., making sure
emails are valid).

The novalidate attribute turns off this browser validation, so validation can
be handled manually (e.g., with JavaScript).

🔹 Example: Using novalidate to Disable Browser Validation


<form action="submit.php" method="post" novalidate>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>

✅ How it works:
• Without novalidate, the browser stops submission if the email is incorrect.
• With novalidate, the form submits even if the input is invalid (so you can
use custom validation with JavaScript).

🔹 When to use it?


​ •​ ✅ If you want to handle validation yourself with JavaScript.
​ •​ ✅ If the form is used in a testing environment and you don’t
want validation errors.

9
4. Semantic HTML – Meaningful
Structure

Semantic HTML tags describe the content’s meaning instead of just its
appearance.

4.1 Why Use Semantic HTML?


✅ Improves accessibility (easier for screen readers).
✅ Better SEO (search engines understand the content).
✅ Easier to read and maintain code.

10
4.2 Common Semantic Tags

Tag​ ​ ​ Meaning
<header>​ ​ Defines the page’s header.
<nav>​ ​ Contains navigation links.
<section>​ ​ Defines a section of the page.
<article>​ ​ Represents self-contained content (e.g., blog post).
<aside>​ ​ Sidebar content.
<footer>​ ​ Footer section of the page.

11
🔹 Example: A Webpage with Semantic Tags
<header>
<h1>Welcome to My Blog</h1>
</header>
<nav>
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="contact.html">Contact</a>
</nav>
<section>
<article>
<h2>My First Blog Post</h2>
<p>This is a short blog post about web development.</p>
</article>
</section>
<footer>
<p>© 2025 My Blog. All rights reserved.</p>
</footer>

Key Takeaways:

​ •​ <header> contains the main heading.

​ •​ <nav> holds navigation links.

​ •​ <section> groups content into a section.

​ •​ <article> represents an independent piece of content.

​ •​ <footer> contains page information.

12
5. HTML5 Features

5.1 New Input Types


HTML5 introduced new input types to improve user experience.

Input Type​​ ​ Purpose


date​ ​ ​ ​ Selects a date.
color​ ​ ​ ​ Selects a color.
range​​ ​ ​ Creates a slider.
search​ ​ ​ Search input field.

🔹 Example: New Input Types


<label for="birthday">Choose your birthday:</label>
<input type="date" id="birthday" name="birthday">
<label for="favcolor">Choose a color:</label>
<input type="color" id="favcolor" name="favcolor">

13
<label for="birthday">Choose your birthday:</label>
<input type="date" id="birthday" name="birthday">

The name attribute assigns a name to the input field, so when the form is
submitted, the browser sends the data to the server.

The id attribute uniquely identifies the input field and helps associate the
<label> with it.

Attribute​ ​ ​ Purpose
name="birthday"​​ Used for form submission (sends data to server).
id="birthday"​ ​ Used for labels (for="id") and JavaScript
interactions.

14
Meta Tags and SEO Basics

​ •​ Meta tags for page descriptions, character encoding, and


responsiveness.

​ •​ SEO-friendly HTML: Using correct headings, alt text for images, and
proper URL structures.

🔹 Example: Meta Tags


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a personal blog about
technology and coding.">
<title>My Blog</title>
</head>

✅ Why it’s useful: Helps websites load correctly on all devices and rank
higher on search engines.

15
Responsive Design with HTML & CSS

​ •​ The importance of mobile-friendly websites.

​ •​ Using the <meta viewport> tag.

​ •​ Basics of media queries for responsiveness.

🔹 Example: Mobile-Friendly Page


<meta name="viewport" content="width=device-width, initial-scale=1.0">

✅ Why it’s useful: Helps websites look good on phones, tablets, and
desktops.

16
Why is viewport important?
By default, web pages are not responsive on mobile devices.
The <meta viewport> tag tells the browser how to scale the page on
different screen sizes.

✅ What does this do?


•​ width=device-width → Sets the page width to match the device
screen.
•​ initial-scale=1.0 → Ensures no zooming when the page loads.

🔹 Without meta viewport (Bad Example)


If we don’t use <meta viewport>, a webpage may look too zoomed out on
mobile:

<meta name="viewport" content="width=1024">

❌ This forces a fixed width, making the page small and unreadable on
mobile.

17
More viewport Settings

Setting​ ​ ​ Effect
width=device-width​ Matches the width of the screen.
initial-scale=1.0​ ​ Sets the default zoom level.
maximum-scale=1.5​ Allows users to zoom up to 1.5x.
user-scalable=no​​ Disables pinch-to-zoom (not recommended for
accessibility).

18
6. Practical Activity

Build a Complete Form (Using Forms & Input Types)

Task:
Create a registration form that includes:
✅ Name (text input)
✅ Email (email input)
✅ Password (password input)
✅ Gender (radio buttons)
✅ Favorite Color (color input)
✅ Birthdate (date input)
✅ Select Country (dropdown list with <datalist>)
✅ Submit button
✅ Check your work:
​ •​ Does every input field have a <label>?

​ •​ Are all required fields using the required attribute?

​ •​ Does the <datalist> allow the user to type or choose from


suggestions?

19

You might also like