This HTML
code creates a responsive registration form with the following features:
HTML Structure
1. DOCTYPE and Metadata:
o
<!DOCTYPE html> specifies that the document is HTML5.
o
<html lang="en"> sets the language of the document to English.
o
<meta
charset="UTF-8"> ensures proper encoding for
special characters.
o
<meta
name="viewport" content="width=device-width,
initial-scale=1.0"> makes the page responsive for
different screen sizes.
2. Title and External Resources:
o
<title>Registration
Form</title> sets the title of the page.
o
Includes:
§ Bootstrap CSS for styling: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css.
§ jQuery library: https://code.jquery.com/jquery-3.6.0.min.js.
3. Custom CSS:
o
Adds specific styles for:
§ Body background color and font.
§ A container (.form-container) with padding, border-radius, and box-shadow for the form.
§ Buttons and form controls for consistency and visual appeal.
4. Form Structure:
o
A <form> tag wraps the registration inputs with ID registrationForm.
o
Form Inputs:
§ Name: <input
type="text">
§ Email: <input
type="email">
§ Password: <input
type="password">
§ Date of Birth: <input
type="date">
§ Gender: Radio buttons (<input
type="radio">) for Male, Female, and Other.
§ Course, Semester, Section: Dropdowns (<select>), dynamically populated via AJAX.
§ Skills: Checkboxes (<input
type="checkbox">) for HTML, CSS, and JavaScript.
§ Image Upload: <input
type="file">.
o
A Submit button: <button type="submit">Register</button>.
CSS Explanation
- .form-container:
- Creates a visually appealing container for
the form, centered with a shadow effect.
- .form-control:
- Adds uniformity to the form fields with a
border-radius.
- .btn-primary:
- Ensures a full-width, visually consistent
submit button.
JavaScript/jQuery Functionality
1. Dynamic Dropdown Population:
o
Courses, Semesters, and Sections
are fetched dynamically via AJAX requests:
§ Fetch Courses: Populates the course dropdown
from fetch_courses.php.
§ Fetch Semesters: When a course is selected, fetch_semesters.php is called with the course ID to
load relevant semesters.
§ Fetch Sections: When a semester is selected, fetch_sections.php is called with the semester ID
to load relevant sections.
o
If a dropdown is empty (no
selection), its dependent dropdowns reset.
2. Form Submission:
o
Prevents the default submission
behavior with e.preventDefault().
o
Submits form data using AJAX to save_registration.php:
§ Uses FormData to handle file uploads (enctype="multipart/form-data").
§ Handles responses:
§ On success: Displays a message and resets the form.
§ On error: Alerts an error message.
Features Summary
- Responsive Design:
- Adapts seamlessly to different screen sizes
due to Bootstrap and the meta viewport.
- Dynamic Data Loading:
- Dropdowns dynamically populate using jQuery
AJAX calls to server-side scripts.
- Validation:
- Uses HTML attributes (required)
and radio buttons/checkboxes for validation.
- AJAX Form Submission:
- Prevents page reload and sends data
asynchronously.
- File Upload:
- Allows image upload for user profiles.
How It Works Together
1. UI Presentation:
o
Displays a clean, user-friendly
form with all the fields required for registration.
2. Data Handling:
o
Dynamically loads dependent
fields (Course, Semester, Section).
o
Collects all user input,
including skills and an uploaded image.
3. Server-Side Communication:
o
Sends user data to backend PHP
scripts for processing and saving (e.g., save_registration.php).
4. Real-Time Feedback:
o
Alerts the user about submission
success or failure.