Input Forms

Now that we've tackled those buttons, let's turn our attention to our forms. They could use a fresh new look, as they seem a bit old-fashioned. If you take a look at the top of our Recipes, you'll find a form there.

Notice how our navbar's search field looks much more appealing? Well, we can make it all match seamlessly. To do this, let's navigate to our base.html file. Place the form at the top of our page, right below the

As you can see, there's a little word search here, so we know what this textbox is for.

Let's just take this <input class="form-control" …> and we're gonna copy this and post this here and a kind of splice these together. So we have input, type text, and class form control; all we need to do is just copy and paste name and title over name="title" id="title" and we can completely get rid of this input. Go here and placeholder we want to have Enter Title instead. And area-label="" we have also enter area-label="Title". Let's see if this is just working completely.

See that little word 'search' here? It gives us a clue about the purpose of this textbox.

Now, let's do a bit of tweaking. Take this class="form-control" – copy it and paste it here. Merge these together. So, we'll have an input field with the type "text" and the class "form-control". Also, let's update the placeholder to say "Enter Title". And for "area-label", we'll change it to "Title".

Let's check if everything is working as it should.

And as you can see, it works.

Since the description field is typically longer, it's time to move beyond regular text inputs. Instead, we're going to embrace a textarea, which provides a larger space for input text. To find the right one, do a quick Google search for 'bootstrap forms'. Scroll down and look for the sizable textarea with a resizable window – you can't miss it.

Let's find the peace of HTML code with this text area below.

We can have a very long recipe description. So, go over to our code and place this here.

This is for the label linking to the "description" in the input tag.

As you can see now, we have a big nice textarea here.