lecture Notes Of Class 11: Forms in HTML - Part 2

  lecture Notes Of Class 11

 Forms in HTML - Part 2

Objective:

Learn about advanced form elements and form buttons.

Outcome:

Students will be able to create dropdown lists, checkboxes, radio buttons, file upload fields, and form buttons.

---

Introduction

In this class, we will explore advanced HTML form elements and how to enhance forms with interactive features. We will cover dropdown lists, checkboxes, radio buttons, file upload fields, and various types of form buttons. These elements help create rich and interactive forms that users can fill out effectively.

---

1. Dropdown Lists

Dropdown lists allow users to select a value from a predefined list. They are useful for providing a range of options and ensuring that users select from acceptable values.

• Syntax:

<label for="fruits">Choose a fruit:</label> <select id="fruits" name="fruits">   <option value="apple">Apple</option>   <option value="orange">Orange</option>   <option value="banana">Banana</option>   <option value="mango">Mango</option> </select>

 

• Explanation:
• <select> element creates the dropdown list.
• <option> elements define the options available in the list.
• The value attribute of <option> specifies the value that will be sent when the form is submitted.

---

2. Checkboxes

Checkboxes allow users to select multiple options from a set of choices. Each checkbox operates independently of the others.

• Syntax:

<fieldset>   <legend>Select your hobbies:</legend>   <label><input type="checkbox" name="hobbies" value="reading"> Reading</label><br>   <label><input type="checkbox" name="hobbies" value="traveling"> Traveling</label><br>   <label><input type="checkbox" name="hobbies" value="cooking"> Cooking</label><br>   <label><input type="checkbox" name="hobbies" value="sports"> Sports</label> </fieldset>

 

• Explanation:
• <input type="checkbox"> creates a checkbox.
• The name attribute groups checkboxes, and each checkbox can be checked or unchecked independently.

---

3. Radio Buttons

Radio buttons allow users to select one option from a group of choices. Unlike checkboxes, only one radio button in a group can be selected at a time.

• Syntax:

<fieldset>   <legend>Select your gender:</legend>   <label><input type="radio" name="gender" value="male"> Male</label><br>   <label><input type="radio" name="gender" value="female"> Female</label><br>   <label><input type="radio" name="gender" value="other"> Other</label> </fieldset>

 

• Explanation:
• <input type="radio"> creates a radio button.
• The name attribute ensures that only one radio button in the group can be selected.

---

4. File Upload Fields

File upload fields allow users to upload files from their local system. This is useful for forms that require document submissions or image uploads.

• Syntax:

<label for="fileUpload">Upload your file:</label> <input type="file" id="fileUpload" name="fileUpload">

 Explanation:

• <input type="file"> creates a file input field.
• Users can select files from their local system, which will be sent with the form submission.

---

5. Form Buttons

Form buttons include submit buttons, reset buttons, and regular buttons. These are used to submit the form, reset the form fields, or perform custom actions.

• Syntax:

<!-- Submit Button --> <input type="submit" value="Submit">   <!-- Reset Button --> <input type="reset" value="Reset">   <!-- Regular Button --> <button type="button" onclick="alert('Button clicked!')">Click Me</button>

 

• Explanation:
• <input type="submit"> submits the form.
• <input type="reset"> resets all form fields to their default values.
• <button type="button"> creates a clickable button that can perform custom actions using JavaScript.

---

6. Summary

In this class, we learned how to use advanced form elements to enhance the functionality of HTML forms. By incorporating dropdown lists, checkboxes, radio buttons, file uploads, and various types of buttons, we can create more interactive and user-friendly forms.

---

Conclusion

Understanding and using these advanced form elements will help you build more dynamic and user-centric web forms. Practice implementing these elements to get comfortable with their usage and customization.

---