Building a Form

[00:00:00]
>> This is great, but it's not really great because I can just feel that everybody here wants to see interactivity. Right now we're just seeing basic replacement. Yeah, that was awesome way easier to use than just Ajax and trying to find HTML elements yourself, but it's not any different at this point.

[00:00:16]
So I want to win, I want a big win. So now remember this is also a goal to learn htmx, so will I be programming with the world's greatest technique today? Absolutely not. Will we do things, maybe some corners will be cut today? Absolutely fine. But our goal is to learn htmx.

[00:00:33]
It's not to be good at programming today. What? No tailwind? What is this? Twitter is in shambles right now! Yes, we will not be using tailwind because I'm gonna spend approximately zero seconds thinking about how this thing looks. I just want to show you how we can execute things, how we can add interactivity, how we can do some hooking in with JavaScript.

[00:00:53]
And I'm only gonna show just the surface of it, but as long as you can understand that, okay? You can literally, not figuratively, but actually literally use react with htmx. You can use web components, lit components, whatever you want. You can even raw docs and JS and CSS in there if you need to.

[00:01:08]
We will probably be opting into the final strategy today cuz it is the most straightforward to see how it's done. The classic tailwind problem. So we're gonna build a small context application. The application has a form that takes in a name and an email and saves it. So the first thing we want to do is create this email form, or this form that takes in name and email.

[00:01:27]
Every time we hit save, it will add the name and email to the server, just in memory, and display the updated list of names in email. Now you're probably asking no light, are you serious? You're not even doing that, don't you love turso, isn't this like a hashtag sponsored moment?

[00:01:43]
We could just have this totally workout? No, I don't want to do it. Again, this is just trying to be as minimally viable product as possible cuz I really don't wanna get bogged up on anything. So yes, every time we make a change to our server, do we lose our data?

[00:01:58]
Absolutely. So first let's do the HTML part of the server, which should be pretty easy. We're gonna build a form with name and email and the submit button. And then we've gotta build a display. That is a list of names and emails and contacts should be pretty straightforward.

[00:02:14]
I think everyone here should be able to do this quite easily, but if you can't follow along. So we're gonna keep index. But we're gonna probably need to get rid of all this get out of here we don't need that we don't need block account. Let's start by building the form.

[00:02:26]
I wanna call this block form for form yes. Is that a good name? No, it's not. Is it a good name for our application absolutely. Probably should have called it create contact but we didn't. Now I'm not even gonna use that, we're gonna use a pretty poor form of HTML here.

[00:02:43]
I'm gonna go name, and this will be an input with, let's see if Copilot can guess. We gotta type text, name is name, values this, fantastic. I'm gonna remove most of this. We don't actually need any of this. All right, awesome. So I'm just gonna have a very simple input, which is name.

[00:03:01]
I'm gonna take name, we're gonna take name and replace it with email. That's not what we wanted. So there we go. Pretty straightforward. And I'm gonna make this type email. We're gonna use an HTML5 validation in here. Did you know that input types can have validation full freeze?

[00:03:18]
Yes, you can. Now, you could drive this all by the server. You could drive it by client side stuff if you really wanted to. Right now we're just gonna drive it via HTML5 validation and what the server says. We could get rid of this to make life easier if I wanted to, do we wanna make it easier?

[00:03:32]
We could just make it easier, but let's just make it easier cuz honestly, it's just nicer to type. I don't wanna have to think about things, it just makes life easier. So there we go, fantastic. Next, I'm gonna create a block display, which again, poorly named, but it gets the point across.

[00:03:50]
We're gonna display the list of contacts. All right, so this is where we're gonna just display all the things we have in the server. I'm gonna do the following. Let's go a div on the outside nothing like a good bowl of div soup and then I'm gonna do a range over contacts, oops, fantastic.

[00:04:11]
And now I'm just gonna display each contact and look at that it already did it for me absolutely awesome I'll go name, email. This is pretty straightforward. So if you don't know about ranges in go templates, it's pretty straightforward If you could just go range.contacts, it's I don't like this style.

[00:04:28]
It really bothers me but it just works out for this. It Implicitly changes the this object or the dot to be referring to whatever we're ranging over not the outer thing that was passed into the block Luck. So can this be annoying? Absolutely, do I love it? Absolutely not.

[00:04:44]
But for the sake of our simple program, this templating language is more than enough for us to get pretty dang far. And honestly, you can get really far in Ghost's templating language. They have some ways to create variables and all that. We're just not doing that today. We're keeping it simple.

[00:04:56]
And lastly, we're gonna want a little bit of styling on here. I'm gonna go display flex I know I look at this, we're actually just doing CSS and flex direction is a column, there we go. Can you believe that I actually just got done doing inline CSS? You probably think I'm a front-end engineer at this point.

[00:05:16]
All right, so now that we've built the form and the display. Let's make sure we put it into the actual index page. So I'm gonna go up here and we're gonna go template form, template display, put a nice little hr betwixt them so that way we can kinda see them separated.

[00:05:32]
Pretty straightforward. Do the form, do the display, let's move on. Now we do have a bit of a problem when we build our server. We need an object with a contacts list, so we're gonna do that here shortly. But let's see what we've got to do next. All right, so look at this, here's our fully programmed HTML engineering, how close did I get?

[00:05:51]
Man, look at how much more professional I made this one. I did forget this, we do need to tell the form where to post itself to. So I'm gonna jump back here, I'm gonna go to the form and I'm gonna go hx-post equals how about contacts, right? Feels pretty resty of me.

[00:06:08]
So we're gonna post to contacts, the name and the email and we also need a button that is a submit. So create contact. Fantastic, so we have a button that submits the form. Forgot a couple items, awesome. Let's go on. I'm barely just not a great HTML. My HTML engineering very poor.

[00:06:25]
I'll look at that. I didn't even do a flex container in this one file, just rookie material over here. All right, awesome. I like everything that I'm saying.