Week 2 Day 1: HTML forms and input validation

2025-12-23 16:03:56 +05:30
parent df6447c8eb
commit d38fa637b6
4 changed files with 120 additions and 0 deletions
--- a/Week-2/Day-1/Readme.md
+++ b/Week-2/Day-1/Readme.md
@@ -0,0 +1,32 @@
+# Week 2 – Day 1 Advanced HTML – Forms
+
+### Date
+18 December 2025
+
+### Objective
+To understand and implement HTML forms for collecting user input and apply basic validation techniques.
+
+### Topics Covered
+- HTML form structure
+- Input types and labels
+- Form attributes and validation
+- Accessibility best practices
+
+### Activities Performed
+- Studied HTML form elements and attributes.
+- Created login and registration forms.
+- Implemented basic client-side validation.
+- Tested form behavior in browser.
+
+### Tools & Technologies Used
+- HTML5
+- Visual Studio Code
+- Web Browser
+
+### Learning Outcomes
+- Understood how forms work in HTML.
+- Learned to validate user input.
+- Improved ability to create structured forms.
+
+### Status
+Completed
--- a/Week-2/Day-1/advanced-html-css.md
+++ b/Week-2/Day-1/advanced-html-css.md
@@ -0,0 +1,32 @@
+# Week 2 Day 1 – Advanced HTML & CSS
+
+## HTML Forms
+HTML forms are used to collect user input and send data to a server for processing. Forms are a crucial part of web applications such as login pages, registration forms, feedback forms, and surveys.
+
+### <form> Tag
+Defines the start and end of a form.
+Important attributes:
+action: URL where form data is sent.
+method: HTTP method (GET or POST).
+
+### Common Form Elements
+<input>
+Types: text, email, password, number, date, radio, checkbox
+
+<label>
+Improves accessibility and user experience.
+
+<textarea>
+Used for multi-line input.
+
+<select> and <option>
+Dropdown selection.
+
+<button>
+Submits or resets the form.
+
+### Form Validation
+required ensures mandatory fields.
+type="email" validates email format.
+maxlength limits input length.
+placeholder gives hints to users.
--- a/Week-2/Day-1/index.html
+++ b/Week-2/Day-1/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>HTML Forms</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <h2>Registration Form</h2>
+
+  <form>
+    <label>Full Name:</label>
+    <input type="text" required>
+
+    <label>Email:</label>
+    <input type="email" required>
+
+    <label>Password:</label>
+    <input type="password" required>
+
+    <label>Gender:</label>
+    <input type="radio" name="gender"> Male
+    <input type="radio" name="gender"> Female
+
+    <label>Skills:</label>
+    <input type="checkbox"> HTML
+    <input type="checkbox"> CSS
+
+    <label>About You:</label>
+    <textarea rows="4"></textarea>
+
+    <button type="submit">Register</button>
+  </form>
+
+</body>
+</html>
--- a/Week-2/Day-1/style.css
+++ b/Week-2/Day-1/style.css
@@ -0,0 +1,19 @@
+body {
+  font-family: Arial, sans-serif;
+  padding: 20px;
+}
+
+form {
+  width: 300px;
+}
+
+label {
+  display: block;
+  margin-top: 10px;
+}
+
+input, textarea, button {
+  width: 100%;
+  margin-top: 5px;
+  padding: 6px;
+}