We've set up a route where browsers can request an HTML form to create a new

wiki page.

Now we just need to go into our new.erb template and set up that form.

Let's get rid of this placeholder text.

Now we code a simplified version of the form first and then go back and

improve on it.

We'll start with the form element which wraps all other elements within the form.

Now we need a form input for the Wiki pages title.

This will be a text field.

So it will create an input element and will set its type to text.

And we'll set the name attribute to title.

The input name becomes the name of a parameter to hold the input

contents which will be passed back to our app.

The user will need a button to click to submit the form, too.

So add another input element and

set its type to submit, and that will create a button for us.

Since we're just editing the erb template file and

not a Ruby code, we don't have to restart the app.

We can just reload our browser preview and we'll see our simplified form.

We can fill in the text field and click Submit and the form will be submitted.

Nothing actually happens with the data right now though, we'll fix that shortly.

This is a complete HTML form, but it's so simple that it's not very useful.

There's only one form field, and it's not labeled,

so users can't tell what they should enter.

It will also be hard to apply CSS styling to make the form look pretty later.

So let's go back and add some code to improve on this.

We'll start by adding a heading at the top of the page that indicates what this

form does.

It's a form to a new page.

We're going to want to apply CSS styles to the form later.

So we'll put it inside the document division or

div element to make styling easier later.

We'll set up our form within the div as before we need to

form elements wrap all the other components of the form.

A field set element groups several form components together.

In this case we're going to use it to group a label in a text field together.

A label element tells users what a form input does,

this is going to be a label for the title feel so we're going to set the for

attribute to title.

If the for attribute matches the ID attribute of a form input,

that input will be activated when the user clicks on that label.

And the label element content will be the text that's displayed to the user.

So lets set that to title.

Now let's add an import for the Wiki page title just like before.

Will set the type attribute to text and again the name answer B

will be the name of the parameter used when the form is submitted.

So we'll set that to title.

The ID attribute needs to match the for attribute in the preceding label.

So we'll set that also to title.

The values of the name and ID attributes don't have to be identical, but

we've opted to make them identical here.

The next thing we need on the form is the larger text field for

the Wiki page content.

We'll place it within another field set element to tie the field and

its label together.

Now let's add a label for the field, the field's ID is going to be content so

that's what will set the for attribute to.

And as before the text of the element itself is what will be displayed to

the user and so will set that to content.

Now we'll add the content field itself,

there is going to be more text in the page content than there is in the title so

we use the text area elements instead of a text input.

A text area has rows and columns attributes that specify how tall and

how wide it should be.

So will set it to ten rows and 50 columns,

just like the input element,

text area has a name attribute.

That will be used as the name of the parameter when the form is submitted.

So we'll set that content.

And we'll set the ID attribute to content as well so that it matches the labels for

attribute.

As before will need a button to submit the form so

we'll add another input element with the type of submit.

Lastly, we'd like a link back to the welcome page if users decide they'd rather

not spent the form, we'll add an anchor element

With its href attribute, set to the root path.

We'll give it text of back to index.

Be sure to save that when you're done.

And now let's refresh our preview window, and check out the updated form.

We can enter a title in the title field and

lots of page content in the content field.

Notice that we can also click on the labels and

have the cursor move to the matching field.

And when we click on the Submit button the browser sends a request submitting

the form data.

But we're not set up to handle that submission right now

which means our form data is simply disappearing.

Those form parameters are also being added to the browser URL which looks awkward.

We'll handle that next.