Forms

Working with forms is a significant part of many web applications, and Svelte offers ways to handle form inputs in a manageable way. This chapter will outline how you can manage form data, validating the inputs, and submitting the forms in a Svelte application, all while composing our form inside a movie review application.

Introduction to Svelte Forms

The simplest type of form in Svelte is one that uses two-way binding to keep track of the input fields value. Let's begin with a straightforward example where we will design a form for a user to submit a review for a movie named 'Interstellar'.

The [HTML](https://stackbay.org/modules/learn-html-and-css) property for storing the value of the user’s input is the value property. Consider a single line text input:
<script>
  let review = '';
</script>

<form>
  <label for="review">Movie Review:</label>
  <input id="review" type="text" bind:value={review}>
</form>

In this example, we are binding the 'review' input to the 'review' variable in the script. Whenever a user types into the input field, the variable within the script block updates dynamically.

Complex Forms

However, most forms are not as simple as one field. As we are creating a movie review platform, it should include multiple fields, such as reviewer's name, the movie title, and the written review. Here's an example of how we would structure this:

<script>
  let title = '';
  let name = '';
  let review = '';
</script>

<form>
  <label for="title">Movie Title:</label>
  <input id="title" type="text" bind:value={title}>
  <label for="name">Name:</label>
  <input id="name" type="text" bind:value={name}>
  <label for="review">Movie Review:</label>
  <input id="review" type="text" bind:value={review}>
</form>

Validating Form Inputs

In many cases, we would want to validate the user's input to ensure that the data entered is acceptable. For instance, we might want to ensure that the reviewer's name is present, the movie title is at least three characters long, and the review is not empty.

<script>
  let title = '';
  let name = '';
  let review = '';

  function validateForm() {
    if (name.length > 0 && title.length > 2 && review.length > 0) {
      // form is valid
      return true;
    } else {
      // form is not valid
      return false;
    }
  }
</script>

<form on:submit|preventDefault={validateForm}>
  <label for="title">Movie Title:</label>
  <input id="title" type="text" bind:value={title}>
  <label for="name">Name:</label>
  <input id="name" type="text" bind:value={name}>
  <label for="review">Movie Review:</label>
  <input id="review" type="text" bind:value={review}>
  <button type="submit">Submit</button>
</form>

In this script, we prevent the form from being submitted by default when the submit event triggers, then we validate the form manually.

Handling Form Submission

Once our validation checks pass, we likely want to take some form of action. Perhaps we want to POST data to an API, or navigate the user to a new page with their review data.

<script>
  let title = '';
  let name = '';
  let review = '';

  function validateForm() {
    if (name.length > 0 && title.length > 2 && review.length > 0) {
      // form is valid
      submitForm();
    } else {
      // form is not valid
    }
  }
  
  function submitForm() {
    const reviewData = {title, name, review};
    // Post reviewData to an API
  }
</script>

<form on:submit|preventDefault={validateForm}>
  <label for="title">Movie Title:</label>
  <input id="title" type="text" bind:value={title}>
  <label for="name">Reviewer's Name:</label>
  <input id="name" type="text" bind:value={name}>
  <label for="review">Movie Review:</label>
  <input id="review" type="text" bind:value={review}>
  <button type="submit">Submit</button>
</form>

Our validateForm function now calls a submitForm function when input data passes checks. This function formats our form data into an object which we can send to our API or handle as needed.

Conclusion

In this chapter, you learned how to create, validate, and submit forms in Svelte. There are various ways to handle form submission in Svelte, and you should choose the method that works best for your use case.

Remember, the main goal is always to enhance the user experience by providing quick, informative feedback and keep your app secure by validating data on both the client and server side.