Lec.03 HTML Advanced
Lec.03 HTML Advanced
Introduction to Advanced
HTML
Today, we will cover more advanced topics like forms and semantic HTML.
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.
• 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>
3
2.2 Common Input Types
Forms use <input> fields to collect different types of data.
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.
6
3. Forms Validation
✅ Why it’s useful: Ensures better user experience and data accuracy
without JavaScript.
7
datalist – Providing Suggestions for Input Fields
It’s useful for fields like cities, countries, or job titles where users can
type their own input but also get suggestions.
✅ 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).
✅ 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).
9
4. Semantic HTML – Meaningful
Structure
Semantic HTML tags describe the content’s meaning instead of just its
appearance.
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:
12
5. HTML5 Features
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
• SEO-friendly HTML: Using correct headings, alt text for images, and
proper URL structures.
✅ Why it’s useful: Helps websites load correctly on all devices and rank
higher on search engines.
15
Responsive Design with HTML & CSS
✅ 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.
❌ 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
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>?
19