Assignment
Use Bootstrap form components.
Implement checkboxes, radio buttons, and switches.
Create a clean and responsive form layout.
Apply Bootstrap classes for styling form controls.
Assignment creates a User Preference Form using Bootstrap. The form should collect information about a user's interests and preferences using checkboxes, radio buttons, and toggle switches.
4. Requirements
1. Include Bootstrap
Add the Bootstrap CDN in the HTML file.
2. Form Sections
Your form must contain the following sections:
A. Hobbies (Checkboxes)
Allow users to select multiple hobbies.
Example options:
Reading
Traveling
Gaming
Music
Sports
B. Gender (Radio Buttons)
Allow the user to select only one option.
Options:
Male
Female
Other
C. Notification Settings (Switches)
Create toggle switches for settings.
Options:
Email Notifications
SMS Notifications
Push Notifications
5. Example Layout
Form should include:
Page title
Bootstrap container
Styled form controls
Submit button
6. Sample Code Structure
Html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Form Assignment</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>User Preference Form</h2>
<form>
<h4>Hobbies</h4>
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label">Reading</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label">Traveling</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label">Gaming</label>
</div>
<h4 class="mt-3">Gender</h4>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender">
<label class="form-check-label">Male</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender">
<label class="form-check-label">Female</label>
</div>
<h4 class="mt-3">Notifications</h4>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox">
<label class="form-check-label">Email Notifications</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox">
<label class="form-check-label">SMS Notifications</label>
</div>
<br>
<button class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
7. Submission Requirements
must submit:
index.html file
Screenshots of the output
Brief explanation (5–6 lines)
8. Evaluation Criteria
Criteria
Marks
Proper Bootstrap usage
5
Checkbox implementation
5
Radio button implementation
5
Switch implementation
5
UI design & layout
5
Total: 25 Marks
Complete This Assignment And Submit It On My Contact Page
No comments:
Post a Comment