Hello, in this ionic programming video, we are going to look at forms forms allow you to add labels, and more specifically, input methods, such as text input, and they provide a button. So you can submit some data, maybe it's a login form. So you have a username, password, you click Submit, and you submit that data to some sort of back end, and then you verify that it's a very powerful methodology or same methodology. It's very powerful ping pong, and they use a lot in application, so they're definitely worth learning. Creating a form is really easy if it's a form of a list, basically. So first of all, what you want to do is create a div class.

If you haven't checked out our video on lists, check that out, because I'm sure you'll learn a lot from that you'll be very relevant to this video. Next, inside of here, you want to create a label And then this label needs to have a class of give me a moment, this needs to have a class of item, an item in because it's about an input item. And then in here, what we're going to do is have a input. This is going to tell a type of text to have a placeholder. I'm just gonna call this user name. Just close this off, like so.

And what I'm also going to do is creating a label label. And for this label, I'm going to go class. Can you guess the item and item input again, and this is going to have a text area instead. So text area difference between a regular sort of texting point text area text area is more for stuff like paragraphs. For example, if you go on YouTube and go into the comment section when you're typing a comment because it could be multiple lines, that will be the text area. And when you're logging in, you have, say a username input and a password input that will be more of a text input.

That's where they will be used. This needs to have a placeholder but it's going to have placeholder, I'm gonna call this comments, save that. So now let's just actually build our projects, you'll see the desk. Now see the two on the on the app is awesome. Now ionic, build iOS. So now let's just have this build our project.

Now let's run it in our simulator. As you can see, we now have some input. So if I were to just click on here, I can just type something like so. But what to click Enter to do anything you're going to hear, I can have multiple lines, so I'm actually clicking enter there. Let's go back. Now, what I'm going to do is show you a inline label which has because on here, let me just delete all of that it says username, but that's just a placeholder, it disappears.

As soon as I start typing. Maybe you want that label to always be there. And then you want the actual input sort of area to be separate. You can do that as well. So let's just add a nother label, label and for the class, we need Turn on the term data input input input. Inside here we need a plan.

And this is going to have a class of input as label. And I'm just going to call it password. So password and for the input type equals. For this you can put two different types of input password or text. I'll actually duplicate so you can see the difference, but I'm sure you can guess what the difference is if you don't any sort of web development before, which I'm sure you have if you're watching this series. So let's save this.

Build our project Running in our simulator. And here we go. So if I were to click on here, start typing it overwrites it for click on here, it puts our cursor to the right. And I can start typing. And this is what a password input looks like where the user, I mean, a text input actually showed you the text, because obviously a password it's security for security reasons. You have a cap, a password character, or a password char gs.or, some sort of asterik.

So that's the difference and that's a great way of using it. The next thing we're going to look at is stacked labels. So we'll actually have a label like this, and then below it, we'll have a placeholder so we're combining the two. Let's put a label and this is gonna have a class of item, item dash, input item dash, dash dash label. And in here, it requires a span. You've guessed what the span is going to be.

This is simply going to be the label itself, not the input. So this input label. And so this one's going to put name. And I'm going to input for the input require the type of text the password, whichever one you'd like, placeholder equals, I'm going to put systems and I'm going to rename this to company name, save that. I'm also actually going to show you how you Floating label as well at the same time, just to save some time as well. So label class equals item item, input item dash, dash label.

Now inside of here, what we need is a Stan. Bob, what the hell it has been. This is going to have a class of input label. And so this I'm just gonna put first name. Now we need an input so in this requires a type, so text or password one and we put a placeholder right here. I'm gonna quit This as first name, you'll see what both of these type of labels do.

So now let's just build our project. Run it in our simulator. So here we have a stack label. So we've got a label, and it has a placeholder, as soon as you start talking that it gets rid of the placeholder, and if I click on here, it's got a placeholder. As soon as I click on it, and I start typing, the actual label appears, it conveniently say first name, but you could actually make them have something different but for you their experience, they're probably going to be the same. So next we're going to show you a inset form.

So if we put list dash inset Do you know what I'm going to copy and paste this? copy and paste this. I'm going to comment this one out because I'm providing the source code via GitHub. I want all of this go here so you can see what we've been doing. To get rid of this from here, I need to change this to list. In set.

You can also do inset input. So for insert input, really simple. What you will want to do is actually know what I'll just show you this first. So let's just run this in a simulator. And we build it now let's run it in a simulator. As you can see, it's in some sort of card like format.

It's actually got some padding some margin on the side. I think this looks fantastic. Just built in classes that just provide a level of deep detail by just adding a simple class. So let's look at inset inputs. So let's just pick one of the inputs that random has pick. Just pick username.

And to make this an insert input, you put, I do input dash insect. So now let's save that. And you can actually add a button or something I forgot to show you. So if I go on to now actually know why it's probably best if I just create a whole new input within the list. It's got quite a bit of modifications on it, Dave. And Dave's gonna have a class of item, item dash input dash inset, inside of here is going to have a label is going to have a class of items.

Input dash ROC py. And inside, here we're gonna have an input. Again, have whatever sort of input you'd like. So I'm going to create a simple text. For the placeholder, I'm going to put a age. And now to add a button to it, but to do this matter, whatever you would like in the button for the class, you need that button.

I'm just going to change the sizing to more. I'm also going to show you an input icon. So if I go to one of these inputs, let's say I've gone to this one right here. and I were to add an icon so I could do I class equals icon, ion dash plus plus, you can use home if you want more information that the icons for ionic icons in Google and let's follow the link, pretty simple placeholder dash icon. Now let's save that. And the final part that we're going to cover in this tutorial is header inputs.

So to do a header input, what we're going to do is where are we looking so for here, what you want to do is do actually I'll show you that after let me just run this because I've already got quite a bit to showcase. So let's just read one this is just so much to show and almost like Not enough time. So as you can see, we have our search icon. And this is our inset images, just fans. Just it just looks fantastic. And it's that simple to add a button as one Submit button doesn't want to say works, but it gets rid of the typing.

So if I click Submit, it draws that way. So to actually add a header input, if we go to this div class of item input inset, just add a do doo, da, four dash header. And I'm actually going to rearrange this. So it's at the start of all of this. Save that rebuild our project. We run our project.

And here we go. We've got some padding at the top. Obviously, I've actually done a inset one. So that's pretty simple stuff for forms. If you have any questions, feel free to post them on our education platform. So no learning Dakota, UK they'll be a link in the description that there'll be another link in the description to the source code from this video.

So check that out. If you liked this video, please give it a thumbs up hit that subscribe button and leave us a comment. And as usual, thanks for watching, and I hope you have a great day.