 Hey, volicasters, and welcome to a surprise edition of the Mianica show. I thought I should steal the camera from Rob for a little bit, so I can tell you about forms, because that's the thing that I'm excited about. Forms are really awesome, because you get to send data that a user types into a server without doing any work or writing any JavaScript. And that's great. But if you've noticed, forms don't really work with custom elements that you may have been writing, because forms only care about the native input element. So in Polymer, we try to fix that by making something called an iron form. Iron form is really great if you get to control the custom element that you're writing, because you need to do a little bit of work so that it actually talks to an iron form. So what I want to do today is show you how you can get a native form to actually care about your custom element with just doing one little trick. And that is to basically copy the value into a hidden input element so that the form actually sees it. Come to my computer here. OK, so the first thing I'm going to do is create a form. And you'll notice here that I'm using something called HTTP bin. HTTP bin is an awesome service that basically lets you send a request to it and responds with the thing that you sent. This is really awesome, because I don't really want to write a server to make this demo. Nobody does. So whatever I send to HTTP bin is going to tell me the arguments and the headers and the stuff. They're great. So I've created a form. And I have some form styles here included so that it actually looks pretty and not terrible. So you're impressed with my mad CSS skills. And in this form, I'm going to put something called a birthday input. The thing that I'm going to demo is basically a custom element that gets your birthday so that I can send you cake when it's actually your birthday. It's going to be amazing for everyone. So I'm going to put an input over here. I'm going to put a button. It's got a class, so it's pretty. And if you go over here to my demo and I refresh my page, I have a form. It has a button. Very exciting. So let's actually implement this custom element. It's a birthday input. So it's going to have a label to tell you what this input does. And then I'm going to put a date input. That's really just two text fields together. And one of them is a month and one of them is a date. So if I refresh my form here, I should also import it. So I'm going to go ahead and include my element in the demo. And then when I refresh it, bam, there's an input. The thing is, I didn't tell the form to care about it. So if I actually try to submit a date in here, HTTP doesn't see it. I didn't send any arguments with that form. And that makes sense. We didn't do any of the magic. So let's go ahead and do it. So the first thing I want to do is actually assemble this birthday somehow. So I'm going to create a property called birthday on my input, which is just a string. And I'm going to get it from the thing that you type. So I'm going to add an event listener for input so that every time you type something in one of these fields, I get an event. In this event listener, what I'm going to do is just take the two values and smash them together with a slash. And they're going to go into this property called birthday. Cool. So that's still not going to work, because I still didn't tell the form how to use it. So let's do this. I'm going to have my input element, and it has the birthday. And I'm going to bind it to a variable so that I can actually pass this variable to one of my hidden inputs. So I'm going to create this hidden element. It's an input. It's hidden. So that means it doesn't show up in your form. Our form looks exactly the same. And I'm going to give it a name unless your input has a name. The form doesn't care about it either. And then its value is going to be the value from the birthday input element. So that's cool. I've wired them up together. And for this to actually work in our demo, you've got to put them inside a DOM bind. Sweet. All of this should work. Let's go and refresh our demo. It looks exactly the same. I'm going to put it in my birthday. This is actually my birthday. Please send me presents. I will appreciate them greatly. And now when I submit, look at this. We've sent something to HTTP bin. It confirms I've sent it a birthday. Everything is working as expected. Amazing. And that's how you trigger a form to care about your custom element. Thank you so much for watching. I'll see you next time. If you have any questions, put them in the comments below. Or you can find me on Twitter. I'm at Nodd Waldorf. Subscribe to the channel. And yeah. Bye, friends. Hi, Polycasters. And welcome to another edition of Oh No. This is not another edition. Hello, Polyca- Oh. Don't make me laugh. If you've noticed and if you try to use them with some of our custom elements, thank you so much for watching. I forgot everything. God! This was hard.