Form

The form element is essential for collecting user input in a structured and interactive manner. By using forms, you can create a seamless experience for users to submit data, whether it’s feedback, inquiries, or other types of information.

Using the form element

Creating a form involves wrapping your input fields within the <form> tag. Here’s a simple example:

<form action="https://yourapi.example.com/action" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" placeholder="Enter your name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="Enter your email" required>

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

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

In this example, the form contains fields for a user's name, email, and message. Each field is labeled for clarity, and the form is set to submit data via a POST request to the specified action URL.

Validating form input

To ensure data quality, you can include validation attributes in your input fields, such as required or pattern. For example:

<input type="email" placeholder="Enter your email" required pattern="[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+">

In this case, the email field is marked as required and must match a basic email format pattern before submission.

Handling form submissions

Upon submission, the form data is sent to the specified action URL. You can process this data on the server side to perform various actions, such as sending emails, storing data in a database, or integrating with other services.

You can use the action and method parameters to specify the way you want to send data back.

Sending data back to your server

When using forms in conjunction with Fernand, you can send additional headers alongside your form submission. If you’ve defined headers like X-Fernand-Key in your endpoint settings, they will be included in the request. This helps maintain a secure and consistent environment for handling data.

Summary

The form element is a powerful tool for user interaction, allowing you to collect valuable input efficiently. By incorporating proper validation and handling techniques, you can enhance the user experience and ensure that the data collected meets your application's requirements.