HTML Forms

We've set up a route where browsers can request an HTML form to create a new 0:00 wiki page. 0:04 Now we just need to go into our new.erb template and set up that form. 0:05 Let's get rid of this placeholder text. 0:11 Now we code a simplified version of the form first and then go back and 0:13 improve on it. 0:16 We'll start with the form element which wraps all other elements within the form. 0:18 Now we need a form input for the Wiki pages title. 0:23 This will be a text field. 0:26 So it will create an input element and will set its type to text. 0:29 And we'll set the name attribute to title. 0:34 The input name becomes the name of a parameter to hold the input 0:39 contents which will be passed back to our app. 0:42 The user will need a button to click to submit the form, too. 0:45 So add another input element and 0:49 set its type to submit, and that will create a button for us. 0:51 Since we're just editing the erb template file and 0:57 not a Ruby code, we don't have to restart the app. 0:59 We can just reload our browser preview and we'll see our simplified form. 1:02 We can fill in the text field and click Submit and the form will be submitted. 1:06 Nothing actually happens with the data right now though, we'll fix that shortly. 1:10 This is a complete HTML form, but it's so simple that it's not very useful. 1:15 There's only one form field, and it's not labeled, 1:19 so users can't tell what they should enter. 1:22 It will also be hard to apply CSS styling to make the form look pretty later. 1:24 So let's go back and add some code to improve on this. 1:28 We'll start by adding a heading at the top of the page that indicates what this 1:32 form does. 1:35 It's a form to a new page. 1:37 We're going to want to apply CSS styles to the form later. 1:41 So we'll put it inside the document division or 1:44 div element to make styling easier later. 1:46 We'll set up our form within the div as before we need to 1:50 form elements wrap all the other components of the form. 1:53 A field set element groups several form components together. 1:55 In this case we're going to use it to group a label in a text field together. 2:01 A label element tells users what a form input does, 2:05 this is going to be a label for the title feel so we're going to set the for 2:08 attribute to title. 2:12 If the for attribute matches the ID attribute of a form input, 2:17 that input will be activated when the user clicks on that label. 2:21 And the label element content will be the text that's displayed to the user. 2:24 So lets set that to title. 2:28 Now let's add an import for the Wiki page title just like before. 2:30 Will set the type attribute to text and again the name answer B 2:34 will be the name of the parameter used when the form is submitted. 2:39 So we'll set that to title. 2:42 The ID attribute needs to match the for attribute in the preceding label. 2:48 So we'll set that also to title. 2:53 The values of the name and ID attributes don't have to be identical, but 2:56 we've opted to make them identical here. 3:01 The next thing we need on the form is the larger text field for 3:04 the Wiki page content. 3:06 We'll place it within another field set element to tie the field and 3:08 its label together. 3:12 Now let's add a label for the field, the field's ID is going to be content so 3:15 that's what will set the for attribute to. 3:20 And as before the text of the element itself is what will be displayed to 3:23 the user and so will set that to content. 3:28 Now we'll add the content field itself, 3:30 there is going to be more text in the page content than there is in the title so 3:33 we use the text area elements instead of a text input. 3:36 A text area has rows and columns attributes that specify how tall and 3:40 how wide it should be. 3:45 So will set it to ten rows and 50 columns, 3:46 just like the input element, 3:51 text area has a name attribute. 3:55 That will be used as the name of the parameter when the form is submitted. 4:00 So we'll set that content. 4:03 And we'll set the ID attribute to content as well so that it matches the labels for 4:05 attribute. 4:10 As before will need a button to submit the form so 4:12 we'll add another input element with the type of submit. 4:14 Lastly, we'd like a link back to the welcome page if users decide they'd rather 4:21 not spent the form, we'll add an anchor element 4:24 With its href attribute, set to the root path. 4:29 We'll give it text of back to index. 4:35 Be sure to save that when you're done. 4:39 And now let's refresh our preview window, and check out the updated form. 4:40 We can enter a title in the title field and 4:45 lots of page content in the content field. 4:48 Notice that we can also click on the labels and 4:51 have the cursor move to the matching field. 4:54 And when we click on the Submit button the browser sends a request submitting 5:00 the form data. 5:04 But we're not set up to handle that submission right now 5:06 which means our form data is simply disappearing. 5:08 Those form parameters are also being added to the browser URL which looks awkward. 5:11 We'll handle that next. 5:16