This course will be retired on April 30, 2018. We recommend "Rails Routes and Resources" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
The form for creating new todo lists is one of the most important forms in the app. In order for styling to be applied, it's important to make sure that proper markup is in place.
-
0:00
The next view that I'd like to take a look at is the New Todo List form.
-
0:05
So here, we can create new To do lists.
-
0:09
And you'll see that we already have some of the default styling that we applied
-
0:13
previously, but
-
0:15
we should add some new markup here just to clean up this particular form.
-
0:21
Now as I mentioned previously, Jason is gonna be using something called
-
0:26
form builder, to extract the templates that I'm writing here.
-
0:30
So we're actually going to leave the edit view for this alone,
-
0:35
along with the new item, and the edit item views.
-
0:40
So we're just gonna do todo_lists/new.
-
0:43
So let's switch over to our text editor, open app,
-
0:47
views, to-do lists, new and
-
0:51
then let's also open the form for this.
-
0:56
Now I actually am going to leave the form partial here.
-
1:00
And, not copy this over into the new view as we've done previously.
-
1:05
We're just going to use the partial and make some adjustments here.
-
1:09
First, let's switch over to this new view and change two things.
-
1:14
First, I wanna remove this back link, down at the bottom.
-
1:18
And then, up here at the top I'd like to say add
-
1:23
a to do list, just to make it a little bit more human friendly.
-
1:31
So that looks good.
-
1:32
Let's jump over to this form partial and first,
-
1:39
I'd like to remove these wrapper divs, we don't need them.
-
1:45
And we also don't need this line break here.
-
1:50
And if we save this out, go back to our form, and refresh the page here,
-
1:57
you'll see that this now says Add a Todo List, but the label isn't too great.
-
2:04
It says title but
-
2:05
I think we can do a little bit better by saying list title to be more specific.
-
2:11
So to override this label here, just put a comma and
-
2:19
we'll say label: "List Title".
-
2:23
And I also want this to autofocus when the page loads because
-
2:27
there's only one field here so it makes sense to autofocus it.
-
2:35
And just do that and that should autofocus the field.
-
2:41
So let's save that, and you'll notice we're not focused on this right now.
-
2:45
If we refresh the page you'll notice that nothing happens and
-
2:51
that's because that should actually auto focus when we use form builder.
-
2:57
So that will come later.
-
3:00
Now we need to adjust this submit button.
-
3:03
And we're going to use some very similar markup.
-
3:06
In fact, the exact same markup as we used in the user edit view.
-
3:13
So let's open that up, and let's just copy all of this button markup right here.
-
3:22
We'll go back to our todo list form partial, and
-
3:26
replace this submit button with that markup, and
-
3:30
let's just make sure this is all indented properly.
-
3:35
There we go, and we'll save that.
-
3:40
Switch back and refresh, and as you can see, we now have these
-
3:46
nice save buttons, so we can create a new todo list.
-
3:54
And click save.
-
3:58
And, as you can see, that will create todo lists for us.
-
4:02
So, let's switch back to our terminal.
-
4:06
Do a git status just to check up on things.
-
4:08
That looks good.
-
4:10
Do a git add dot then git commit, and we'll say add
-
4:16
markup for to do list new form.
-
4:21
And then we'll do a git push and that should do it for that view.
You need to sign up for Treehouse in order to download course files.
Sign up