Part III — Forms, metadata, accessibility, and SEO
20. Forms and form controls
A form collects input and submits data for processing: names, passwords, email, phone numbers, selections, files, and longer text. Forms are a fundamental component of interactive web applications.
<form action="server-url" method="post" target="_self">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Submit">
</form>
This consolidates the source patterns. server-url is a placeholder, not a functioning backend.
20.1 Form-level attributes
| Attribute | Meaning / source examples |
|---|---|
action |
Address of the processing endpoint; a.html, /action_page.php, /submit-form are source examples |
method |
Submission method; GET or POST |
target |
Context for the result: _self, _blank, _parent, etc. |
autocomplete |
Source project uses on |
The official HTML Standard distinguishes GET submission (which appends form data to the URL query string) from POST submission (which sends form data inside the HTTP message body). For file uploads, the form requires method="POST" and enctype="multipart/form-data".
20.2 Complete form-element inventory
| Element | Role |
|---|---|
<form> |
Form container |
<label> |
Name/description for a control |
<input> |
Type-dependent input |
<button> |
Button; role determined by type/context |
<select> |
Selection list |
<option> |
Choice |
<optgroup> |
Related options grouped under a label |
<textarea> |
Multiline input |
<fieldset> |
Groups related controls, normally with a border |
<legend> |
Caption of fieldset |
<datalist> |
Suggested values for an input |
<output> |
Result display |
Match a label's for to the control's id, as the source's username, password and project examples illustrate.
20.3 Every input type present in the supplied teaching material
| Type | Purpose | Source example / detail |
|---|---|---|
text |
One-line text | First/last name, username |
password |
Masked input | User ID/password, minimum 8 characters in project |
email |
Email-shaped input | Required email in project |
number |
Numeric input | Age 10–100; min/max/step named in theory |
checkbox |
Independent selections | C++, C#, JAVA; HTML/CSS/JavaScript skills |
radio |
One selection within a same-name group | Course choices; gender |
submit |
Submit form | Submit / REGISTER |
reset |
Restore initial values | Reset / CLEAR / Reset Form |
button |
General button, typically scripted | OK |
image |
Image-based submit control | src="test1.png" |
file |
File picker | Resume; .pdf,.doc,.docx in project |
date |
Year/month/day date | DOB/birthday |
time |
Time input | Appointment 09:00–18:00 |
tel |
Telephone number input control | Validates and triggers numeric/phone virtual keyboards on mobile devices |
range |
Slider | value="50"; project min 0, max 10, value 5 |
hidden |
Non-visible form value | hiddenField=nyah; course_id=HTML101 |
color |
Color selection | Favorite color |
url |
Web-address input | Personal website, placeholder https://example.com |
search |
Search text | Placeholder Search something... |
Standard HTML5 input types provide built-in client-side validation constraints, specialized mobile virtual keyboards, and consistent browser-native pickers.
20.4 Attributes and validation
| Attribute | Purpose |
|---|---|
type |
Kind of input control |
name |
Submitted field name |
id |
Document identifier, used by labels and other references |
value |
Initial/current value, depending on control |
size |
Visible text-control width in characters in the source explanation |
placeholder |
Hint text |
required |
Requires an appropriate nonempty/selected value |
minlength, maxlength |
Text-length limits |
min, max |
Lower/upper bounds for applicable types |
step |
Numeric/date/time stepping where applicable |
pattern |
Format constraint for applicable textual types |
readonly |
Prevent ordinary editing of applicable controls |
disabled |
Disable control |
checked |
Initial radio/checkbox selection |
selected |
Initial option selection |
rows, cols |
Textarea dimensions |
accept |
File-selection hint; source .pdf,.doc,.docx |
list |
Associates input with datalist in the project requirement |
multiple |
Multiple selections where supported; needed for an ordinary select to choose more than one |
Validation aims to prevent incomplete/invalid entries, improve accuracy, and improve user experience. Modern architecture distinguishes client-side validation (HTML5 attributes and JavaScript) and server-side validation (backend verification).
Technical clarification from the already linked standard: a date control's display is localized; placeholder="dd-mm-yyyy" does not set its date format. Required checkboxes are checked individually; putting required on every skills checkbox would require every one. A same-name radio group behaves differently. Only eligible form entries are submitted: “all input fields are sent” is overbroad, especially for disabled, unnamed, or unchecked controls. Source-linked HTML Standard: input, form entry construction
20.5 Source examples explained
Single-line input: Configured using <input type="text"> with name, value, size, and maxlength attributes to capture plain alphanumeric text.
Password input: Configured using <input type="password"> to visually mask sensitive credential characters on screen.
Textarea: Configured using <textarea rows="5" cols="50" name="description"> to provide a multi-line scrolling text area for extended user input. Text between textarea tags is its initial text in that example.
Checkboxes: Configured using <input type="checkbox"> to allow users to select zero, one, or multiple independent options from a set.
Radio buttons: Configured using <input type="radio"> with a shared name attribute to ensure mutually exclusive single-option selection.
Select dropdown: Configured using <select name="dropdown"> with nested <option> tags to create a compact drop-down selection list.
File upload: Configured using <input type="file" name="fileupload"> to allow users to select local filesystem files for upload.
Button controls: Configured using <input type="submit">, <input type="reset">, <input type="button">, or native <button> elements for custom user interactions.
Date picker: Configured using <input type="date"> with optional min and max limits to display an interactive popup calendar control.
Time picker: Configured using <input type="time"> with min and max constraints to restrict input to valid operational hours. Its introductory date text is a copy/paste error.
Telephone input: Configured using <input type="tel"> to trigger numeric telephone keypads on mobile and tablet touch devices.
Readonly and Required: The required attribute mandates user input prior to submission; the readonly attribute prevents editing while submitting the existing value.
Hidden inputs: Configured using <input type="hidden"> to transmit session tokens, database keys, or identifiers without displaying them in the visual UI.
Fieldset & Legend: Groups related form fields within a bordered container captioned by a <legend> element to improve usability and accessibility.
20.6 Complete Student Course Application Form
The following complete working code listing implements the course registration application form:
- Pink body, centered red Application Form title in legacy font size 7, horizontal rule size 5, blue, width 400.
- Form
action="a.html" method="GET". - Centered layout table with cellspacing/cellpadding 5.
- First name:
fname, placeholder name, size 30, maximum 6 characters. - Last name:
lname, initially empty, size 30. - Password:
pwd. - Comments: textarea 8×20,
comm, placeholder enter comments. - Languages: Hindi checked initially, English, Punjabi, all named
cb1with no distinguishing values in the source. - Gender: Male, Female, both named
r1and also lacking distinguishing values. - Fruit dropdown
s1:----select----, Orange, Mango, Pineapple, Strawberry. - Resume file picker, missing a
namein this example. - REGISTER, CLEAR, OK buttons; final cell spans two columns.
This is a teaching form. Its endpoint, GET password submission, missing choice values, unnamed resume field and legacy presentation need correction before real deployment.
21. Metadata, UTF-8 and favicons
Metadata is information about the document rather than visible page content. The head stores character set, description, keywords, author, viewport, and other settings used by browsers and services.
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
The viewport meta tag configures the visible page area across devices (e.g. width=device-width, initial-scale=1.0). UTF-8 stands for Unicode Transformation Format – 8-bit, a variable-width character encoding capable of encoding all 1,112,064 valid character code points in Unicode using one to four one-byte code units.
A favicon (favorite icon) identifies a page in the browser tab and bookmark bar. It is typically stored as an .ico or .png file at the root or assets directory and referenced using <link rel="icon" type="image/x-icon" href="/favicon.ico"> or <link rel="icon" type="image/png" href="/favicon.png">.
The project also uses meta name="robots" content="index, follow", keywords for HTML tutorials/forms/tables/semantic HTML, and author="Your Name". Its description tag is unfinished in the supplied code; preserve that fact rather than inventing missing original content.
22. Accessibility and SEO
SEO means Search Engine Optimization: improving how search engines discover, understand and present relevant website content. Named engines: Google, Bing, Yahoo, DuckDuckGo.
Search engine architecture operates in four key phases: crawling → indexing → ranking → search results. A crawler (spider or bot) discovers pages across the web; the index catalogs and analyzes terms; ranking algorithms evaluate page relevance and authority; and search results deliver the highest-ranking pages to user queries.
22.1 Why SEO matters
Core SEO benefits include greater search visibility, qualified organic visitors, improved accessibility, clearer content interpretation, and stronger competitive ranking over time.
22.2 Source best practices and mistakes
| Practice taught | Corresponding mistake |
|---|---|
| Descriptive title | Missing/generic title |
| Meta description | Missing description |
| Semantic structure | Poor/random structure |
| One principal h1 in the lecture's recommended pattern | Multiple h1 elements without purpose |
| Ordered heading hierarchy | Random headings |
| Appropriate alt text | Missing alt |
| Meaningful hyperlinks | Generic “Click Here” |
| Working links | Broken links |
| Mobile-friendly layout | Missing responsive considerations |
| Original, useful content | Duplicate content |
| Fast loading | Slow loading |
Elements named for SEO: title, meta, headings, semantic HTML, image alt, hyperlinks, URL structure, lists and appropriately used tables. The one-h1 recommendation is a teaching convention, not a claim that HTML syntax permits only one h1 in every document.
Modern SEO Best Practice: While older algorithms indexed <meta name="keywords">, modern search engines (e.g. Google, Bing) ignore keyword meta tags and instead prioritize high-quality relevant content, fast mobile page performance, descriptive <title> and <meta name="description"> tags, and accessible semantic HTML5 layout.
22.3 Before/after Java-page example
Before screenshot:
<!DOCTYPE html>
<html>
<head><title>Page</title></head>
<body>
<h1>Java</h1>
<p>Learn Java programming.</p>
</body>
</html>
The source lists generic title, no description, no keywords, no viewport, and poor discoverability. The after screenshot visibly contains this fragment (it begins after any title/opening head):
<meta charset="UTF-8">
<meta name="description" content="Free Java programming tutorials for beginners.">
<meta name="keywords" content="Java, Programming, HTML, Coding">
<meta name="author" content="Money">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Learn Java Programming</h1>
<p>Start learning Java from basic to advanced concepts.</p>
</body>
</html>
SEO Best Practice: Always specify an unambiguous, descriptive
<title>tag matching the<h1>topic (e.g.,<title>Java Programming Tutorial for Beginners \| StudyDump</title>) so search crawlers and browser tabs clearly identify page context.
22.4 All supplied SEO exercises
- Two college sites: A has proper headings, description, semantic HTML, alt, responsive layout; B has random headings, no metadata/alt, poor structure. A is easier to understand in the exercise.
- Three HTML teaching sites: A has a good title, semantics, fast loading, mobile friendliness and alt; B lacks title/headings and has poor navigation/missing alt; C has duplicate content, slow loading, broken links. Source answer: A is likely to rank highest, not a guaranteed real-world ranking.
- Improve title Home, image
lab.jpgwithout alt, and generic link text tocourse.html. Source answer:
<title>Computer Science Courses | ABC College</title>
<img src="lab.jpg" alt="Students attending a Computer Science laboratory session">
<a href="course.html">View Computer Science Courses</a>
Essential accessibility practices include declaring document lang, utilizing semantic structural elements, providing explicit form labels, furnishing descriptive image alt attributes, implementing skip-to-main navigation links, and ensuring clear form validation feedback.
23. Complete Responsive HTML5 Document Template (W3Schools & CHO Reference Standard)
Syllabus Lecture 10 Target: Best Practices for HTML5 Documents, Creating a Complete Responsive HTML5 Web Page.
Below is a complete, production-ready, fully accessible, and standards-compliant HTML5 web page synthesizing every concept taught across Lectures 4 through 10 (Document structure, metadata, viewport, semantic layout, navigation, tables, multimedia, accessible forms, and SEO optimization):
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character Encoding & Rendering -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Responsive Viewport Meta Tag (Mandatory for Mobile-First) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary SEO Meta Tags -->
<title>Department of Computer Science & Engineering | Academic Portal</title>
<meta name="description" content="Official academic portal providing lecture notes, syllabus blueprints, laboratory manuals, and student resources for B.E. CSE students.">
<meta name="keywords" content="Computer Science, Web Technologies, HTML5, CSE, Academic Notes">
<meta name="author" content="Department of CSE">
<meta name="robots" content="index, follow">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Internal Base Stylesheet for Responsive Foundation -->
<style>
:root {
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--primary-color: #0f172a;
--accent-color: #2563eb;
--bg-light: #f8fafc;
--border-color: #e2e8f0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-family);
line-height: 1.6;
color: #334155;
background-color: var(--bg-light);
}
.skip-to-content {
position: absolute;
top: -40px;
left: 10px;
background: var(--accent-color);
color: #fff;
padding: 8px 16px;
text-decoration: none;
z-index: 1000;
transition: top 0.2s;
}
.skip-to-content:focus {
top: 10px;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 1.5rem;
}
header, nav, main, section, article, aside, footer {
display: block;
}
header {
background: var(--primary-color);
color: #fff;
padding: 1.5rem 0;
}
nav ul {
display: flex;
gap: 1.5rem;
list-style: none;
margin-top: 1rem;
}
nav a {
color: #94a3b8;
text-decoration: none;
font-weight: 500;
}
nav a:hover, nav a:focus {
color: #fff;
text-decoration: underline;
}
.content-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
margin-top: 2rem;
}
@media (max-width: 768px) {
.content-grid {
grid-template-columns: 1fr;
}
nav ul {
flex-direction: column;
gap: 0.5rem;
}
}
table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
th, td {
border: 1px solid var(--border-color);
padding: 0.75rem;
text-align: left;
}
th {
background: #f1f5f9;
font-weight: 600;
}
fieldset {
border: 1px solid var(--border-color);
padding: 1.25rem;
border-radius: 6px;
margin-top: 1.5rem;
background: #fff;
}
legend {
font-weight: 600;
padding: 0 0.5rem;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.25rem;
font-weight: 500;
}
input, select, textarea {
width: 100%;
padding: 0.6rem;
border: 1px solid var(--border-color);
border-radius: 4px;
font-family: inherit;
}
button[type="submit"] {
background: var(--accent-color);
color: #fff;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
footer {
background: #0f172a;
color: #94a3b8;
padding: 2rem 0;
margin-top: 3rem;
text-align: center;
font-size: 0.875rem;
}
</style>
</head>
<body>
<!-- Accessibility Skip Navigation -->
<a href="#main-content" class="skip-to-content">Skip to main content</a>
<!-- Global Header -->
<header role="banner">
<div class="container">
<h1>School of Computer Science & Engineering</h1>
<p>Course Code: 26CSE0106 **•** Internet & Web Technologies</p>
<!-- Primary Navigation -->
<nav aria-label="Main Navigation">
<ul>
<li><a href="#about">About Course</a></li>
<li><a href="#modules">Syllabus Modules</a></li>
<li><a href="#feedback">Student Feedback</a></li>
</ul>
</nav>
</div>
</header>
<!-- Main Content Area -->
<main id="main-content" class="container" role="main">
<div class="content-grid">
<!-- Primary Article / Section -->
<article>
<section id="about">
<h2>1. Course Overview & Learning Objectives</h2>
<p>
Welcome to the academic repository for <strong>Internet & Web Technologies</strong>. This course equips learners with fundamental capabilities for designing, structuring, styling, and validating modern standards-compliant web applications.
</p>
<figure style="margin: 1.5rem 0;">
<img
src="assets/web-architecture-diagram.png"
alt="Three-tier client-server architecture showing browser client, application server, and database server"
style="max-width: 100%; height: auto; border-radius: 6px;"
loading="lazy"
>
<figcaption style="font-size: 0.875rem; color: #64748b; margin-top: 0.5rem;">
Figure 1.1: Standard Three-Tier Web Application Architecture.
</figcaption>
</figure>
</section>
<!-- Course Units Structured Table -->
<section id="modules">
<h2>2. Syllabus Units & Evaluation Weightage</h2>
<table aria-describedby="modules">
<caption>Table 2.1: Continuous Assessment (CAT) & Semester Course Modules</caption>
<colgroup>
<col style="width: 20%;">
<col style="width: 60%;">
<col style="width: 20%;">
</colgroup>
<thead>
<tr>
<th scope="col">Unit No.</th>
<th scope="col">Module Name</th>
<th scope="col">Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Unit 1</td>
<td>Introduction to Web Technologies & Internet Architecture</td>
<td>CAT 1 (25%)</td>
</tr>
<tr>
<td>Unit 2</td>
<td>HTML5 Document Architecture & Semantic Forms</td>
<td>CAT 1 (25%)</td>
</tr>
<tr>
<td>Unit 3</td>
<td>UI & UX Design Fundamentals & Usability Principles</td>
<td>CAT 2 (25%)</td>
</tr>
<tr>
<td>Unit 4</td>
<td>CSS3 Styling, Flexbox & Responsive Web Design</td>
<td>CAT 2 / CAT 3</td>
</tr>
<tr>
<td>Unit 5</td>
<td>Bootstrap Framework & Mobile-First Layouts</td>
<td>CAT 3 (25%)</td>
</tr>
<tr>
<td>Unit 6</td>
<td>Website Testing, Performance Optimization & Deployment</td>
<td>CAT 4 / CAT 5</td>
</tr>
</tbody>
</table>
</section>
<!-- Accessible Interactive Form -->
<section id="feedback">
<h2>3. Course Inquiry & Feedback Form</h2>
<form action="/submit-feedback" method="POST" autocomplete="on">
<fieldset>
<legend>Student Contact Information</legend>
<div class="form-group">
<label for="full-name">Full Name <span aria-hidden="true">*</span></label>
<input type="text" id="full-name" name="student_name" placeholder="e.g. Sehjal Saxena" required minlength="3">
</div>
<div class="form-group">
<label for="student-email">University Email <span aria-hidden="true">*</span></label>
<input type="email" id="student-email" name="student_email" placeholder="student@university.edu" required>
</div>
<div class="form-group">
<label for="module-select">Preferred Topic for Revision:</label>
<select id="module-select" name="revision_topic">
<option value="" disabled selected>-- Select a Unit --</option>
<option value="unit1">Unit 1: Internet Foundations & HTTP</option>
<option value="unit2">Unit 2: HTML5 Semantics & Forms</option>
<option value="unit3">Unit 3: UI/UX Principles & Design</option>
<option value="unit4">Unit 4: CSS3, Flexbox & Animations</option>
<option value="unit5">Unit 5: Bootstrap Framework</option>
<option value="unit6">Unit 6: Testing & Deployment</option>
</select>
</div>
<div class="form-group">
<label for="feedback-comments">Inquiry / Doubts:</label>
<textarea id="feedback-comments" name="comments" rows="4" placeholder="Describe the concept you need clarified..."></textarea>
</div>
<button type="submit">Submit Feedback</button>
</fieldset>
</form>
</section>
</article>
<!-- Complementary Aside Information -->
<aside role="complementary" aria-label="Course Resources">
<div style="background: #fff; border: 1px solid var(--border-color); border-radius: 6px; padding: 1.25rem;">
<h3>Essential Resources</h3>
<ul style="margin: 1rem 0; padding-left: 1.25rem;">
<li><a href="resources/be-cse/semester-1/iwt/IWT%20CHO.pdf" target="_blank" rel="noopener">Official Course Handout (PDF)</a></li>
<li><a href="https://www.w3schools.com/html/" target="_blank" rel="noopener">W3Schools HTML5 Tutorial</a></li>
<li><a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN Web Docs</a></li>
</ul>
<h3 style="margin-top: 1.5rem;">Lecture Audio Preview</h3>
<audio controls style="width: 100%; margin-top: 0.5rem;">
<source src="assets/sample-lecture.mp3" type="audio/mpeg">
Your browser does not support audio elements.
</audio>
</div>
</aside>
</div>
</main>
<!-- Global Footer -->
<footer role="contentinfo">
<div class="container">
<p>© 2026 Department of Computer Science & Engineering. All rights reserved.</p>
<p>Maintained for educational reference **•** Built with semantic, responsive HTML5 & CSS3.</p>
</div>
</footer>
</body>
</html>
23.1 HTML5 Document Quality & Accessibility Checklist
- Valid HTML5 Doctype: Declared as
<!DOCTYPE html>to force standards-mode rendering across all browsers. - Language Specification: Root
<html lang="en">declared to enable screen reader pronunciation and translation engines. - Viewport Meta Tag:
width=device-width, initial-scale=1.0to ensure mobile devices do not default to desktop scaling. - Semantic Hierarchy: Single
<h1>with logical nesting (<h2>,<h3>), utilizing<header>,<nav>,<main>,<article>,<section>,<aside>, and<footer>. - Accessibility (a11y): Form
<label for="">linked to inputid="",aria-labelattributes on navigation, and skip-to-content links. - Image Accessibility & Performance: Meaningful
altdescriptions and nativeloading="lazy"on visual media. - Table Accessibility: Standard
<caption>,<colgroup>, and<th scope="col">column header relationships.