Mastering HTML Forms: PART-2

Mastering HTML Forms - Introduction to HTML Forms and Basic Input Types:

Mastering HTML Forms: PART-2

Advanced Input Types and Form Submission:

Welcome to Part 2 of our HTML forms tutorial! In this section, we will build upon the knowledge gained in Part 1 and explore more advanced input types and form submission techniques. By the end of this section, you will have a comprehensive understanding of creating complex forms and handling form submissions.

File Upload and Textarea:

HTML forms support additional input types such as file uploads and multi-line text input. We will discuss the <input type="file"> tag, which allows users to select and upload files from their local machine. Additionally, we will explore the <textarea> tag for collecting multi-line text inputs. Code examples will demonstrate how to handle file uploads and retrieve the file information on the server-side, as well as create text areas with custom sizes.

code:

<!DOCTYPE html>
<html>
  <head>
    <title>File Upload and Textarea</title>
  </head>
  <body>
    <form action="submit-form.php" method="post" enctype="multipart/form-data">
      <label for="avatar">Choose a profile picture:</label>
      <input type="file" id="avatar" name="avatar" />

      <label for="message">Message:</label>
      <textarea id="message" name="message" rows="4" cols="50"></textarea>

      <!-- Additional file upload and textarea fields go here -->
      <button type="submit">Submit</button>
    </form>
  </body>
</html>
File Upload and Textarea - Mastering HTML Forms: PART-2
File Upload and Textarea – Mastering HTML Forms: PART-2

Dropdown menus are created using the <select> and <option> tags. The <select> tag acts as the container for the dropdown menu, while the <option> tag defines each individual option within the menu.

code:

<!DOCTYPE html>
<html>
  <head>
    <title>File Upload and Textarea</title>
  </head>
  <body>
    <form action="submit-form.php" method="post" enctype="multipart/form-data">
      <select>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
    </form>
  </body>
</html>
Dropdown In HTML - Mastering HTML Forms: PART-2
Dropdown In HTML – Mastering HTML Forms: PART-2

In the above example, we have a simple dropdown menu with three options. The value attribute specifies the value associated with each option. When the user selects an option, the value of that option can be submitted along with the form.

Grouping in Dropdown:

Dropdown menus can also have groups of options using the <optgroup> tag. This allows you to categorize and organize the options within the menu.

code:

<!DOCTYPE html>
<html>
  <head>
    <title>File Upload and Textarea</title>
  </head>
  <body>
    <form action="submit-form.php" method="post" enctype="multipart/form-data">
      <select>
        <optgroup label="Group 1">
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
        </optgroup>
        <optgroup label="Group 2">
          <option value="option3">Option 3</option>
          <option value="option4">Option 4</option>
        </optgroup>
      </select>
    </form>
  </body>
</html>
Grouping in Dropdown - Mastering HTML Forms: PART-2
Grouping in Dropdown – Mastering HTML Forms: PART-2

Form Validation and Submission:

Validating user input is crucial to ensure data integrity. We will discuss various validation techniques using HTML attributes and JavaScript. You will learn how to use required, pattern, and other attributes to enforce input validation on the client-side. Additionally, we will explore form submission and discuss different methods such as GET and POST. Code examples will demonstrate how to validate user input and handle form submissions on the server-side.

code:

<!DOCTYPE html>
<html>
  <head>
    <title>Form Validation and Submission</title>
    <script>
      function validateForm() {
        // Perform form validation using JavaScript
        // Return false to prevent form submission if validation fails
      }
    </script>
  </head>
  <body>
    <form
      action="submit-form.php"
      method="post"
      onsubmit="return validateForm()"
    >
      <!-- Form fields go here -->

      <button type="submit">Submit</button>
    </form>
  </body>
</html>
Form Validation and Submission - Mastering HTML Forms: PART-2
Form Validation and Submission – Mastering HTML Forms: PART-2

Conclusion:

Congratulations on completing this two-part blog series on HTML forms! You have learned how to create forms, utilize different input types, and handle form submissions. With the knowledge gained from this tutorial, you are well-equipped to create interactive and user-friendly forms for your web applications. Remember to always follow best practices and consider accessibility when designing and implementing forms.

Note: The code examples provided in this blog are for illustration purposes only and may require additional server-side processing or JavaScript functionality to handle form submissions and implement desired functionalities.

This Journey will be continue…

Github Branch: Mastering HTML Forms

Github Repo: HTML

Code Review By: Muhammad Arif & Muhammad Zain

Tags: , , ,

Leave a Reply