HTML form to form_with in Rails

Let’s talk about forms!

Why are they important?

Forms are one of the main points of interaction between a web site or application and a user. Users can send data to the web site through forms and often the data redirects to the webserver.

Users need forms to log into the web applications, to signup and to even pay money, e-commerce uses it to collect credit card data, in short forms are used everywhere, which makes it extremely important!

Here are the three types of forms we’ll be focusing on today:

• HTML form
• form_tag
• form_for
• form_with

An HTML form has two attributes, action and method. The action attribute holds the actual server file name which handles the data from the form. The method attributes define how the form data will send to the defined URL. GET and POST are most frequently used, these are special HTML verbs, which carries over the data to the server.

Next, the most common form fields we often encounter are the input tag. The type attribute is set to text by default but if required different types of form fields such as dropdown, radio, password, checkbox and/or buttons can be assigned to the type attribute.

Another form field is the textarea, it’s for entering larger chunks of texts. It’s important that each of these form fields includes a name. The name helps to process the form in the server. The file in the action attribute knows which field the user is referring to based on the name we give for each field. The form can also include a value attribute, this is really helpful if you wanna pre-populate the space with some default value.

The form_tag, form_for, and form_with all serve the same propose as this HTML form but in a much simpler way possible. These forms fit the rails conventions in terms of URLs and parameters.

Here is an example of form_tag:

The form_tag is an ActionView helper method that simply creates a form. It does not have any underlying model. In order to add fields to form_tag, we’ve to add form element tags such as text_field_tag, number_field_tag, submit_tag, etc. The form_tag cannot assume what the form is trying to do, the developers are responsible to specify what the form expected to do (send a POST request or PATCH request). This can also be a plus point because it gives you the flexibility to specify your own routing.

Here is an example of form_for:

The form_for uses a form builder. It is an object that represents the form, knows about the instance passed to form and can intelligently call and re-populate data out of the objects. The form_for is connected to an Active Record model, meaning it creates a form for a model object.

Basically, we use form_tag when we do not have a model and use form_for when we do have a model.

This is not the case for form_with! The form_with use form builder all the time.

Example of a form_with with a model :

Example of a form without a model :

Clearly, the syntax for both with or without models is similar. The only difference is specifying if form_with is using a model or a URL for building the form based on if the form has a model or not.