Assignments of Class 11: Forms in HTML - Part 2

Rashmi Mishra
personRashmi Mishra
January 09, 20257 minute read
0

 Assignments of Class 11
 Forms in HTML - Part 2


Assignment1. Create a Contact Form with Dropdown, Checkboxes, and File Upload

  • Objective: Build a contact form that includes a dropdown list, checkboxes, and a file upload field.
  • Requirements:

1.  Create a form with the following fields:

§  A dropdown list for selecting the type of inquiry (e.g., "General Inquiry," "Technical Support," "Feedback").

§  Checkboxes for selecting interests (e.g., "Product Updates," "Newsletter," "Events").

§  A file upload field for attaching a document or image.

2.  Add a submit button to send the form data.


Assignment2. Create a Survey Form with Radio Buttons and a File Upload

  • Objective: Build a survey form that includes radio buttons for user preferences and a file upload field.
  • Requirements:

1.  Create a form with the following fields:

§  Radio buttons for selecting a preferred contact method (e.g., "Email," "Phone," "Postal Mail").

§  A file upload field for uploading a resume or other document.

2.  Include a submit button.


Assignment3. Build a Registration Form with Multiple Form Buttons

  • Objective: Create a registration form with multiple buttons for different actions.
  • Requirements:

1.  Create a form with the following fields:

§  Text input for username

§  Password input for password

§  Submit button to register

§  Reset button to clear all fields

§  A regular button that displays a message (e.g., "Help") when clicked.

2.  Implement basic styling to distinguish between buttons.


Assignment4. Create a Form with a Dropdown List, Checkboxes, and a Radio Button Group

  • Objective: Develop a form incorporating a dropdown list, checkboxes, and a group of radio buttons for a fictional service.
  • Requirements:

1.  Create a form with the following fields:

§  A dropdown list to select a service type (e.g., "Basic Plan," "Premium Plan").

§  Checkboxes for additional features (e.g., "Extra Storage," "Priority Support").

§  Radio buttons for selecting the preferred contact time (e.g., "Morning," "Afternoon," "Evening").

2.  Add a submit button to send the form data.


Assignment5. Create a Feedback Form with Dropdown and Radio Buttons

  • Objective: Develop a feedback form that includes a dropdown list and radio buttons to gather user opinions.
  • Requirements:

1.  Create a form with the following fields:

§  A dropdown list for selecting feedback type (e.g., "Product Feedback," "Service Feedback," "Website Feedback").

§  Radio buttons for rating the service (e.g., "Excellent," "Good," "Average," "Poor").

§  A text area for additional comments.

2.  Include a submit button.


Assignment6. Design a User Registration Form with Multiple Input Types

  • Objective: Create a user registration form that includes a variety of input types.
  • Requirements:

1.  Create a form with the following fields:

§  A text input for username.

§  An email input for email address.

§  A password input for password.

§  A number input for age.

§  A date input for birthdate.

§  A submit button.


Assignment7. Build a Job Application Form with File Upload and Checkboxes

  • Objective: Create a job application form that includes a file upload field and checkboxes for skills.
  • Requirements:

1.  Create a form with the following fields:

§  A text input for applicant name.

§  A text input for contact number.

§  A file upload field for attaching a resume.

§  Checkboxes for selecting skills (e.g., "JavaScript," "HTML," "CSS," "PHP").

§  A submit button.


Assignment8. Create a Survey Form with Multiple Choice and a File Upload

  • Objective: Build a survey form that includes multiple choice questions and a file upload.
  • Requirements:

1.  Create a form with the following fields:

§  Multiple choice question for selecting satisfaction level (e.g., "Very Satisfied," "Satisfied," "Neutral," "Dissatisfied").

§  A file upload field for submitting feedback documents.

§  A submit button.


  • Solutions

Assignment1. Create a Contact Form with Dropdown, Checkboxes, and File Upload

  • Objective: Build a contact form that includes a dropdown list, checkboxes, and a file upload field.
  • Requirements:

1.  Create a form with the following fields:

§  A dropdown list for selecting the type of inquiry (e.g., "General Inquiry," "Technical Support," "Feedback").

§  Checkboxes for selecting interests (e.g., "Product Updates," "Newsletter," "Events").

§  A file upload field for attaching a document or image.

2.  Add a submit button to send the form data.

  • Example Code:

<form action="/submit" method="post" enctype="multipart/form-data">

  <label for="inquiry">Type of Inquiry:</label>

  <select id="inquiry" name="inquiry">

    <option value="general">General Inquiry</option>

    <option value="support">Technical Support</option>

    <option value="feedback">Feedback</option>

  </select><br><br>

 

  <fieldset>

    <legend>Select your interests:</legend>

    <label><input type="checkbox" name="interests" value="updates"> Product Updates</label><br>

    <label><input type="checkbox" name="interests" value="newsletter"> Newsletter</label><br>

    <label><input type="checkbox" name="interests" value="events"> Events</label>

  </fieldset><br>

 

  <label for="fileUpload">Attach a file:</label>

  <input type="file" id="fileUpload" name="fileUpload"><br><br>

 

  <input type="submit" value="Submit">

</form>

Assignment2. Create a Survey Form with Radio Buttons and a File Upload

  • Objective: Build a survey form that includes radio buttons for user preferences and a file upload field.
  • Requirements:

1.  Create a form with the following fields:

§  Radio buttons for selecting a preferred contact method (e.g., "Email," "Phone," "Postal Mail").

§  A file upload field for uploading a resume or other document.

2.  Include a submit button.

  • Example Code:

<form action="/submit-survey" method="post" enctype="multipart/form-data">

  <fieldset>

    <legend>Preferred Contact Method:</legend>

    <label><input type="radio" name="contact" value="email"> Email</label><br>

    <label><input type="radio" name="contact" value="phone"> Phone</label><br>

    <label><input type="radio" name="contact" value="mail"> Postal Mail</label>

  </fieldset><br>

 

  <label for="resume">Upload your resume:</label>

  <input type="file" id="resume" name="resume"><br><br>

 

  <input type="submit" value="Submit">

</form>

Assignment3. Build a Registration Form with Multiple Form Buttons

  • Objective: Create a registration form with multiple buttons for different actions.
  • Requirements:

1.  Create a form with the following fields:

§  Text input for username

§  Password input for password

§  Submit button to register

§  Reset button to clear all fields

§  A regular button that displays a message (e.g., "Help") when clicked.

2.  Implement basic styling to distinguish between buttons.

  • Example Code:

<form action="/register" method="post">

  <label for="username">Username:</label>

  <input type="text" id="username" name="username" required><br><br>

 

  <label for="password">Password:</label>

  <input type="password" id="password" name="password" required><br><br>

 

  <input type="submit" value="Register">

  <input type="reset" value="Reset">

  <button type="button" onclick="alert('For assistance, please contact support.')">Help</button>

</form>

Assignment4. Create a Form with a Dropdown List, Checkboxes, and a Radio Button Group

  • Objective: Develop a form incorporating a dropdown list, checkboxes, and a group of radio buttons for a fictional service.
  • Requirements:

1.  Create a form with the following fields:

§  A dropdown list to select a service type (e.g., "Basic Plan," "Premium Plan").

§  Checkboxes for additional features (e.g., "Extra Storage," "Priority Support").

§  Radio buttons for selecting the preferred contact time (e.g., "Morning," "Afternoon," "Evening").

2.  Add a submit button to send the form data.

  • Example Code:

<form action="/service-selection" method="post">

  <label for="service">Select a service:</label>

  <select id="service" name="service">

    <option value="basic">Basic Plan</option>

    <option value="premium">Premium Plan</option>

  </select><br><br>

 

  <fieldset>

    <legend>Additional Features:</legend>

    <label><input type="checkbox" name="features" value="storage"> Extra Storage</label><br>

    <label><input type="checkbox" name="features" value="support"> Priority Support</label>

  </fieldset><br>

 

  <fieldset>

    <legend>Preferred Contact Time:</legend>

    <label><input type="radio" name="contactTime" value="morning"> Morning</label><br>

    <label><input type="radio" name="contactTime" value="afternoon"> Afternoon</label><br>

    <label><input type="radio" name="contactTime" value="evening"> Evening</label>

  </fieldset><br>

 

  <input type="submit" value="Submit">

</form>

Assignment5. Create a Feedback Form with Dropdown and Radio Buttons

  • Objective: Develop a feedback form that includes a dropdown list and radio buttons to gather user opinions.
  • Requirements:

1.  Create a form with the following fields:

§  A dropdown list for selecting feedback type (e.g., "Product Feedback," "Service Feedback," "Website Feedback").

§  Radio buttons for rating the service (e.g., "Excellent," "Good," "Average," "Poor").

§  A text area for additional comments.

2.  Include a submit button.

  • Example Code:

<form action="/submit-feedback" method="post">

  <label for="feedbackType">Type of Feedback:</label>

  <select id="feedbackType" name="feedbackType">

    <option value="product">Product Feedback</option>

    <option value="service">Service Feedback</option>

    <option value="website">Website Feedback</option>

  </select><br><br>

 

  <fieldset>

    <legend>Rate our service:</legend>

    <label><input type="radio" name="rating" value="excellent"> Excellent</label><br>

    <label><input type="radio" name="rating" value="good"> Good</label><br>

    <label><input type="radio" name="rating" value="average"> Average</label><br>

    <label><input type="radio" name="rating" value="poor"> Poor</label>

  </fieldset><br>

 

  <label for="comments">Additional Comments:</label><br>

  <textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>

 

  <input type="submit" value="Submit Feedback">

</form>

Assignment6. Design a User Registration Form with Multiple Input Types

  • Objective: Create a user registration form that includes a variety of input types.
  • Requirements:

1.  Create a form with the following fields:

§  A text input for username.

§  An email input for email address.

§  A password input for password.

§  A number input for age.

§  A date input for birthdate.

§  A submit button.

  • Example Code:

<form action="/register-user" method="post">

  <label for="username">Username:</label>

  <input type="text" id="username" name="username" required><br><br>

 

  <label for="email">Email:</label>

  <input type="email" id="email" name="email" required><br><br>

 

  <label for="password">Password:</label>

  <input type="password" id="password" name="password" required><br><br>

 

  <label for="age">Age:</label>

  <input type="number" id="age" name="age" min="0" max="120" required><br><br>

 

  <label for="birthdate">Birthdate:</label>

  <input type="date" id="birthdate" name="birthdate" required><br><br>

 

  <input type="submit" value="Register">

</form>

Assignment7. Build a Job Application Form with File Upload and Checkboxes

  • Objective: Create a job application form that includes a file upload field and checkboxes for skills.
  • Requirements:

1.  Create a form with the following fields:

§  A text input for applicant name.

§  A text input for contact number.

§  A file upload field for attaching a resume.

§  Checkboxes for selecting skills (e.g., "JavaScript," "HTML," "CSS," "PHP").

§  A submit button.

  • Example Code:


<form action="/apply-job" method="post" enctype="multipart/form-data">

  <label for="name">Name:</label>

  <input type="text" id="name" name="name" required><br><br>

 

  <label for="contact">Contact Number:</label>

  <input type="text" id="contact" name="contact" required><br><br>

 

  <label for="resume">Upload your resume:</label>

  <input type="file" id="resume" name="resume" required><br><br>

 

  <fieldset>

    <legend>Select your skills:</legend>

    <label><input type="checkbox" name="skills" value="javascript"> JavaScript</label><br>

    <label><input type="checkbox" name="skills" value="html"> HTML</label><br>

    <label><input type="checkbox" name="skills" value="css"> CSS</label><br>

    <label><input type="checkbox" name="skills" value="php"> PHP</label>

  </fieldset><br>

 

  <input type="submit" value="Apply">

</form>

Assignment8. Create a Survey Form with Multiple Choice and a File Upload

  • Objective: Build a survey form that includes multiple choice questions and a file upload.
  • Requirements:

1.  Create a form with the following fields:

§  Multiple choice question for selecting satisfaction level (e.g., "Very Satisfied," "Satisfied," "Neutral," "Dissatisfied").

§  A file upload field for submitting feedback documents.

§  A submit button.

  • Example Code:

<form action="/submit-survey" method="post" enctype="multipart/form-data">

  <fieldset>

    <legend>How satisfied are you with our service?</legend>

    <label><input type="radio" name="satisfaction" value="very-satisfied"> Very Satisfied</label><br>

    <label><input type="radio" name="satisfaction" value="satisfied"> Satisfied</label><br>

    <label><input type="radio" name="satisfaction" value="neutral"> Neutral</label><br>

    <label><input type="radio" name="satisfaction" value="dissatisfied"> Dissatisfied</label>

  </fieldset><br>

 

  <label for="feedbackFile">Upload feedback document:</label>

  <input type="file" id="feedbackFile" name="feedbackFile"><br><br>

 

  <input type="submit" value="Submit Survey">

</form>


 


Tags

You Might Like

Show more
assignments

Post a Comment

0Comments

Post a Comment (0)
Share to other apps
Copy Post link