Html Course Module 23

  Module 23: Forms with Advanced Input

Objective:

                                 📄

This module focuses on creating advanced input forms in HTML, including file uploads using <input type="file"> and organizing form elements with <fieldset> and <legend>. It provides practical methods, detailed explanations, and exercises to implement these elements effectively in web forms.

1. File Uploads with <input type="file">

Overview:

The <input type="file"> element allows users to upload files from their local device to the server. This is commonly used for uploading images, documents, or other file types in forms.

Key Attributes of <input type="file">:

accept: Specifies the file types the user can select.

Example: accept=".jpg,.png,.pdf" allows only JPEG, PNG, and PDF files.

multiple: Allows the user to select multiple files.

Example: <input type="file" multiple> permits uploading multiple files at once.

required: Ensures a file is selected before the form is submitted.

capture: Used for capturing media directly from a device (e.g., camera or microphone).

Basic Example:

html code

<form action="/upload" method="post" enctype="multipart/form-data"> <label for="file-upload">Upload your document:</label> <input type="file" id="file-upload" name="document" accept=".pdf,.docx" required> <button type="submit">Submit</button> </form>

Explanation:

enctype="multipart/form-data": Ensures the form can handle file data.

The accept attribute limits the file types for security and usability.

The required attribute makes file upload mandatory.

Practical Example:

A form to upload a profile picture with live preview.

html code

<form> <label for="profile-pic">Upload Profile Picture:</label> <input type="file" id="profile-pic" accept="image/*" onchange="previewImage(event)"> <div> <img id="preview" src="#" alt="Image Preview" style="display:none; width: 200px; height: auto;"> </div> </form> <script> function previewImage(event) { const preview = document.getElementById('preview'); const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function () { preview.src = reader.result; preview.style.display = "block"; }; reader.readAsDataURL(file); } } </script>

2. Using <fieldset> and <legend>

Overview:

The <fieldset> element groups related form controls, providing better structure and readability. The <legend> element gives a caption for the <fieldset> group.

Key Attributes:

<fieldset>:

disabled: Disables all controls within the group.

<legend>:

Positions the title of the group visually above or within the <fieldset> border.

Basic Example:

html code

<form> <fieldset> <legend>Personal Information</legend> <label for="name">Name:</label> <input type="text" id="name" name="name" required><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email" required> </fieldset> </form>

Explanation:

<fieldset>: Creates a border around grouped inputs, enhancing visual hierarchy.

<legend>: Serves as the title for the group.

Practical Example:

A registration form with grouped fields for personal and account details.

html code

<form> <fieldset> <legend>Personal Information</legend> <label for="first-name">First Name:</label> <input type="text" id="first-name" name="first-name" required><br><br> <label for="last-name">Last Name:</label> <input type="text" id="last-name" name="last-name" required> </fieldset> <fieldset> <legend>Account Details</legend> <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> </fieldset> <button type="submit">Register</button> </form>

Exercises:

1. File Upload with Validation

Create a form that allows users to upload a file but restricts the size to 5MB. Show a warning if the file exceeds this limit.

Hint: Use JavaScript to validate file size.

2. Form with Multiple Fieldsets

Design a form for a survey with three sections:

Personal Information

Feedback

Additional Comments Use <fieldset> and <legend> to organize these sections.

3. File Upload with Multiple Files

Create a form that lets users upload up to three images. Display thumbnails of all selected images before submission.

Conclusion:

This module equips learners with the skills to enhance form functionality and user experience using advanced input elements like file uploads and well-structured form groups. By combining practical exercises and clear examples, learners will gain hands-on experience building interactive forms for real-world applications.