Current section: Forms 59 exercises
solution

Form

Loading solution

Transcript

00:00 Okay, let's render a form, return form, and here, let's get rid of that return right there. And inside of this, we want to have a label for the username and the username. I'm going to take off the HTML4 and the ID, just so we can see what things look like when

00:18 we don't have that. And then I'm going to have a button with the type of submit. So I explicitly set the button type, though it's not technically required, but I like having the button type explicitly set because there are a number of other types that the buttons can be, and if you're rendering buttons throughout the application, if you're not

00:38 setting the button type to button, then you could inadvertently submit a parent form that you don't know that you're rendering within or something. So yeah, I typically like to be explicit about setting my button type. And with that now, we're not quite there because if I click on the username, it's not

00:55 working and if I dive into our accessibility tools right here, then I can look at this text box, generic, and here we're not getting a name. So if I open up my voiceover right here, then I click here, edit text blank, like that's not helpful at all.

01:14 And so instead, what we're going to do is add a label. So we'll have an ID, username input, and we'll have a HTML4 username input. And now if I turn on voiceover and I click on this, we get username edit text. Awesome. Much more helpful.

01:32 And additionally, you can kind of tell whether these things are associated properly by clicking on the label and that will focus on the input. And then of course, we can always take a look at the accessibility tab of the input. And here we see the name is username. Perfect. It's exactly what I wanted. Now, of course, we could style it to make it look nice and all that stuff. Feel free to do that if you want.

01:53 But this is a basic form. If I type in a username of Kent C. Dodds and then hit submit, then I'm going to get a full page refresh with my submission in the URL, which we'll talk about in a bit. But this was the objective. Hopefully you got it. Good job.