Skip to content

Commit 1db9744

Browse files
augusto-mateaugusto-mate
authored
Add files via upload
Add project files.
0 parents  commit 1db9744

File tree

2 files changed

+189
-0
lines changed

2 files changed

+189
-0
lines changed

‎README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# 🚀 HTML5 Exercise - Enhanced Content and Forms
2+
3+
![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white) ![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
4+
5+
## ✍️ Overview
6+
7+
This project is a solution to a web development exercise focused on enhancing HTML5 skills. The main objective was to create a web page that utilizes advanced content elements and a robust form with native validation, all without the need for JavaScript. The final page demonstrates a well-thought-out structure, usability, and clarity, following web development best practices.
8+
9+
## 🎯 Key Features
10+
11+
- **Semantic Structure**: Effective use of HTML5 tags like `header`, `main`, `section`, `footer`, `table`, `figure`, and `form` for a logical and accessible layout.
12+
- **Content Organization**: Efficient use of ordered (`<ol>`) and unordered (`<ul>`) lists, as well as an accessible table with headers (`<thead>`), for data presentation.
13+
- **Embedded Media**: Demonstration of embedding different types of media, including an image (`<img>`), a video (`<video>`), and audio (`<audio>`), with respective playback controls.
14+
- **Advanced Form**:
15+
- **Native Validation**: Application of attributes like `required`, `minlength`, `pattern`, and `readonly` to ensure the integrity of user-entered data.
16+
- **Usability and Accessibility**: Grouping of related fields with `<fieldset>` and `<legend>`, in addition to using `<label>` to associate descriptions with each input field.
17+
- **Diverse Fields**: Inclusion of various input types (`text`, `email`, `password`, `number`, `date`, `select`) for a comprehensive form.
18+
19+
## 💻 How to Use
20+
21+
1. Clone this repository or download the `enhanced-form.html` file.
22+
2. Open the `enhanced-form.html` file in any modern web browser (Chrome, Firefox, Edge, Safari).
23+
3. Interact with the content and fill out the form to test the native HTML5 validation in action.
24+
25+
## ✒️ Author
26+
27+
Augusto Mate

‎enhanced-form.html‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>HTML5 Exercise - Enhanced Content & Forms</title>
7+
<style>
8+
body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; max-width: 800px; margin: auto; }
9+
header, section, footer { margin-bottom: 30px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }
10+
h1, h2, h3 { color: #333; }
11+
table { border-collapse: collapse; width: 100%; margin: 20px 0; }
12+
th, td { border: 1px solid #ccc; padding: 12px; text-align: left; }
13+
th { background-color: #f4f4f4; }
14+
img, video, audio { max-width: 100%; height: auto; display: block; margin: 10px 0; }
15+
form { background-color: #f9f9f9; padding: 20px; border-radius: 8px; }
16+
fieldset { border: 1px solid #ddd; padding: 20px; margin-bottom: 20px; }
17+
legend { font-weight: bold; padding: 0 10px; color: #555; }
18+
.form-group { margin-bottom: 15px; }
19+
label { display: block; margin-bottom: 8px; font-weight: bold; }
20+
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select {
21+
width: 100%;
22+
padding: 10px;
23+
border: 1px solid #ccc;
24+
border-radius: 4px;
25+
}
26+
input[type="submit"], button {
27+
padding: 12px 20px;
28+
background-color: #007bff;
29+
color: white;
30+
border: none;
31+
border-radius: 4px;
32+
cursor: pointer;
33+
}
34+
input[type="submit"]:hover, button:hover { background-color: #0056b3; }
35+
</style>
36+
</head>
37+
<body>
38+
39+
<header>
40+
<h1>Enhanced HTML5 Content & Mastering Forms</h1>
41+
<p>This page showcases HTML5 elements for content organization and a complete form with native validation.</p>
42+
</header>
43+
44+
<main>
45+
<section>
46+
<h2>Content Organization</h2>
47+
<h3>Project Milestones</h3>
48+
<ol>
49+
<li>Planning and requirements gathering</li>
50+
<li>Core features development</li>
51+
<li>Testing and QA</li>
52+
<li>Deployment and review</li>
53+
</ol>
54+
55+
<h3>Team Members</h3>
56+
<table>
57+
<thead>
58+
<tr>
59+
<th>Name</th>
60+
<th>Role</th>
61+
<th>Department</th>
62+
</tr>
63+
</thead>
64+
<tbody>
65+
<tr>
66+
<td>John Doe</td>
67+
<td>Project Lead</td>
68+
<td>Engineering</td>
69+
</tr>
70+
<tr>
71+
<td>Jane Smith</td>
72+
<td>UX/UI Designer</td>
73+
<td>Design</td>
74+
</tr>
75+
<tr>
76+
<td>Peter Jones</td>
77+
<td>Backend Developer</td>
78+
<td>Engineering</td>
79+
</tr>
80+
</tbody>
81+
</table>
82+
</section>
83+
84+
<section>
85+
<h2>Embedded Media</h2>
86+
<figure>
87+
<img src="https://via.placeholder.com/600x300?text=Project+Team" alt="Project team working together">
88+
<figcaption>Collaborative team environment</figcaption>
89+
</figure>
90+
91+
<h3>Project Overview Video</h3>
92+
<video controls>
93+
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
94+
Your browser does not support the video tag.
95+
</video>
96+
97+
<h3>Audio Narration</h3>
98+
<audio controls>
99+
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
100+
Your browser does not support the audio element.
101+
</audio>
102+
</section>
103+
104+
<section>
105+
<h2>User Registration Form</h2>
106+
<form action="#" method="post" autocomplete="on">
107+
<fieldset>
108+
<legend>Personal Information</legend>
109+
<div class="form-group">
110+
<label for="full-name">Full Name:</label>
111+
<input type="text" id="full-name" name="full-name" placeholder="e.g., John Doe" required minlength="5" autocomplete="name">
112+
</div>
113+
<div class="form-group">
114+
<label for="email">Email:</label>
115+
<input type="email" id="email" name="email" placeholder="e.g., [email protected]" required autocomplete="email">
116+
</div>
117+
<div class="form-group">
118+
<label for="password">Password:</label>
119+
<input type="password" id="password" name="password" required minlength="8" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{8,}$" title="Must contain at least one uppercase, one lowercase, and one number" autocomplete="new-password">
120+
</div>
121+
</fieldset>
122+
123+
<fieldset>
124+
<legend>Additional Details</legend>
125+
<div class="form-group">
126+
<label for="age">Age:</label>
127+
<input type="number" id="age" name="age" min="18" max="99" required>
128+
</div>
129+
<div class="form-group">
130+
<label for="department">Department:</label>
131+
<select id="department" name="department" required>
132+
<option value="" disabled selected>-- Select a department --</option>
133+
<option value="engineering">Engineering</option>
134+
<option value="marketing">Marketing</option>
135+
<option value="sales">Sales</option>
136+
</select>
137+
</div>
138+
<div class="form-group">
139+
<label for="start-date">Start Date (readonly):</label>
140+
<input type="date" id="start-date" name="start-date" value="2024-08-12" readonly>
141+
</div>
142+
</fieldset>
143+
144+
<div class="form-group">
145+
<input type="checkbox" id="terms" name="terms" required>
146+
<label for="terms">I agree to the <a href="#">terms and conditions</a>.</label>
147+
</div>
148+
149+
<div class="form-group">
150+
<button type="submit">Submit Registration</button>
151+
<button type="reset">Clear Form</button>
152+
</div>
153+
</form>
154+
</section>
155+
</main>
156+
157+
<footer>
158+
<p>&copy; 2025 Augusto Mate. All rights reserved.</p>
159+
</footer>
160+
161+
</body>
162+
</html>

0 commit comments

Comments
 (0)