HTML Form Examples 🎯

Welcome back to CodeYourCraft! Today, we're diving into the world of HTML forms. Forms are essential for user interaction on web pages, allowing users to submit data, sign up, log in, and more. Let's get started!

What is an HTML Form? 📝

An HTML form is a container for user input elements such as text fields, checkboxes, radio buttons, and dropdown lists. Forms are used to collect data from users and send it to a server for processing.

Basic HTML Form Structure 💡

An HTML form starts with the <form> tag and ends with the closing </form> tag. Inside the form, we define various input fields and a submit button.

html

<form action="/submit_form" method="post">
  <!-- Form fields here -->
  <input type="submit" value="Submit">
</form>

💡 Pro Tip: Always include an action attribute in your <form> tag to specify where the form data will be sent when submitted. The method attribute determines how the form data is sent, typically either "get" (appended to the URL) or "post" (sent in the body of the request).

Common Input Types 📝

HTML offers several input types to collect user data. Let's explore some of the most common ones:

<input type="text">: Creates a single-line text field.
<input type="password">: Creates a single-line password field.
<input type="email">: Creates a text field for email addresses.
<input type="number">: Creates a text field for numerical input.
<input type="checkbox">: Creates a checkbox.
<input type="radio">: Creates a radio button.
<select>: Creates a dropdown list.

Form Validation 💡

To ensure the user enters valid data, we can add validation attributes to our form fields. For example:

html

<input type="email" required pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" placeholder="Enter your email">

💡 Pro Tip: Use the required attribute to make a field mandatory. The pattern attribute can be used to specify a regular expression for validating the input.

Form Handling ✅

Once the form is submitted, the data is sent to the server for processing. In a real-world project, this would typically be handled by a server-side language like PHP, Node.js, or Python.

For this lesson, let's create a simple form that collects a user's name and email and displays a success message when submitted.

HTML Code

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Example</title>
</head>
<body>
  <h1>Contact Us</h1>
  <form id="contact-form">
    <label for="name">Name:</label>
    <input type="text" id="name" required><br>

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

    <input type="submit" value="Send">
  </form>

  <div id="success-message" style="display: none;">
    Thank you for your message! We will get back to you soon.
  </div>

  <script src="contact-form.js"></script>
</body>
</html>

JavaScript Code (contact-form.js)

javascript

document.getElementById('contact-form').addEventListener('submit', function(e) {
  e.preventDefault();

  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;

  // Check if the form has valid data
  if (name && email) {
    document.getElementById('success-message').style.display = 'block';
  }
});

With this JavaScript, when the form is submitted, it prevents the default form submission action, grabs the user's name and email, and checks if both fields have valid data. If they do, it displays the success message.

Quiz

Happy coding, and don't forget to check out our other HTML tutorials at CodeYourCraft! 🤖🎓