WTF: What the Form?

Nick Taylor 0:00
Hey, folks, welcome back to CFE.dev. My name is Nick Taylor, your host. For today, we’re back with to full to stack. Make sure we’re live we are. That’s good. Cool, cool. Cool. All right. Yeah. Thanks for joining us today. Today I’m going to be talking about forms. Mainly, we’re not going to cover everything, but I’m going to try and cover a bunch of stuff. We’re going to just, you know, go over, like the HTML web form itself, different ways you can access it, kind of what goes into it, and then yeah, we’ll kind of delve into some stuff there. I’m just gonna pull up my notes here that we got for today’s session. Of course, I can’t find them. But that’s all good. Let me just look for forms that ever go. I’ve got my notes. Awesome. Cool. Um, yeah. So let’s just kind of get started here. I’m gonna just go ahead and share my screen. Give me two seconds here. Still pretty fresh with stream yard, but you know, it’s all good. Just gotta got it in the wrong mode here. Cool. All right. Let’s switch over to the here. And I’m gonna go ahead and present. Just share screen. And let’s do an entire screen screen. One. Yeah, there we go. Okay, cool. All right, everybody should be able to see that. I’m just gonna head over to the comments there. Okay, cool. Cool. Nothing going on there yet. Alright. So let’s get started here. Alright, I’ve got Deb to open, which is good. Okay, let’s come to VS code. Close my work here. It’s been a busy day. Alright. Close that folder. Okay, and we’re gonna just create a new one here. So I’m just gonna go to my dev folder. Oops. There we go, and streams, I believe. So let’s make there and then we’ll say 2 full 2 stack forms. And that’s that. And then let’s do a git init. There we go. Let’s clear that. Zoom in a bit here. And let’s just open up VS code in that particular folder that I’m working in. Alright, so we got nothing in here right now. That’s all good. Okay, screen size looks pretty good. All right. All right.

Nick Taylor 3:26
So we’re going to create a new file here. And we’re not going to be working with a framework or anything today. And I’m just going to be doing just write HTML here with some vanilla JavaScript. So to create a index dot HTML, I’m just going to save that and just going to use if you’re not familiar, the name is escaping me. But if you use Emmet there is. So if you just put an exclamation mark and tab in VS code, you get a kind of like a boilerplate for HTML file. And there you go. Cool. So we’re gonna start off by creating a form. And so let’s just do this. And I’m going to kind of keep everything right in here. So modern ways you wouldn’t be doing this but let’s just do this for now. Order to pixels, black shirt. Have our script in here. index.js Yeah, we I guess we could do that. And we’ll save that. I’m going to start live server. Live server, give me another window. Let me get that out. Over Here. Where did you go? Okay, I just lost my love server window. There we go. Okay, there’s a blank line here for the form. We’re going to zoom this in. Alright, that’s all good. Let’s just see if folks are the tweet go out. Yes, it did. All right, cool. Just paranoid about stuff not going up. All right. So we got a form here right now. And you know what I’ll do. Maybe I’ll just put these side by side. So let’s just bring this over, like this, this and I’ll zoom this in. Actually, let’s do half half. All right, and let’s just close the terminal for now, just so we have some more real estate. This down one could change the layout to make the code bigger kit? Has that that okay, Brian. I’ll just take myself out of the picture. For now. We’ll just get…ok that seems to be bigger. I’ll zoom the page a bit more.

Nick Taylor 6:20
Alright, so we got a form here. And let’s just, you know, we’re going to Okay, yeah, I can be in the bottom corner. Yeah, sure. There we go. Does that put me in there? There we go. I’m back.

Nick Taylor 6:34
Okay, cool. So let’s just put some stuff in the form. And this isn’t going to be about accessibility as well and stuff. But these are things that you should think about. So I’ve got copilot here helping me out here. So we’ve got, it’s got a label, and then I could do like, input type equals x. And it have that if I just save that. Okay. And that’s, we’re just gonna fix the CSS a bit here. And you know, I don’t need the border anymore. Okay, cool. Um, yeah, exactly. This is exactly what I want copilot. Not centered, though. All right. Cool. Copilot is definitely handy. Sometimes it gets in your way when you’re trying to demo stuff. But yeah. And if folks still need to see things a little bigger, just let me know. I’m looking at it on the backstage on stream yard and seems pretty good. Okay, so we’ve got some stuff here. And, you know, so we want to link the label to it. So use the for attribute. And then like, we’re going to add ID name here, there’s one way you can do it. You could also have the input in the label, and it would be associated. But this is, this is nice, because it as soon as you see, you can’t tell that I’m clicking on the name, label. But when I click on it, it actually gives focus to the name text input. All right, well, we’re just going to put a few things in the form. And then we’re going to talk a little more about forms here. So we can put other stuff in here and let’s just do not email, but let’s do Sure, why not email? Sure. Cool. And then there you go. Alright, cool. We got a couple things here. Now. All right, we’re all set up. I guess we can talk a bit about first about maybe we could do some rudimentary stuff like form validation. So you could add a required here. This is native browser stuff. So now if I submit it, no, I don’t want my password here. Let’s put in button. Yes, thank you. Yeah, so we’re getting some stuff here. You know, this is this is browser validation built in. There’s other things you can do here. So like, we’ll touch on it. And I’m just gonna pull up my notes for a second here.

Nick Taylor 9:32
And this is a live stream where I’m just live coding. If you have questions or comments, just feel free to drop them in the chat. So we’ve got a bunch of things that can go in a forum, we’ve got text inputs, we’ve got type email, which is a different type. So for example, if I just type in some nonsense here and submit it, Okay, I gotta fill up this field first, but let’s just do Next, and then submit, it’s gonna say, please include an ad in the email address. So right away out of the box, you get a lot of validation. So you could say like, Nick, get Mickey t.co, why am I on caps but.co. And then I could submit that, and everything goes fine. We’re not submitting this anywhere right now. But these are just showing some of the rudimentary things that you can put in a form, including out of the box validation. That just comes with the browser. It should be noted, though, that this validation is only client side, even though you’re not using JavaScript, per se, it’s still a good idea to valet all the input that you get on the server side, whenever we, when you get to that part, I just kind of wanted to go over a few other types here. So let’s do another one, let’s just do URL. Here, say website. And I’m going to save this here. And we’ll just keep it in line with the others. So I’m going to fill out my name again, make Miki t.co. And then I’m going to submit this and what will make this required as well. Make them all required for now. And I’m just gonna save that. And of course, gotta type again.

Nick Taylor 11:38
And so when I go to first submit this, it’s gonna say it’s required, that’s great. And then I’m like, Okay, let’s go google.com. Or, I’ll put my own website, I’m gonna go submit, let’s go, hey, please enter in a URL. So it’s asking me to put a valid URL. And again, these are things that are native in the browser, they don’t look as nice. But these are things you can put in place. But as I mentioned previously, it’s always a good idea to, you know, make sure you validate these things on the server side. All right. Cool, cool, cool. Okay, so we’ve got all this form data here. Now, let’s just do. And again, we’re not using any frameworks here. So there are inline events, you can do, like on submit, or on a button you can do on click, but typically, you don’t want to do those. So and the main reason being is you can only add one event. And so like, for example, you could have, you could add many event listeners to something. So that’s what we’re gonna go ahead and do. And, you know, I’m just gonna keep it all in the, in this one file, I’m not even going to bother creating other things here. So what you’re gonna see here is, let’s, it’s doing exactly what I wanted to do. Okay, cool. Cool. So let’s just do this here. So the first thing is when the page loads, now, I’ll just save this, it’s going to refresh. We’re going to add an event listener. So if if you’re not familiar with event listeners, I’ll just add this to the chat. All right. Cool. Let’s drop that in here. These are things that typically like if you’re working in a framework, so say, for example, react, you’ll have like an on click on a button. What’s that that’s actually doing under the hood is adding an event listener, like, like, I just have here. So these are, these are things that I think are important to understand. I’m still a firm believer of just build something. So like whether you learn the fundamentals right away or framework, I don’t, I personally don’t think it matters, eventually, you’re going to need to understand the fundamentals. So but as long as you can start building something, I think that’s what’s more important. And you’ll start to understand stuff as you go along.

Nick Taylor 14:10
So let’s look at here now. So we got access to the form, so we can access it that way through just a query selector. I’m going to open up the dev tools here. And I’m just going to bring this to the Center for a minute. And I will zoom in the dev tools. So okay, let’s come here to the terminal. But we can do like we have in our code there. So we can do document dot query selector. You can say form. Got our form there. And I’ll zoom this in a bit more so folks can see. might be too much but yeah, it’s a little too much. All right, there we go. So you can see it’s our form on the page, it’s got the name, email and all that. So that’s great. That’s, that’s one way to get it. Another thing you can do is on the document, there is a collection of forms. It’s an HTML collection. So this is another way that you can actually access a form. And you can see here, there’s only the one form, and you can access it through an index. So you could do this, for example. And it’s going to get you a same reference as this query selector form. So that’s super handy. Again, this is stuff that you probably wouldn’t need to do in a framework. But I think it’s kind of neat to just show these things. Now, you could do other things, you could come here, and you could say, id equals, like, form. Or Yep, that’ll save and it’s going to refresh here. And then now I could say, like document dot query selector again. And I could get it with a B ID. So this is just the ID query selector syntax. There you go. And I’ve got it again, that’s great. But there’s another way you can actually do this. And now if we look at document dot forms, again, you’re gonna see it still has the one form in the collection there. And all of a sudden, you’re going to notice, you can access it in another way, you can actually do document dot forms, by form, or actually, this has to be in quotes. And that’s another way you can get it. You can also use the name. So a naming forms can be important if you have multiple on page. So you could say, named form, we’ll come back here, it’s going to refresh. And then if I open up this collection, again, you’re going to see, still the one form, but there’s different ways you can access it still. So you can do document that forms. Zero, like I was saying not nine works, you can do document, my dash form, works. And then you can also do M form networks. So these are just kind of some examples of how you could access a lot of this in many different ways. Now, again, if you’re in a framework, you probably won’t typically be doing these things to get access to a forum. But what we can look at now is if we come back to the code here, so I’m gonna bring this down a bit. It’s clear that now we have this JavaScript here. And we’ve got the form data and stuff. So what I’m going to do is, I’m going to put a breakpoint in here. So I’m just going to put an explicit debugger. And if you haven’t checked out the debugging stream we did last time. Definitely check that out. I don’t know if you can drop that in the chat for me, Brian. I’m a little busy at the moment, I should have probably had a link to that. Ready. Okay, cool.

Nick Taylor 18:32
So we’ve got a debugger here now, and I’m gonna fill out the information here, because it’s required. Nick at Nikki ci.co, and then let’s do.co. And I’m going to submit it, and we’re going to hit a debugger here. So I’m gonna just open this up, so we can see this a little better. Okay, so we’re in the debugger now. And, alright, so we’re in the form. And you can see over here, so we have the form, we added the event listener, so on submit, so when the form gets submitted, and we have this event that we have access to, and one of the things you want to do is, so we’re, we’re using JavaScript here now to handle the form submission. So the first thing you want to do is you want to prevent the default action. And the default action is actually submitting the form without JavaScript. So that’s what that’s for. And if we just step over that, and that’s going to help you there. Now, here’s one of the form data form API’s that are super interesting. And if you’ve been using a framework like remix, you’ll see that they use these things that they leverage the web platform primitive, so they’re using form data. And so we have the form here. Now. There’s a couple of interesting things here, the form here, it’s the, it’s the variable I defined here, and we’re using it here. But we actually don’t need to use that variable within here. Like if we open up the console. So e is the event. And I’m just going to open it here, and you’re going to see what’s in here, I’ll zoom in a bit. And you’re going to see a few things, or, there’s a lot of things we’re not going to cover here today, but you’re going to see there’s the target and the current target. Basically, these are your actual forms. So you can use one of those if you want instead. So you can say, for example.

Nick Taylor 20:44
To eat on target, I’m not gonna say form because it’s a constant, but we’ll just say, my form equals, and then you’re gonna see it’s the same form. So I’m just going to do a quick tweak here. And I’m going to modify this. So we’re not using form here, there’s a form out there to add the event listener. But let’s just say, within here, we’ll just do const form equals e dot target. And then that should be good. And just so it, it’s named the same thing. But just to make it clear, I’m just going to, instead of having a variable, just do this, gonna save that, let’s reload this. And let me just close dev tools for a sec. And let’s remove the required and stuff for now, or, you know, let’s, let’s make them all text. So it’s a little easier to validate, I don’t have to type out full things right now, because that’s not really the point of this. That was just to show that you can use different kinds of built in validation. So let’s save this. And then so now I can do this. This is and let’s open up the dev tools. And I’ll just shrink it down for a second. Going to submit now, we’re back in the dev tools now. And let’s shrink this one. Okay, so what you can see here now is we’re back here, the debugger stop the program. And I’m going to step over the code. And we’re going to see here, e dot target is actually the form like I was showing before. So we have access to the form now. And we’re preventing the default. And there’s, there’s a really interesting thing about prevent default that I did a stream with Austin Gill, who works at Akamai, I’m going to drop a link to a really great series of stuff that he’s done in regards to forms. But I’ve always put the event dot prevent default at the beginning when you’re in JavaScript in an event listener. And he made a valid argument that say some of it pertains to having progressive enhancement. So like, if for some reason JavaScript doesn’t work, you know, the form can still submit. So what, what they were suggesting is, do the E dot prevent default at the end, because if there’s any JavaScript errors along the way, if we’ve already prevented the default action, the form is just not going to submit. This also takes into account that you’ll need to be able to handle the form submission without JavaScript, which you probably should be doing. But that was just an interesting thing that he mentioned, that they mentioned, when we did a stream. I’m going to drop that if folks want to check that out. There’s the stream itself here, which is what I’m linking to. But if you look at the description, there’s tons of links in there in regards to this whole file uploads. file uploads are a whole other thing, but it does use forms.

Nick Taylor 24:02
And Austin has a really great tutorial series on that. And yeah, no, exactly. Brian. Yeah, I hadn’t thought about it before either. I kind of treated it the same way. Kind of like when you have a constructor and you put super first I kind of treated it that way. But but but Austin made a valid point. So and again, it does tie in a progressive enhancement. Okay. So we’ve got the form here. Now. There’s this form data and I’m gonna just grab a link for this for folks. In the chat, this is one of the web API’s. This is form data. And like I said, remix uses this this is something like as somebody who’s done a lot of React there’s the forms have always been kind of like a weird thing in React and libraries were created. To get form information like Formic react final form, there was Redux form. And the thing is like, in React land, it’s because there’s this whole, like, you want things immutable and stuff. But you literally have all this. Okay, Astro uses? Yeah, exactly. Most of the newer frameworks are starting to leverage the form data. Fresh is another one, which is from Dino. And it makes sense, like, just kind of like how jQuery improve the platform. We’ve got all these just really good API’s. And, and I think a lot of folks aren’t aware of them. I’m kind of generalizing here. But so that’s why I think it’s interesting to show these things. But you, but it’s become kind of trendy in a good way that the new frameworks are actually using these. So. So the thing is, we have the form here now, right, so let’s come down to the next line. And we’ve got the form. And you can see there’s things in the form, like the inputs and all that. But when you run the form, when you create a new form data instance, with a form, and we step over it now, I’m just going to come to the console. And I’m going to just show you what the form data looks like now. And in there, okay, it’s gotten, it’s nothing right now. But if you do, or it is something I should say, sorry, if you form data dot, not the dot get. And then you say like, for example, I don’t know, let’s try email. Okay, there’s nothing there. Okay. So you’re like, Okay, what’s going on here? The thing is, with forms like so we have all these IDs here. And these are useful to connect the label to the inputs. But something that’s been around for a long time is is using a name attribute. And this is how you get access to form data. And this is what’s used when you submit stuff to the back end, like on on the front end, if you’re like constructing something with JavaScript, you could still pull out the form data and like, I don’t know, maybe you make some kind of JSON payload that you’re going to send, you can definitely do that. But it’s a lot easier, again, because you have the form data class to just get this data. So why not just leverage stuff that already is in the platform. So I’m going to call this one. So the name field, I’m gonna give it a name of name. I’ll probably say name many times now. Then for the email, I’m gonna say name, email. And then for the URL, we’re gonna say name equals URL. Let’s save that, this is going to reload. So we’re going to debug again.

Nick Taylor 27:55
But let’s, let’s let’s put into real data this time, just so it’s pretty clear what’s being pulled out here. Now, I’m gonna go ahead and submit, we’re gonna get a breakpoint again, here, I could just put a actual breakpoint, but for now, it’s fine. Okay, so we’re back to where we are, let’s get to the form data. And again, if folks have questions, just go for it. Okay, so I’m going to do the form data. So we’ve created the form data. Now. Let’s go in here. And now let’s get email. And then now you see because I’ve added a name attribute, I can start getting stuff out of here, then I can do URL, etc. Yeah, sure, why not? That’s to me. That’s kind of handy way to get access to this. And you get this stuff for free. Assuming you’re using semantic markup with proper attributes. This is another reason to not do div soup and things. So there’s Accessibility Wins, but also, you’re kind of make your life easier as well. And even though I’m doing this in plain, like just HTML and JavaScript, right now, you could still like in the event in like a react like onsubmit, you could still say like e dot target, it would be the form. And then you could still use form data there. And this is, you know, so yes, I’m showing it in something that’s kind of more vanilla, but you can definitely still use these things. And honestly, I think something like this just makes more sense instead of like, you know, having some kind of form library to pull out the data because like, the platform literally supports this. So just a side note. Okay, so let’s come back in here. I’ve definitely drank too much coffee today, but that’s okay. Where was I sources? Okay. So now

Nick Taylor 30:08
let’s just do this over here in the console first. So form data is an object, or object light. So we can actually use object as a front entries. And if we run this, you’re going to see that it creates this nice payload for us where it’s this object that’s got email and the key name, Nick URL and my website. And we didn’t have to construct this, again, just to reiterate, if we come back to the markup here, I use the name attribute. And it’s in a actual form. So by using the form data, we’re able to get this information. So if we come back to the sources here, and at that point, it’s just going to log it out. And I’ll just let it run. And you’re also going to see that the form did not submit, like it didn’t go back to the server. And that’s because the E dot prevent default, like I was mentioning, and also just to show that, it’ll still prevent the default action, I’m going to put it at the end. And I’ll get rid of the debugger to let’s just save that. And I’ll just put a breakpoint. And come here again.

Nick Taylor 31:32
Submit this. And we’re back in business, again, raising a breakpoint now instead of explicit debugger. So again, if folks want to check out the previous one, I’ll find the link for that. So we come here now, and I’m just going to let it run now so that the code is going to run. And you’re gonna see the page didn’t refresh, because you can see my name, and everything’s still there. And if I check out the console, log, it outputted. The form data, like I was mentioning, because we’re using the name attributes, and we’re using form data, and we’re using a valid form. Now, one of the things you might have noticed before was like with the form data I was doing, like form data dot get. The other thing that you have access to is let’s get rid of that. Let’s just get rid of URL for now. And I’m gonna make a, a, not a radio button group, I’m gonna make a checkbox group. So if you’ve never made a checkbox group, we can let’s see if copilot can do this for me. Create a group of three items. I’m just being lazy here. It’s go copilot. Alright, whatever. Let me do it myself. Okay, yes. Felt good, too. Are you? Are you using form data yourself? Like you’re you’re actually just using yourself or is it built in to spell kit now, like, it’s something that they recommend? I imagine they probably do recommend it. But okay, well, let me just make the checkbox input type was checkbox. Equals, we’ll just call it a choice. And let’s do label. And then we’ll just, I’m going to wrap it in it just it’s it’s a similar as using the for attribute but just going to say here. I’ll use it just because we’ve got the Flexbox going on here. So label four equals one. And then let’s do ID equals twice, one. And choice one label. Okay. Let’s save that. And I’m just going to copy them. I’m going to do I’m just going to add a prettier config real quick. So I have the prettier plugin for I have the prettier plugin for VS code. So it’s the way I have it set up is as long as there’s a prettier configuration it will add it’ll start formatting so why did it take a screenshot? Want to? Let’s do that one more time, and just gonna do empty. That should be enough. Yeah, sort of formatting things now. Okay, so I’m going to add a couple of choices here are the three, why not? One? twice to kind of explain what’s going on here in a second.

Nick Taylor 35:25
Okay, let’s save that. And let’s come back here. Yeah, okay. Yeah. So it’s straight from the docks kit. It’s good to know. Now it’s really nice seeing everybody going that way. All right, so let’s Mac MC t.co. And okay, so first things first. Again, this is we’re using semantic markup. But an accessibility when of associating the labels with especially checkboxes, because checkboxes can be super tiny. I don’t know how many times I’ve been on a website, and I’m like trying to laser focus, find the checkbox. As long as you associate it to the label, I can just do it there. So like, clicking on the word right here is way easier than I’m zoomed in at the moment. But normally, this would be a lot smaller. So. So let’s, let’s do a couple of things here. So I’ve only pick two out of the three here. Okay, so I’m gonna go ahead and submit. And then I take out the classic sources. Okay, let’s come here. Okay, let’s do that again. Okay, and I’m just going to check my markups. So type checkbox, name, choice. Name choice. Okay. Yeah. Cool. All right. So I’m going to submit now let’s look at what the form data looks like. So let’s clear this

Nick Taylor 37:11
I’m just gonna call this a for now. And so if I do a dot get again, so like, I can get my name like I was going before. Now, with the checkboxes, there’s multiple and hopefully I built this right? So I’m gonna say, Go get me choice. thing on, but if I say get all. Okay, so notice here, now, you’re going to see the choice attribute. Sorry, the choice. form element has a couple of things here as well, there’s only two that are on and this is actually, you see, it’s built in array. And what’s happened here is when you have a radio button group, or you have a checkbox group, I’ve used different IDs here to associate the labels. But if you notice, the name is choice for all three. And this is how they get associated. And this is, again, if you’re using semantic markup, you don’t have to struggle with like, okay, which which checkboxes? Did they check? Kay, let me let me go get the one that was ID choice one, the one that was ID Choice two, choice three, the fact that using the name attribute just brings them all together. And in this case, here, it’s showing that there’s the two elements, the first and the second one, and they’re on. I can’t remember why it says on but I mean, on means it’s selected, but I’m just trying to remember because it’s been a while with, actually this. So let’s come through here. So I have the form data now. And then I’m going to get the data and clear that. Of course clear. If we look at the data, it’s in choice on and the thing I’m wondering with the form data is Why is it only choosing one here, and I wonder if that’s because of the way I’m using the form data I don’t think it should matter but let’s see here. What else is there in here? So look at the form data real quick.

Nick Taylor 39:51
Alright, format, form data dot entries, get get returns an array of All values associated with the giving. Let me assume the sense, right? Yeah. So like I was telling you before a form data dot get all gets the array of the values. But I’m curious why the entries, because like when we did it here, come back to where it was. Back here, if we come back into the project here we’ve got our form data, let’s do the entries. So let’s clear that form data dot entries

Nick Taylor 40:47
okay. Just turn this into an array maybe. So let’s see here. Okay, so it’s got everything in there. So there’s my name. So these are entries. So the entries get broken up into an array, where the key is the first value and the value is the second value. So name, Nick, email, nicknack, negativity.co. The difference here is because we have the choice, it’s there multiple times, which is fine. But I’m curious why getting the entries? Oh, you know what it is? It’s, it’s it’s actually the example that copilot gave. Because what’s happening is here in our, in our code, we’re saying from entries, and it’s creating an object. So it’s the same key, that’s, that’s why it’s not working. So not good here. So essentially, we have all the information in there. And then at that point, you could submit this to a server or a server to process the data here. Now what we can do is, because we haven’t touched on it yet, but let me get rid of this. And yeah, let’s come back up here. There’s a few other things. So like, we talked about the name, there’s also the action. So the action is where you want this to go. So if you don’t specify an action, it just goes back to the page. So for example, if I change this to slash YOLO, I’m going to find this page after but let’s come back here for a second. And let’s just fill this out. Submit it not going back. Method get action YOLO. Why is it not like in that? Two seconds here. method. So there’s another thing here, which is related to the action, which is the method. So the method, you can have a get an A post, there appears to be a dialog now, which is new. But like the default one is get, so it goes back to the page itself. So and you can see that, for example. Like I’ve got the form information, and let’s for a second, just not do the JavaScript stuff. So let’s, we’ll still let the JavaScript run if we want, but I’m gonna have it actually submit the form. And let’s close this for a second. Let’s do Nick, Nick Nikiti, that go. Choice one, Choice two. And I’m going to submit now, you can’t see this because it’s zoomed in, but I’ll, I’ll paste it in, in the here in the chat. But you’re gonna see here. This is obviously a localhost but you’re gonna see because it’s, the method was get by default. It’s, it’s kind of like a search. So that’s why you have the query string parameters here. But what you’re going to notice is if I just break down, the key value pairs from the form submission is MC, my name equals neck, email equals Nick at Nikki t.co. That’s just encoded. And then you’re going to see this is the interesting part. So you’re going to see there’s the choice Equals on and choice Equals on twice. And that’s because we selected the first two. And so if you were to do a post, which is going back well they both go back to this server with the post, it wouldn’t show up in the query string here, it would get sent. And we can show that even though we don’t have an actual back end. So we can do that. But I just wanted to try one other thing first to come here, and I’m not going to choose the middle choice. So let’s submit it now. And did that. Oh, hold on, let me start fresh, it’s got a query string in it already.

Nick Taylor 45:30
Let’s start fresh here with just the index dot HTML. And let’s do go choice one, and choice three. I’m hoping that it should say off for the middle one. It doesn’t appear to you. So I’m wondering what I’m doing wrong there. Because it’s because um, the reason why I’m wondering is because if I paste this back here, it’s got the choice twice. But I was expecting one of them to be off, or, you know, like, I was expecting it to look like this maybe. And maybe that’s something I’ve got to check up on, because I haven’t actually submitted multiple checkboxes in a while. But the nice thing about it, when you do submit this to a server, if you’re using a framework, whether that’s Express, which is older or, or a newer framework, there’s typically things built in to actually convert this into an array. Or, again, you can just get the form data based on like Brian was saying in the chat there. So like when you post it, you can just get the form data using the form data on the server side, too. But I am kind of wondering why the choice I didn’t select is not going in the middle there. That’s something I will have to look up after because it’s kind of bothering me now. Okay, so let’s come back there is a few other interesting things I wanted to show as well. So let’s, for example, let’s just make this a button for a second and prevent default still. And so instead of form submission, it’s going to be a click. So I’m just going to say get button. And I would typically go with using the form instead. But let’s go ahead and do this. And let’s just put a few things in here. All right. So we’ve got that there. Make sure I have a breakpoint still. Where’s my index? HTML? Alright, okay, let’s put a breakpoint in there. And I’m going to submit. So now we’ve got a click event on the button. And so the event now so like, if we look at the event, that target it’s no longer the form, which is expected because we added the event listener to the button. But the thing that can get interesting is the dot form that one feel like that’s like No, no, that’s not it. I think it has to be on element. Okay. Yeah, let’s do that on a checkbox. So let’s do input instead. And not saying you wouldn’t normally do this. I just want to show something when you do this.

Nick Taylor 49:01
Oh, yeah, you’re right, Brian. Yeah. Thank you. Yeah. No, it’s It’s the rate. Yeah, it’s the radios to say which one got selected? Yeah, you’re totally right. Yeah, no, thank you for that. Okay. No, perfect. Yeah. Good call. Thank you for checking that. Yeah, I was I was trying to group them that way. But it’s, it’s actually it really is the radio buttons make some more sense. Because if you have radio buttons, and they have different names, then you can click them independently. And they’ll all stay selected. So yeah, so that’s my goof. So that and that’s also why it’s saying on so the radio button was on and we got it twice because I had two with the same name, even though it’s a checkbox, but But yeah, that’s a good call. Thanks for debugging that live with me. Cool. Cool. All right. So let’s click on one here is it this one? On document that query selector, that input. Oh, not the first one input checkbox. Yeah. So let’s just do while Yeah, let’s do that. Let’s do it on the checkbox. And again, this is not necessarily how you would submit a form, but I just want to show you something that’s available to you on form elements. So let’s save this. I’m going to click on it. Okay, so now we’re gonna come in here, and e dot target, is the input as expected. But another interesting thing is e dot target dot form. And you have access to the form again. So like, you’ll, you know, there could be cases where like, hey, I need access to that form, when you’re like doing something in JavaScript, but you have like the element and you’re like, how do I go in, you know, like, instead of doing like another query selector, or something else, to get the actual form, as long as the form element that you’re working with is in a form, you’ll have access to this, this form property. So this is just again, kind of like another way to hit these things here. I’m just doing a quick time check, we got about eight minutes left, I don’t think we’re gonna have a chance to build out a credit app today to to showcase this. But the whole point here is really just to show a few things like primers on different ways you can access forms and elements within them. I’m going to drop another link, this is a, this is a blog post I wrote a little while back, I think this might have even been in 2019. But it’s just called HTML forms back to basics. And it talks about some of these things that I’m mentioning. And the other thing that you have access to is so let’s, let’s call this form. Okay, and I’m just going to clear this. So we have a bit more space. There’s also formed dot elements.

Nick Taylor 52:18
I mentioned this in the, in my blog post, I just dropped there. But this is another way to get access to the elements. And again, if these things are all within the form, you will have access to them, assuming they’re semantic form elements like inputs, and selects, and text areas, etc. So again, just another way to access these things. The other things, just trying to see what else we can look at. I’m just gonna look at my notes real quick. In a bit of a bit of a busy week, so four elements on data. Yeah, we talked about when the target. Okay, and the non submit. Okay. Yeah, so yeah, I’ve covered most of the things I wanted to talk about. So, again, one thing, like I mentioned before, that Austin Gill suggested is, if you are going to be handling form submissions through JavaScript, I definitely agree with them now after having spoken with them on my stream, that putting a prevent default at the end makes complete sense. Because if you get some kind of either syntax error, or even like just an actual error being thrown, the prevent default will have already happened. So I think that’s in terms of like progressive enhancement, it makes total sense to be doing that. The last few things here because we just got a few minutes left here is well, why don’t we Why don’t we do for fun? Let’s give these checkboxes different names. So say choice one, Choice two, choice three. And, you know, let’s put the radio buttons in and I think that’s where we’ll see it. Actually, let’s, let’s forget the radio buttons for a second. Let’s just show what Brian helped me debug there. And let’s go back to this using the form submit here alright. So and we’re just going to choose two of them, and I’m going to submit a choice aren’t I think it’s still got the old code choice choice because they see it up top there. Let me just double check if I did that right. Name is choice one. Name is Choice two name is choice. Three. So that’s seems okay. Let’s refresh that. Here. Okay, that seems okay. I’m just going to check the code. Form Data styles. Choice one choice. Okay, that’s good. Cop, neck, Nick. Nick Tierra co let’s choose too long. And I’ll put a breakpoint in here again. In the index that HTML. Also, just a side note, sometimes when you’re prototyping, I’ll have to choice. Okay, I do. Okay, let me check there. While I’m fixing that, okay, we chose one. It’s one choice one, Choice two, Choice two choice. Oh, yeah, I see what you’re saying. Choice three. Cool. Thank you. The other thing I was gonna say is like, sometimes just iterating on things like to do a proof of concept. Like, I’m kind of doing maybe not best practice here. Like I have my style section in here. I have script right in here. But it’s just, you know, it’s a quick way to hack around with things. And I find it kind of refreshing sometimes, like, especially when you’re trying to prove something out. Obviously, depends what it is, you might need your actual framework for what you’re doing, but Okay, so let’s do this again. And thank you, Brian, again, for helping me debug life. Here’s why I always like chat. Alright, cool. There, and I’m going to submit it now. Why is it not? Did the form not submit? document dot query selector form

Nick Taylor 57:17
add event listeners submit. That looks good. Let’s do this again. Maybe explicit. We got a couple of minutes so this will be a fun way to end things. Right Why is it that did my Oh, my live server died? Maybe? Live? Okay, let’s try yet. Just use choice one, Choice two. Okay, my debugger died. I’m clearly doing something wrong here. The ID and choice three is Oh, yeah. Now that I already fixed, huh? Yeah, no, I think it is up putting in the comments. So no, it isn’t. There’s something I did in the code that document dot query selector an event listeners submit. Ah, everything looks okay here. Okay. I’m not sure what’s up but we’ve got like a bit left here. So I just gotta see, I’m just gonna do this document that forms zero. Add EventListener submit. All right, we’ll try one more time. And if this doesn’t work well, that’s the end of the stream for today but that’s okay. You know, live coding things don’t always go as planned and that’s okay one more time okay, it’s not do it Oh, yeah, I had prevented the Oh yeah, no, I’ve got prevent default so it should still be good. That’s weird let me just make sure everything’s working. This is classic cast. Okay, alert working document that all right, huh? Yeah, no, I know I prevented default, but not sure why that’s still like I’m not trying to submit it without the JavaScript. Oh my God, I didn’t save it. I don’t save not on I have autosave in other projects. Got whatever and there. I think that’s it. Oh, let’s go. All right. Well, anyways, we’re We’re at time here. But this is kind of like a whirlwind of just looking at some form API’s things you can put in forms some good practices in terms of like accessibility, adding labels and stuff. URLs for like the type. You know, for example, to validate a type. We touched briefly on like the required attribute, and just many different ways you can access a form itself. I hope this was maybe entertaining or helpful. Again, you might not necessarily do this in in your framework, like all the things I showed, but I think it’s important to kind of understand some things under the hood. So with that, thanks, everybody. And I’ll see in the next one. There’s some other CFE.dev events dropping. I think that is next week. If Brian if you want to drop that in the chat if not, just go to CFE.dev and yeah, thanks, everybody.

Transcribed by https://otter.ai