Introduction

Forms are a tool that we have available to us from HTML. They handle making more intricate requests from the browser to the server. This is how we manage getting data from our users and allowing them to dynamically interact with our applications. Let's take a look aat how they're implemented.

Implementation

Here's what a simple form looks like:

<form action="books/add" method="POST">
  <input type="text" name="title" />
  <button type="submit">Submit</button>
</form>

The first piece to note is the <form> element. This is what gives us the ability to actually send HTTP requests from HTML. The <form> element has two attributes that allow us to make specific requests to specific locations in our applications. With this information, we can make specific routes in our servers that handle these specific requests.

The first of these is the action attribute. This attribute points to an endpoint in our application. In our example we're mapping to /books/add. The second of these attributes is method. This attribute specifies the type of HTTP request we're making. In our case, this is a POST request.

HTTP Requests

We're only going to concern ourselves with two HTTP requests now since that's all our MVC applications can process anyway.

1. GET - A GET request is what we use to retrieve information from our application from our server environment. We cannot make any changes to information in a GET request.
2. POST - A POST request is the type we use to actually pass information from our browser environment to our server. We can use this information to do all sorts of things, including making new objects in our application...

Form Elements

Elements must be nested inside of the <form> element to send information back to our server.

<form action="books/add" method="POST">
  <input type="text" name="title" />
  <button type="submit">Submit</button>
</form>

The first <form> element we have is an <input>. This one in particular has the type="text" which means our user is able to add text to it. There are MANY different types of inputs, all of them useful for getting unique information from your users. The next attribute to note is name="title". This is how we consume this information in our server environment. It works as a key value relationship. if we reference title in our router (or controller), we'll get whatever text is in the input element when the form is submitted.

Speaking of submitting the form, that brings us to our next and final form element, the <button>. This <button> has only one attribute, type="submit". This tells our form to submit it's data to the server at the specified location, using the specified method when the button is pressed.

Conclusion

Forms are an indispensable tool when working with full-stack web applications. Without them, all we would bbe able to do is allow our users to consume data without interacting with it. There are plenty of other form elements to explore so check out the docs.