HTML Forms

HTML forms are one of the most important elements in web development. They allow users to input data and interact with web applications, whether by submitting information, making selections, or providing feedback.

At The Coding College, we help you learn the essentials of HTML forms, making it easier to build functional and user-friendly websites.

What is an HTML Form?

An HTML form is a container for various types of input elements like text fields, checkboxes, radio buttons, and more. The data collected by the form can be sent to a server for processing.

Example of a Basic HTML Form:

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

Attributes of the <form> Element

  • action
    Specifies the URL to which the form data will be sent.
    • Example: 
<form action="/submit">
  • method
    Determines the HTTP method used to send data. Common methods:
    • GET: Appends form data to the URL.
    • POST: Sends form data in the request body (more secure).
    • Example: 
<form method="POST">
  • target
    Defines where to display the response after form submission.
    • _self: Default; opens in the same window.
    • _blank: Opens in a new tab or window.
  • enctype
    Specifies how form data should be encoded when submitted (used with POST). Common values:
    • application/x-www-form-urlencoded (default).
    • multipart/form-data (for file uploads).

Common Form Elements

1. Text Input Fields

<label for="email">Email:</label>
<input type="email" id="email" name="email">

2. Password Input Fields

<label for="password">Password:</label>
<input type="password" id="password" name="password">

3. Radio Buttons

<label>
  <input type="radio" name="gender" value="male"> Male
</label>
<label>
  <input type="radio" name="gender" value="female"> Female
</label>

4. Checkboxes

<label>
  <input type="checkbox" name="subscribe" value="newsletter"> Subscribe to Newsletter
</label>

5. Dropdown List

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="india">India</option>
  <option value="usa">USA</option>
  <option value="uk">UK</option>
</select>

6. Textarea

<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>

7. Submit Button

<button type="submit">Submit</button>

8. File Upload

<label for="file">Upload a File:</label>
<input type="file" id="file" name="file">

Advanced Features

1. Placeholder Text

Provides a hint about the expected input.

<input type="text" placeholder="Enter your name">

2. Required Fields

Ensures the field is filled before submission.

<input type="email" required>

3. Validation

HTML5 provides built-in validation types like email, url, and number.

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

4. Hidden Fields

Used to send data that users can’t see.

<input type="hidden" name="userId" value="12345">

Example: A Complete HTML Form

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Forms</title>
</head>
<body>
  <h1>Contact Us</h1>
  <form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Your Name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" placeholder="Your Message" required></textarea>

    <label>
      <input type="checkbox" name="subscribe" value="yes"> Subscribe to Newsletter
    </label>

    <button type="submit">Send</button>
  </form>
</body>
</html>

Conclusion

Forms are essential for collecting user data and enabling interactivity on websites. By understanding the basics and advanced features of HTML forms, you can create user-friendly interfaces for your applications.

Explore more tutorials on The Coding College and take your web development skills to the next level!

Leave a Comment