All language subtitles for 7. Creating Login Page - Adding Submit Button

Now one last thing that we need to pay attention to is the log in.

Now ideally you want to log in to be another input and it literally just submits this form that we created.

Now again in my web page in my example they're using javascript to submit the code so I'm going to do

is I'm going to delete all of this because this is the logon button that they're showing in here.

It's actually not a button.

It's literally just a container that says log in and then they're using javascript to submit this.

So I don't want this I want a proper HDMI button.

So this is.

This is the code that's responsible for it.

And again if you're confused you can just come on this page right click this and specked element and

it'll highlight it for you.

You'll see that this is inside a div and inside that Dev We have this spawn log in there as you can

see it actually highlights it for us.

So I'm going to delete delete that log in.

I already have it in here so we'll just go to market

delete it.

That's gone now.

Then I'm going to add my input that I'm going to use to submit the form and I'm just going to do import

and set the type which is going to be submitted.

And then I'm going to set the value.

This is what the users see.

This is actually the text displayed inside the button.

And for me I'm just going to call it log in because they called their logon button logon and that's

it.

So I literally just deleted would just go back to their web page to see what we did.

We literally just deleted this log in text right here and we added a proper hash DML input to it.

Now we also have this there right here which is a container.

And if you notice all this tile so the yellow color in here and the size of the container and all of

that is set inside this deck.

So when I when I highlight this you'll see the hole that gets highlighted.

But when I highlight this pattern you'll see only the text gets highlighted.

So we actually want this style that's being used in here and we don't need that.

So before I delete the dev I'm going to copy it's style.

And if we if you notice in here you see we have a style of tag which is responsible for styling this

div.

So I'm going to Right-Click this tag.

I'm going to click on edit as HMO and there is no point of editing it in here because it'll actually

add anything you modify will be gone once you refresh.

So I why I'm doing this is just so that I can copy the style.

So I'm just navigating down and this is the style that I want sexually in here.

I'm just going to copy all of this so that my BOTTEN will look exactly like this.

After I deleted so I'm just going to do Control-C to copy.

I'm going to come back to my document here.

I'm going to delete this whole Dev and to find it.

So this is the closing of it and the start of it should be before that.

So if I just look for the div and go previous this time.

You'll see it in here.

I'm just going to go down.

So you see it.

So this is the day that we want to get rid of.

And it has the style that I like.

That's going to make my bottom look like the bottom that they're using.

So first of all I'm going to delete it.

And then I'm going to add the style in here.

So it's going to do style

and put everything between quotations save it and let's go and refresh the page see what it looks like.

So if we click on luggin you can see the page still looks very similar.

We still have our inputs in here and this is now is a logon button.

I notice that the font in here is a little bit different so it used to be white.

Now it's black and it's slightly smaller.

Now if you want to achieve a perfect result you can easily add a few properties to the style tag.

I don't want to get into too much details about CSSA and all that because it's going to get a bit confusing

but I think the page is very convincing right now.

Now I'm just going to do it quickly just to show you that you can literally mimic anything you want

with some knowledge of yes.

And styling.

So we have the style and here all we have to do is just do color

white and save it.

If you come here and refresh you'll see the color is going to go to white and so on.

So again I don't want to dive too deep into C-s as an HMO.

I think I've already spent too much time on it but I think this way we cover everything that might face

you usually in most of the situations that you'll face you'll probably won't need to modify the or else

or modify the inputs and wrap them in form.

I only did this because the Web site that I'm trying to clone is actually programmed like that.

If you're really stuck at this point and you just didn't know how to modify Hastey Now you can just

use a generic logon web page and I'll include this later on in the course.

But if you just go back over this lecture I know it might be covered if you knew Kaina ideas and topics

in it.

But what I did is very simple.

Basically you want to look for the input tags make sure that they are wrapped in a form tag which looks

like this.

And like this one if they're already wrapped in form tags perfect leave it and just continue with the

next lecture.

If they're not just sort them out the same way I did here put the forum tag so put a form here and the

form with a forward slash form and then if there is no input button then put the input button yourself

and that's it.

We're good to go and we'll continue with create in our evil IP or fake access point in the next lecture.