Hello, in this HTML Crash Course video, we are going to cover the form element, which allows you to construct some sort of input form. For example, actually, I'll show you if I go to the solar system website, which is my company. If I scroll down, go to contact us. This right here is a form, you type in an email address, you type in a method and then you click Send. Obviously, it's saying that this isn't a valid email address, but you get the picture. It's a way of inputting data and transmitting it.

So a form is easy. Yeah, for multiple they are very easy to create. First thing you need to do is create a form, tag open and close it. Inside here is where you will construct your form or you need a couple of attributes that you need action, which is the actual page that you want. To go to, so I'm going to call it action page dot php. You might be thinking what a dot php vote it.

Well, a PHP file in PHP is a server side coding language, which reside well on your server and is run on your server. So something like this, you would click the form. For example, if the, if it had all the data, you will send it to act, the action page action page will do something, maybe it would email it somewhere, maybe your store in a database maybe would retrieve something and let the user know, we're not covering that in this tutorial. This tutorial is just to show you the form element element and how to construct the visual HTML aspect of it. It's best to know that the action part of it is important to actually get it working. But this is just the HTML Crash Course.

You'll eventually move on to something like CSS and JavaScript and then eventually get on to PHP, we can start connecting everything to the server, the front end and the back end. The other key attribute in here is the method tribute. So far I type in method and then get there are two types of methods that you'll be dealing with GET and POST get is this type of metric. If I go into my education platform, sonar learning, scroll down if I click on web development, actually, actually, yeah, it doesn't matter. Sorry. So if I just go on to university lectures, and seminars, as you can see, we got topic page dot php.

So this would be the action where it's been sent to. And this question mark says that we're sending data to it as well. So this will be the parameter name, and this will be the data sent. As you can see, it's in the URL. So this is a get method. Get there.

Sent via URL that isn't secure. So you wouldn't want it for that. But it allows me to bookmark it. The other alternative is called post, you don't actually see any difference. So if I were to, for example, going to login, click Login. And okay, my details already right here, if I click login, nothing goes into the URL in terms of data, the username isn't there, the password isn't there, because that will be a security risk it sent via post.

So it sent hidden and you can send more data as well. But what's going to be post? Yeah, I mean, get here because when we click a button, you'll be able to actually see the data in the URL. So the next thing is to actually construct our form. So you can have a mixture of elements in here, just plain text. So first of all, we're going to put first name because we're going to be asking the user for that.

Name, then we're gonna put a great tag. And then we're going to put an input tag and the input tag, I think, as you can guess, it put a field that allows you to input data, then type. And this is the important one. There are different types of input, you can get text, you can get text area, which is more for paragraphs that you might have seen in common section like YouTube that have those four lines in the bottom right hand corner, the late extended as a text area, the top could be password and the difference between password and text is password is hidden. They usually have asterisks or dots. They're fantastic.

So you got to codeine yourself. And there are other types of laws such as a checkbox, if you check out the W free school website, you'll see a bunch of great documentation on there. So in here, it's gonna be text, we're gonna keep simple name and this Name, I'm going to put first name, this name. variable is essentially so for desktop development, it is this right here it is the actual name of the data that we're sending. And then I'm going to put a value value isn't required value is just a default value that is provided on a roof. And now, great tech below that last name.

Another input type equals text. No, well, I'm gonna put password even though it shouldn't be a password. Last name would usually be on the password actually, just so you know exactly what we're referring to name equals password. value if you don't want to value for the password. And another thing I forgot to mention these elements of void elements where they don't have a specific closing tag, they are like meta tags in that there's no data that goes in between them. Any data is set via attributes.

And then finally, as for another bright line, and put an input, and this input is going to have an input type of Submit. This is a button value equals method. The dot value here is what the text of the button size. If we save this, go to our web browser refresh, we actually you know what, I'm just going to comment this out. We've shown you comments before. Very simple stuff, refresh as you can see, we have a truly That's where you're wondering why password and the password textbox are on the same line.

So there we go, it's all separated. So I didn't see Scott Bruce in there by default password sorry, password if I were to type nothing is hidden and if I were to click Submit, as you can see is trying to take us to action page dot php which doesn't exist that's fine with put question mark first name, which was the name of the first input field, then the actual data and password and then that data so let's put some data in password longer and put 12345 submit and as you can see, the data appears there. Wow. So that's it for forms. Like I said check out the W free school website we're going to do is have a look at adding a radio button a checkbox button I text area, having a look at the different attributes To create a form that you've seen in another website before, whether that's Facebook, Google, where I try and replicate that, just so you can familiarize yourself with form creation.

So that's it for this video. If you liked it, please let us now Phaedra plate levels now as well what you didn't like about it so I can improve it for the next time. There will be a link in the description to the source code of this video and the source code of every other video in this series. If you have any question whatsoever, feel free to post it on my education platform, sonar learning.co.uk. And as usual, thank you for watching and I hope you have a wonderful day.