Forms in Rails: Creating a Form

Topics Covered in This Ruby on Rails Tutorial:

Form_with, Checkboxes, Radio Buttons, & Select Boxes, Adding a Dropdown Menu, Adding a Date Selector & Submit Button

Exercise Preview

Exercise Overview

In this exercise, we'll master one of Rails' most powerful features: forms for updating models. Forms represent the critical junction where controllers, views, and model objects converge to create dynamic, data-driven applications. While HTML forms can be complex and error-prone when built manually, Rails transforms form creation into an elegant, secure process—and as you'll discover, forms tied to model objects (like our movies model) become remarkably intuitive.

Understanding Rails forms is essential for any serious web developer. Modern web applications demand sophisticated user interfaces that can handle complex data relationships, validation, and security concerns seamlessly. By the end of this exercise, you'll have the expertise to build production-ready forms that leverage Rails' built-in protections and conventions.

1. If you completed the previous exercises, you can skip the following sidebar. We strongly recommend completing the previous exercises before proceeding, as they establish the foundational knowledge and project structure you'll need. If you haven't finished them, follow the setup instructions in the sidebar below.

Getting Started

Before diving into form creation, we need to establish the proper MVC architecture. We'll start by creating a controller action that will serve our form view, then build the corresponding template. This approach follows Rails conventions and ensures our form has the proper data context it needs to function.

1. Open the Finder and navigate to Class Files > yourname-Rails Class

2. Open Terminal.

3. Type cd and a single space (do NOT press Return yet).

4. Drag the flix folder from the Finder to the Terminal window.

5. Make sure you're in Terminal and hit Return to change into the new folder.

6. Type the following to launch the server:

   rails server

7. Open a browser and navigate to localhost:3000 to verify everything is running correctly. You should see the Flix website load without errors.

8. In your code editor, open flix > app > controllers > movies_controller.rb

   Pro tip: Open the entire flix folder in your code editor for easier navigation between files—most modern editors like VS Code, Sublime Text, and Atom support this workflow.

9. Scroll to the bottom and before the final end add the following code:

   def new
         @movie = Movie.new
      end
   end

   This new action creates a fresh Movie instance that our form will use. The @movie instance variable will be accessible in our view template, providing the form builder with the context it needs to generate proper field names, validation handling, and data binding.

10. Save the file.

11. Create a new file in your code editor for our view template.

12. Type the following on the very first line:

    <h1>Add Movie</h1>

13. Save the file:
    • Into yourname-Rails Class > flix > app > views > movies
    • Name it new.html.erb

Form_with Model

Now we'll implement Rails' modern form_with helper, which represents the current best practice for form creation in Rails applications. This helper automatically handles CSRF protection, proper HTTP methods, and generates clean, semantic HTML. Unlike older form helpers, form_with provides a unified interface for both model-based and custom forms while maintaining Rails' security standards.

1. In your new.html.erb file, add the following code:

   <h1>Add Movie</h1>
   <%= form_with model: @movie do |f| %>
   
   <% end %>

   This code establishes our form foundation. The form_with helper creates a form builder object (represented by |f|) that understands our Movie model's structure, attributes, and validation rules. This intelligent form builder will generate appropriate HTML elements, handle data binding, and ensure proper form submission routing.

2. Add the title field by inserting this code between the form tags:

   <%= form_with model: @movie do |f| %>
      <p>
         <%= f.label :title %>
         <%= f.text_field :title %>
      </p>
   <% end %>

   The form builder automatically generates proper HTML attributes, including name, id, and accessibility features based on the model attribute.

3. Save the file.

4. Switch to Chrome and navigate to localhost:3000/movies/new to see your form in action.

5. Right-click inside the input field and select Inspect to examine the generated HTML code. The Developer Tools reveal exactly how Rails transforms your simple ERB code into production-ready HTML.

   Notice that Rails automatically generated a complete form structure:

   <form action="/movies" accept-charset="UTF-8" data-remote="true" method="post">

   This includes proper encoding, RESTful routing, and modern JavaScript handling.

6. Observe the hidden authenticity_token field in the generated HTML. This is Rails' built-in CSRF (Cross-Site Request Forgery) protection—a critical security feature that validates form submissions came from your application. This token is automatically generated and validated by Rails, providing enterprise-level security without additional configuration.

   The label and input elements also demonstrate Rails' attention to accessibility and semantic HTML:

   <label for="movie_title">Title</label>
   <input type="text" name="movie[title]" id="movie_title">

7. Let's expand our form with a description field. Add this code after the title field:

   <%= f.text_field :title %>
      </p>
      <p>
         <%= f.label :description %>
         <%= f.text_area :description %>
      </p>
   <% end %>

   Note Rails' consistent naming convention: multi-word HTML elements like <textarea> become text_area in Rails helpers, following Ruby's underscore convention.

8. Save and reload the page in Chrome.

9. The description field appears but looks cramped. Rails form helpers accept HTML attributes as parameters, allowing precise control over the generated elements.

10. Enhance the textarea with proper dimensions:

    <%= f.text_area :description, cols: 60, rows: 10 %>

11. Save and reload to see the improved textarea size—now properly sized for meaningful content input.

Checkboxes, Radio Buttons, & Select Boxes

Modern web applications require sophisticated input controls beyond basic text fields. Rails provides elegant helpers for checkboxes, radio buttons, and select menus that automatically handle data binding, validation states, and accessibility requirements. These form controls are essential for creating professional user interfaces that guide users through complex data entry workflows.

1. Add a checkbox for the subtitles field—perfect for boolean (true/false) values:

   <%= f.text_area :description, cols: 60, rows: 10 %>
      </p>
      <p>
         <%= f.label :has_subtitles %>
         <%= f.check_box :has_subtitles %>
      </p>

2. Save and test the checkbox functionality. Notice that clicking the label text toggles the checkbox—this is proper accessibility implementation that Rails handles automatically.

3. Now let's implement radio buttons for the placement field, which represents mutually exclusive options (In Theaters, Coming Soon, Go Now):

   <%= f.check_box :has_subtitles %>
      </p>
      <p>
         <%= f.label :placement %>
         <%= f.radio_button :placement, 'in_theaters' %>
      </p>

   Radio button syntax requires both the field name (:placement) and the specific value ('in_theaters'). The value is a string, not a symbol, as it represents data that will be stored in the database.

4. Complete the radio button group:

   <%= f.label :placement %>
      <%= f.radio_button :placement, 'in_theaters' %>
      <%= f.radio_button :placement, 'coming_soon' %>
      <%= f.radio_button :placement, 'go_now' %>

5. The radio buttons work but lack proper labels. Let's add accessible labels using Rails' label helper:

   <%= f.label :placement %>
         <%= f.radio_button :placement, 'in_theaters' %>
         <%= f.label :placement_in_theaters %>
         <%= f.radio_button :placement, 'coming_soon' %>
         <%= f.label :placement_coming_soon %>
         <%= f.radio_button :placement, 'go_now' %>
         <%= f.label :placement_go_now %>

   Rails automatically associates these labels with their corresponding radio buttons for proper accessibility.

6. Test the labels—they should properly activate their radio buttons when clicked. Now let's customize the label text to be more user-friendly:

   <%= f.label :placement_in_theaters, "In Theaters" %>
   <%= f.radio_button :placement, 'coming_soon' %>
   <%= f.label :placement_coming_soon, "Coming Soon" %>
   <%= f.radio_button :placement, 'go_now' %>
   <%= f.label :placement_go_now, "Go Now" %>

   The second parameter overrides the default label text, giving us clean, professional labels while maintaining proper HTML associations.

Adding a Dropdown Menu to the Form

Select dropdowns are ideal when users need to choose from a predefined list of options. For MPAA ratings, a dropdown provides a clean interface that prevents invalid entries while conserving screen space. Rails' select helpers offer powerful features for option generation, default values, and integration with both static lists and database records.

1. Add the basic select structure for MPAA ratings:

   <%= f.label :placement_go_now, "Go Now" %>
      </p>
      <p>
         <%= f.label :mpaa_rating %>
         <%= f.select :mpaa_rating %>
      </p>

2. Save and reload—Rails will display an error because select elements require option definitions. This error handling helps catch configuration issues early in development.

3. Define the rating options using Rails' options_for_select helper:

   <p>
      <% mpaa_ratings = options_for_select ["G", "PG", "R", "NR"] %>
      <%= f.label :mpaa_rating %>
      <%= f.select :mpaa_rating, mpaa_ratings %>
   </p>

   Note the absence of the equals sign in the first ERB tag—we're creating a variable, not outputting content to the HTML.

4. The dropdown now works, but defaults to "G". For better user experience, let's require an explicit choice:

   <%= f.select :mpaa_rating, mpaa_ratings, include_blank: true %>

   This forces users to make a conscious selection rather than accidentally submitting with a default value.

5. Improve the label appearance:

   <%= f.label :mpaa_rating, "MPAA Rating" %>

   This demonstrates Rails' flexibility in overriding default label text for better user experience.

Adding a Date-Selector Field

Date inputs are notoriously challenging in web development due to browser inconsistencies and user experience concerns. Rails' date selection helpers provide a robust, cross-browser solution that generates intuitive dropdown menus while handling complex date validation and formatting behind the scenes.

1. Add the date selector for movie release dates:

   <%= f.select :mpaa_rating, mpaa_ratings, include_blank: true %>
      </p>
      <p>
         <%= f.label :release_date %>
         <%= f.date_select :release_date %>
      </p>

   The date_select helper automatically generates three coordinated dropdown menus for comprehensive date selection.

2. Test the date selectors—they provide intuitive date selection, but let's optimize the order for better user experience:

   <%= f.date_select :release_date, order: [:month, :day, :year] %>

   This reorders the dropdowns to match common US date format expectations, improving form completion rates and reducing user confusion.

3. Save and test the improved date selector layout. The month-day-year order feels more natural for most users and follows established UI patterns.