Responsive Forms Exercise

[00:00:00]
>> Jen Kramer: All right, we have one final exercise here and that is we're moving on to forms. Okay, and so here we have forms at two dimensions. This is the form that we're going to have stacked on top of each other like this. This is the form at extra large, large, and medium dimensions, it's gonna be some layout like this, okay?

[00:00:23]
So in other words, we have a column mover on the side. Again, it's very similar to our inside page layout. We have a form mover here on the other side. And where you are starting is actually the form's all coded. The form's all coded here, but we've done what people often do these days when laying out forms.

[00:00:48]
They lay them out basically for mobile. So we have your name on top of the label, right? Because if it gets really, really difficult to put your name and then the blank right next to it and have everything line up so nicely, doesn't it? Yeah, it gets to be a real pain in the neck, okay?

[00:01:05]
So this is all beautifully lined up here for your mobile layout. What you are going to do is apply everything that you've learned today to this form, okay? So you're gonna have to go through here. You're gonna have to read this code. And you're gonna have to think about how you can go back to that cool layout formula that we came up with and maybe apply it here.

[00:01:29]
So what you see on this page, to make the forms, so you have your label next to your form link, okay? So how might you think about this particular problem? What is one really key thing to think about when you start putting things on rows like that?
>> Jen Kramer: I've been saying it all day, where is the flex container, where is the flex item?

[00:02:00]
Where are the parents, where are the children, right, okay? So for example, here, if we're looking at your name and you want that on one side, right? And you want the field that goes with it, this input type with the ID of name, you want it going on the other side.

[00:02:18]
Those are gonna be what? Flex containers or flex items?
>> Speaker 2: Flex items.
>> Jen Kramer: Flex items, right? Okay, so somehow we have to find a container for that.
>> Jen Kramer: Make sense? So we may need to change this HTML a little bit, to put these things next to each other.

[00:02:37]
The other thing you might wanna think about is as you start looking down here where we have a whole bunch of radio buttons. We want the radio button right near whatever it is that actually labels it, yeah, okay? So how are we gonna set that up? It's a whole group of things together that may actually wind up being a flex item.

[00:02:58]
Hint, hint, hint, hint, okay? So you may have to think about how you're gonna change around your HTML here first to apply to the form layout.