Gain a broader understanding of the different form helper methods that are available for outputting the different types of form fields. Learn about text_field, password_field, text_area, hidden_field, radio_button, check_box, file_field, and label.
- View Offline
- [Teacher] We saw the basics of working with forms back when we were working with CRUD. At the time, we kept things very simple. But now we're ready to dive in deeper, and we're gonna start by learning about the other helpers that Rails provides to make working with forms easier. Form helpers come in three different styles. I'm gonna refer to them as tag style, object aware style, and form builder style. The first of these, the example I have is text_field_tag. This is gonna create the simplest and most flexible version of an HTML text input tag. It isn't going to be object aware, so we're going to have to provide the attributes and the values exactly like we want them to appear when it outputs to HTML.
The only real advantage of using this tag is that we're able to write Ruby code instead of writing a basic HTML tag. A simple text_field_tag has its place. For example, this is what you would use most of the time if you were creating a search box on a page. It's not connected to any object, it's just a simple text input with a value that we wanna send to the controller. The second example, text_field, is object aware. It knows that the text input is related to the value of the subject name attribute, and it pre-populates the field with the attributes value.
In the first example, we have to explicitly put that value there. In the second example, it has the object and it can go and retrieve the value on its own. The third example is just the form builder version of text_field. It functions exactly the same. The difference is that it saves us from typing subject over and over again in every form helper, because we can just use the f to refer to the subject each and every time. This is the version that we used earlier. Most of the time, you'll wanna use one of the last two helpers because both of those are object aware, especially if your form is related to an object or a resource.
Rails also includes helpers for other types of input. We've already seen text_field, we have password_field, text_area, hidden_field, there's radio_button, check_box, file_field, and label. And if you remember how we had text_field, and then we had a more generic version called text_field_tag, each one of these helpers also has a counterpart that ends in _tag. These versions are the ones that use an object in order to set their values, the other ones, you would have to provide the values yourself.
These are the ones that you'll use the most often, though. I'm not gonna spend a lot of time on the HTML mechanics of these, you probably already know them or you can look them up if you need to know more about how they work. Instead, let me demonstrate how you would use them in Rails using a made-up form. So here I have a very long form, I've called it form_for(@subject, but really, it could be any object. This is a made-up form, and I'm intentionally trying to use all of those different helper types. So you can see at the top, I've got one that's label, and then I've got text_field(:name.
Notice that the label(:name) and text_field(:name) are related. The first one's gonna give me an HTML label, which is attached to the name, so typically, you would have a label before you would have each one of your fields. While that may seem like overkill to let Ruby on Rails generate the label for you, it's actually smart because then Rails has the opportunity to modify that label if there are errors on the field, and it can actually make changes to the label based on whether or not that field has errors. We'll see that later when we talk about errors. Next, I've got an example of a text_field, passing in a couple of attributes to that as well, and then I've got a password_field.
The main difference between a text_field and a password_field is that you can't see the text that you type. It's hidden as you're typing. And then we have a hidden_field. This is a field that is in the form, and it's in the form data. If we view the source code, we could see it, but it's not visible to the user. Next, we have text_area, that's gonna be a box that we can enter large amounts of text in. You can either specify the size by giving it a geometry string, or you can specify the columns and the rows separately. Next, we have radio_button. I have a radio_button here for content_type.
Notice that I have more than one. You're gonna wanna have one for each one of your radio_button options. So this will be a set of radio_buttons, all of them will send a value for content_type, so only one of them can be true. It's either going to be a radio_buttton that you select for text or for HTML. Next, I have check_box, and in the context that I've used it here, it's good if you have it used with a boolean. The attribute visible is either gonna be true or false, so the checkbox will either be checked or not. One important note, though. The HTML spec says that an unchecked checkbox sends no data, as in, it won't even be included in the form parameters.
That's a problem if you have an attribute that's set to true, and you want to uncheck it on the form. Because when you submit the form, and you read in the form parameters, you won't be able to tell if the checkbox is unchecked. It won't be included in the data. When you use the check_box helper, it simultaneously creates a hidden field for this checkbox with a value of zero, or false. If the box is checked, the form will send the checkbox value and override that hidden field. But if the box is not checked, that hidden field value will still be sent.
And that way, in your controller, you'll have the parameter showing the checkbox has now been unchecked. It's a neat trick. And then last, I've got file_field. That allows you to pick a file from your hard drive to upload. Now if we're going to use file_field, we also need to have multipart true declared in our form. I've put that up at the top just to demonstrate how that works. You have to have multipart true when you create the form. However, form_for is smart enough to recognize that you're using file_field further down, and you actually don't have to specify it.
It was smart enough to realize that we're going to need multipart true, and to add it on its own. You would only need to specify it in certain rare cases. There are already a few places in our project where we can add some of these helpers. Let's try adding them now. The first place that we'll go is into our views, into our subjects, and in our subjects form, we have visible, and right now visible is a text_field. And that's not very nice to have a text_field that says true or false in it, it's gonna be a boolean, so this is a perfect place for us to use check_box.
Notice it's check underscore box, not just check box all thrown together. check_box(:visible). We can do the same thing on our pages form, go to pages, form, and here we have visible, and instead of text_field, let's make that check_box. And we don't have to provide any kind of value or anything after that because it already is going to display the value that the object has. It knows about that, it's object aware. And then last of all, let's go to sections, we can do the same thing for this one, check_box, and we can also add a couple of others here.
We have content type, and we were using text_field for that, but I'm thinking that we're gonna pick between several different content types, so let's use exactly what we saw in the last example, content type, we'll make it a radio_button, and the value of the first one is going to be text. Now when we're using radio_button, that's just the button that we've created there, the button and its value. The text that we wanna display, we have to put right after it. So here I've got text. And let's do another one, let's do this one as HTML, and the text that the page will display is also HTML.
Scroll down a bit, and you can see we've got our content. Content is presumably going to be a large block of content, and we wouldn't wanna use text_field for that. It's much better to use text_area, and instead of just using the defaults for that, let's set its size as being 40x10. Okay, so let's save it, and let's go in and try them out. Make sure that we launch our rails server from the root of our application, we'll go into FireFox, and I'm already on my All Subjects page. Once it loads, let's go to Add New Subject, there we go, New Subject, and you see now we have a checkbox for visible.
Let's try it, let's click Visible, Create Subject, look at that, it's visible now. Let's edit this Default subject again, let's give it a position of, let's say, 6, so it'll come further down the list, make it not visible, Update Subject, Back to List, and here we go. Now it's down to 6 and it's not visible. Let's go and take a look at sections. Sections by itself. Here's our list of sections, we have Section One. Let's add a new section, and we can see all the different elements here. Now we have Visible, we have our content type, and we have a large text area that we can type in.
These aren't the only form text helpers that are available to you. In the next movie, we'll talk about another important one.
- Creating and configuring a new Ruby on Rails project
- Generating controllers and views
- Handling server requests
- Using different types of routes
- Rendering and viewing templates
- Generating migrations and models
- Creating, updating, and deleting records
- Finding records with queries
- Understanding relationship types
- Writing controllers for CRUD
- Working with layouts and helpers
- Managing application assets
- Building forms
- Validating data
- Authenticating users