Creating a Form

To create a form in HTML, use the form element and include various input types to collect data from the user.

Forms are used to gather information from visitors to your website. These can include contact forms, search forms, or login forms. In HTML, a form acts as a container for all the elements that the user interacts with before submitting the data to a server.

The Basic Structure

A standard form requires three main parts: the form tag, at least one input for data capture, and a submit button. You also need to define where the data goes using the action attribute:

Key Attributes

action: Specifies the URL of the page that will process the form data when it is submitted.
method: Defines the HTTP method used to send the data. The most common values are get (for non-sensitive data like searches) and post (for sensitive data like passwords).

Labels and Accessibility

While it's not required for the form to work, it's good practice to use the label element for each input field. By using the for attribute on the label and a matching id on the input, you link them together. This makes the form easier to use for everyone, including those using screen readers.

Full Working Example

Here is a basic form that collects a name and an email address:

<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Form Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 20px;
  }
  form {
    background: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-width: 300px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  label {
    display: block;
    margin-bottom: 5px;
  }
  input[type="text"],
  input[type="email"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
  }
  input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  input[type="submit"]:hover {
    background-color: #45a049;
  }
</style>
</head>
<body>

<form action="/html/tags/html_form_tag.cfm" method="get">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <input type="submit" value="Submit">
</form>

</body>
</html>

View Output Full Screen Preview

Tip: The `name` Attribute

While the id is used for styling and link labels, the name attribute is what the server uses to identify the data. If you forget to include a name on an input, its value will not be sent when the form is submitted.