HTML forms

An HTML form is a section of a webpage that allows users to input data that is sent to a server for processing. Forms are a fundamental part of web development, enabling functionalities like user registration, data submission, file uploads, and more.

Basic Structure of a Form

A basic HTML form typically includes the <form> element, which acts as a container for various input elements such as text fields, checkboxes, radio buttons, and submit buttons. Deeper details of individual form elements and their attributes are at HTTP form elements in detail.

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
 
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
 
  <input type="submit" value="Submit">
</form>

• action: Specifies the URL where the form data will be sent when the form is submitted.
• method: Defines the HTTP method to be used when submitting the form. Common values are GET and POST.

Common Input Types

HTML forms can include various input types, each suited for different data inputs.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
 
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
 
  <label for="age">Age:</label>
  <input type="number" id="age" name="age">
 
  <label for="color">Favorite Color:</label>
  <input type="color" id="color" name="color">
 
  <label for="file">Upload File:</label>
  <input type="file" id="file" name="file">
 
  <input type="submit" value="Submit">
</form>

Form Submission Methods

The method attribute of the form determines how the data is sent to the server.

• GET: Appends form data to the URL, making it visible in the browser’s address bar. Suitable for non-sensitive data.

<form action="/search" method="get">
	<label for="query">Search:</label>
	<input type="text" id="query" name="q">
	<input type="submit" value="Search">
</form>

• POST: Sends form data as part of the HTTP request body. Preferred for sensitive or large amounts of data.

<form action="/submit" method="post">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="Submit">
</form>

Why POST Method is Used as Base for Other HTTP Methods

==HTML forms natively support only the GET and POST methods==. However, web applications often require other HTTP methods like PUT, PATCH, and DELETE for operations like updating or deleting data. These methods are not directly supported by HTML forms.

Using POST for Other Methods

To overcome this limitation, forms use the POST method as a base, because POST is the basic method that allows sending data as a part of the body. For the other methods, server-side logic is implemented to interpret the request as PUT, PATCH, or DELETE using the data sent through the underlying POST method.

For example:

<form id="myForm" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
 
  <label for="submit">Action:</label>
  <input id="put" type="submit" value="Update" formaction="/update-resource">
</form>

• Form Submission: The form submits data using POST.
• Server Interpretation: The server interprets the request and processes it as a PUT request based on the URL or additional parameters.

Check formaction details below on how POST becomes other methods through it.

Advanced Form Features

formaction Attribute

The formaction attribute allows different submit buttons to direct the form data to different URLs.

<form method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
 
  <input type="submit" value="Login" formaction="/login">
  <input type="submit" value="Register" formaction="/register">
</form>

Hidden Inputs

Hidden inputs can be used to pass additional data that is not visible to the user.

<form action="/submit" method="post">
  <input type="hidden" name="csrf_token" value="a1b2c3d4">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Submit">
</form>

Handling File Uploads

To handle file uploads, the form’s enctype attribute must be set to multipart/form-data.

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">Choose file:</label>
  <input type="file" id="file" name="file">
  <input type="submit" value="Upload">
</form>

Forms and APIs

Submitting Forms to APIs

Forms can be used to send data to APIs. The form data is submitted to the API endpoint specified in the action attribute.

<form action="https://api.example.com/submit-data" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>

Using JavaScript for API Integration

JavaScript can be used to submit form data to APIs without reloading the page, providing a more dynamic user experience.

<form id="myForm">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Submit">
</form>
 
<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
 
    const formData = new FormData(form);
    const response = await fetch('https://api.example.com/submit-data', {
      method: 'POST',
      body: formData
    });
 
    const result = await response.json();
    console.log(result);
  });
</script>

Common Issues and Troubleshooting

Handling Undefined or Missing Data

When working with form data, it’s common to encounter situations where certain data may be undefined or missing.

<section id="cards" class="cards">
  <% if (locals.data) { %>
    <article class="card-item">
      <h2 class="card-activity"><%= locals.data.activity %></h2>
    </article>
  <% } else { %>
    <div>No activity found.</div>
  <% } %>
</section>

Preventing Common Errors

Ensuring that all necessary data is present before accessing it can prevent errors like Cannot read properties of undefined.

<form id="myForm" method="post">
  <input type="text" id="idInput" name="id">
  <input type="submit" value="Submit">
</form>
 
<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    try {
      const formData = new FormData(form);
      const response = await fetch('/submit', {
        method: 'POST',
        body: formData
      });
      const result = await response.json();
      console.log(result);
    } catch (error) {
      console.error('An error occurred:', error);
    }
  });
</script>