Assignmens Of Class 12: Forms in HTML - Part 3:
Assignment 1: Create a Structured Contact Form
Objective: Design a contact form with grouped sections and validation.
Instructions:
- Create a contact form that includes:
- Personal Information (Name, Email, Phone)
- Message Details (Subject, Message Body)
- Use <fieldset> and <legend> to group related fields.
- Apply basic validation:
- Make the Name, Email, and Message Body fields required.
- Ensure the Email field uses the email format.
- The Phone field should accept only numbers and be of length 10.
- Style the form using CSS to ensure it is well-organized and visually appealing.
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<style>
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
input, textarea { width: 100%; padding: 8px; }
fieldset { border: 1px solid #ccc; padding: 10px; }
legend { font-weight: bold; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>
</div>
</fieldset>
<fieldset>
<legend>Message Details</legend>
<div class="form-group">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
</fieldset>
<button type="submit">Submit</button>
</form>
</body>
</html>
Assignment 2: Create a Registration Form with Validation
Objective: Design a registration form that includes various types of input fields with validation.
Instructions:
- Create a registration form that includes:
- Username
- Password (with confirmation)
- Date of Birth
- Gender (radio buttons)
- Accept Terms and Conditions (checkbox)
- Apply the following validation rules:
- Username must be between 5 and 15 characters.
- Password and confirmation must match and be at least 8 characters long.
- Date of Birth should be in the past.
- Gender must be selected.
- Terms and Conditions checkbox must be checked before submission.
- Use CSS to style the form.
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
input, select { width: 100%; padding: 8px; }
.radio-group { margin-bottom: 10px; }
.checkbox-group { margin-bottom: 15px; }
</style>
</head>
<body>
<form>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" minlength="5" maxlength="15" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8" required>
</div>
<div class="form-group">
<label for="password-confirm">Confirm Password:</label>
<input type="password" id="password-confirm" name="password-confirm" minlength="8" required>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" max="2006-12-31" required>
</div>
<div class="form-group radio-group">
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I accept the Terms and Conditions</label>
</div>
<button type="submit">Register</button>
</form>
</body>
</html>
Assignment 3: Create a Survey Form
Objective: Design a survey form with various input types and group elements.
Instructions:
- Create a survey form that includes:
- Personal Information (Name, Age)
- Favorite Hobby (dropdown list)
- Feedback (text area)
- Rating (radio buttons)
- Preferred Contact Method (checkboxes)
- Apply CSS to enhance the form's appearance and layout.
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Form</title>
<style>
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
input, select, textarea { width: 100%; padding: 8px; }
.checkbox-group { margin-top: 10px; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" required>
</div>
</fieldset>
<fieldset>
<legend>Survey Questions</legend>
<div class="form-group">
<label for="hobby">Favorite Hobby:</label>
<select id="hobby" name="hobby">
<option value="reading">Reading</option>
<option value="sports">Sports</option>
<option value="music">Music</option>
<option value="traveling">Traveling</option>
</select>
</div>
<div class="form-group">
<label for="feedback">Feedback:</label>
<textarea id="feedback" name="feedback" rows="5" required></textarea>
</div>
<div class="form-group">
<label>Rating:</label>
<input type="radio" id="excellent" name="rating" value="excellent" required>
<label for="excellent">Excellent</label>
<input type="radio" id="good" name="rating" value="good" required>
<label for="good">Good</label>
<input type="radio" id="average" name="rating" value="average" required>
<label for="average">Average</label>
<input type="radio" id="poor" name="rating" value="poor" required>
<label for="poor">Poor</label>
</div>
<div class="form-group checkbox-group">
<label>Preferred Contact Method:</label>
<input type="checkbox" id="email" name="contact-method" value="email">
<label for="email">Email</label>
<input type="checkbox" id="phone" name="contact-method" value="phone">
<label for="phone">Phone</label>
<input type="checkbox" id="mail" name="contact-method" value="mail">
<label for="mail">Mail</label>
</div>
</fieldset>
<button type="submit">Submit Survey</button>
</form>
</body>
</html>
These assignments will help students practice creating well-structured and functional forms, apply validation rules, and style forms for a better user experience.
4o mini
You said:
give some more
ChatGPT said:
ChatGPT
Here are additional assignments for Class 12: Forms in HTML - Part 3:
Additional Assignments
Assignment 4: Build a Job Application Form
Objective: Create a job application form with various input elements and sections.
Instructions:
- Design a job application form that includes:
- Personal Information (Name, Email, Phone Number)
- Address (Street, City, State, Zip Code)
- Resume Upload (file input)
- Cover Letter (text area)
- Availability (radio buttons for full-time/part-time)
- Implement basic validation:
- Name and Email are required.
- Phone Number must be a valid number format.
- Resume must be a file of type PDF or DOC.
- Use CSS to make the form visually appealing.
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Application Form</title>
<style>
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
input, textarea, select { width: 100%; padding: 8px; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>
</div>
</fieldset>
<fieldset>
<legend>Address</legend>
<div class="form-group">
<label for="street">Street:</label>
<input type="text" id="street" name="street" required>
</div>
<div class="form-group">
<label for="city">City:</label>
<input type="text" id="city" name="city" required>
</div>
<div class="form-group">
<label for="state">State:</label>
<input type="text" id="state" name="state" required>
</div>
<div class="form-group">
<label for="zip">Zip Code:</label>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}" required>
</div>
</fieldset>
<fieldset>
<legend>Application Details</legend>
<div class="form-group">
<label for="resume">Resume (PDF/DOC):</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc" required>
</div>
<div class="form-group">
<label for="cover-letter">Cover Letter:</label>
<textarea id="cover-letter" name="cover-letter" rows="5" required></textarea>
</div>
<div class="form-group">
<label>Availability:</label>
<input type="radio" id="full-time" name="availability" value="full-time" required>
<label for="full-time">Full-Time</label>
<input type="radio" id="part-time" name="availability" value="part-time" required>
<label for="part-time">Part-Time</label>
</div>
</fieldset>
<button type="submit">Submit Application</button>
</form>
</body>
</html>
Assignment 5: Create a Feedback Form
Objective: Develop a feedback form with different types of inputs and validation.
Instructions:
- Create a feedback form with:
- Name
- Email
- Feedback Type (dropdown)
- Comments (text area)
- Satisfaction Rating (radio buttons)
- Subscribe to Newsletter (checkbox)
- Apply validation:
- Name and Email are required.
- Comments must be at least 10 characters long.
- Email should follow the email format.
- Satisfaction Rating must be selected.
- Style the form using CSS.
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feedback Form</title>
<style>
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
input, select, textarea { width: 100%; padding: 8px; }
</style>
</head>
<body>
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="feedback-type">Feedback Type:</label>
<select id="feedback-type" name="feedback-type">
<option value="product">Product</option>
<option value="service">Service</option>
<option value="website">Website</option>
</select>
</div>
<div class="form-group">
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="5" minlength="10" required></textarea>
</div>
<div class="form-group">
<label>Satisfaction Rating:</label>
<input type="radio" id="very-satisfied" name="rating" value="very-satisfied" required>
<label for="very-satisfied">Very Satisfied</label>
<input type="radio" id="satisfied" name="rating" value="satisfied" required>
<label for="satisfied">Satisfied</label>
<input type="radio" id="neutral" name="rating" value="neutral" required>
<label for="neutral">Neutral</label>
<input type="radio" id="dissatisfied" name="rating" value="dissatisfied" required>
<label for="dissatisfied">Dissatisfied</label>
<input type="radio" id="very-dissatisfied" name="rating" value="very-dissatisfied" required>
<label for="very-dissatisfied">Very Dissatisfied</label>
</div>
<div class="form-group">
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Subscribe to Newsletter</label>
</div>
<button type="submit">Submit Feedback</button>
</form>
</body>
</html>
Assignment 6: Create a Reservation Form
Objective: Design a reservation form with complex input elements.
Instructions:
- Develop a reservation form including:
- Full Name
- Email
- Reservation Date (date picker)
- Number of Guests (number input)
- Special Requests (text area)
- Preferred Contact Time (time input)
- Validate:
- Full Name and Email are required.
- Number of Guests must be a positive integer.
- Special Requests should not exceed 250 characters.
- Reservation Date should not be in the past.
- Apply CSS to format the form layout and design.
Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reservation Form</title>
<style>
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
input, textarea { width: 100%; padding: 8px; }
</style>
</head>
<body>
<form>
<div class="form-group">
<label for="full-name">Full Name:</label>
<input type="text" id="full-name" name="full-name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="reservation-date">Reservation Date:</label>
<input type="date" id="reservation-date" name="reservation-date" min="<?php echo date('Y-m-d'); ?>" required>
</div>
<div class="form-group">
<label for="guests">Number of Guests:</label>
<input type="number" id="guests" name="guests" min="1" required>
</div>
<div class="form-group">
<label for="special-requests">Special Requests:</label>
<textarea id="special-requests" name="special-requests" rows="5" maxlength="250"></textarea>
</div>
<div class="form-group">
<label for="contact-time">Preferred Contact Time:</label>
<input type="time" id="contact-time" name="contact-time">
</div>
<button type="submit">Submit Reservation</button>
</form>
</body>
</html>
These assignments provide students with the opportunity to practice more complex form designs, validation techniques, and styling.
4o mini
You said:
write MCQ on this concept
ChatGPT said:
ChatGPT
Here are some multiple-choice questions (MCQs) for