Forms Setup

[00:00:02]
>> Jen Kramer: And if you scroll on down here to the forms portion, this is item number six forms, that is what we're doing today. And here on this webpage are all the files that you're gonna need to follow along. So go ahead and find that link there where it says download the zip of the files.

[00:00:21]
Go ahead and click that.
>> Jen Kramer: That's gonna put you onto GitHub. Look for the button here that says download, click the download button. That's gonna go ahead and download those forms files for you. Those are usually put into your downloads directory, wherever that happens to be on your computer.

[00:00:43]
Drag that to your desktop.
>> Jen Kramer: Double click on it and order to try and zip it. And you'll have everything you need to follow along today, all right? Just like we did yesterday, so click on the link for the zip file, download it,
>> Jen Kramer: Once you've downloaded it, drag it onto your desktop, unzip it, and you have all the files that are there and ready to go.

[00:01:12]
Then what we're going to do, is we're gonna go to open up our VS code.
>> Jen Kramer: And we're gonna go ahead and drag our forms folder on top of VS code.
>> Jen Kramer: And that's gonna go ahead and open up our new site and there's two folders inside of the one that you downloaded.

[00:01:35]
One is called begin and one is called end. And shockingly begin is the beginning state and end is what we're gonna be coding today. When you're all done, that's where all of those files are. So you can refer to those if you need to. So go on ahead and open up the begin folder and forms.html.

[00:01:57]
All right, so go on ahead and open up forms.html.
>> Jen Kramer: And you'll see that I have gone ahead and giving you a starting state here for your form. And we'll go ahead and put on our word wrap.
>> Jen Kramer: And we'll go on ahead and also open up forms.css.

[00:02:15]
Remember if you right click or command click, over there, on forms.css you can say open to the side and get the two columns here next to each other and then I'm going to turn off, my far left column, the explorer column, with that icon at the top. Get rid of that.

[00:02:35]
Make sure I got my word wrapping on over here on my CSS.
>> Jen Kramer: Okay. So I've given you a little bit of HTML to start with here. Okay. Just a little bit and over here on this side under CSS, we have a little bit of CSS to start us off and if you go head and just open that up and your default browser.

[00:03:03]
>> Jen Kramer: Here is our beginning form.
>> Jen Kramer: We are making an alien abduction form, kind of goes with the blog that we built yesterday. All right, so you can order up an alien abduction. All right, so as always, we're going to be following along with our notes here today.

[00:03:22]
And just as always inside of the notes for today's lesson, there's a whole bunch of stuff here that you can refer to. This is how we're gonna go about coding the form. We're gonna be putting in a lot of these different input types and so forth as we code the form.

[00:03:36]
And so if you get lost anywhere along the way, or you need additional help, you can look here to get that additional help. All right, so let's go ahead and get started here in our form.
>> Jen Kramer: One thing that's gonna be useful here to work with this code today, remember how VS code has got that closing tag thing, you start to type a tag and it puts in a closing tag.

[00:04:02]
Okay, so for Mac people go under the code menu, look at preferences, and then we're going to go to settings. For Windows people, under file, then preferences, then settings, and you'll go to the same place. So this is going to show us the settings here.
>> Jen Kramer: So under your settings, if you type in the top box on the top, you type in auto-closing tags, and you have the user settings selected, this is gonna pull up a whole list of stuff.

[00:04:31]
And at the top here, where it says HTML, it says auto-closing tags. That's where that like you type in a paragraph and it immediately puts in slash P after it, this is gonna turn that off, I think it'll make our life a little easier today, so just go on ahead and turn that off.

[00:04:47]
Later on, if you wanna change this back, you're more than welcome to do so, just go on ahead and open up your settings again, do exactly the same thing, say auto closing tags and then recheck the box, and that will re-enable that particular feature. I don't think there's a save or anything to click, just go ahead and close that tab when you're done.