排行榜 统计
  • 建站日期:2020-12-31
  • 文章总数:831 篇
  • 评论总数:8 条
  • 分类总数:7 个
  • 最后更新:3月1日
热文菜鸟课堂

14. Forms

本文阅读 0 分钟

I welcome back my students in this lecture going to show you some very valuable information about forms

the form element is super useful we can use it to send e-mails.

We can use it to receive data from customers in our e-commerce Web sites like feedback's or other information.

So anyway let's go ahead and explore that element.

So let's open our coeditor And let's go to the blank that the male and let's do Aceves here and let's

call this forms I think is appropriate and then we are going to open this in the browser of course that

would go I'm going to close this out since I'm not going to need to go to that sidebar anymore and just

type in let's just make this a little bigger so you can see it.

So the formula is just like any tag on the e-mail.

We have an opening in the closing one that would go and then it's going to have some children inside.

So we're going to have some elements that belong to the form element.

The first one is input.

All right.

There we go.

Now if you see the input here let me just take this off for a minute and explain this.

The input is just like those tags that do not have a closing tag like this.

So we don't we don't have a closing tag the input tag right here and this input element.

All right.

So now the input does have a lot of attributes that we can place in there.

So the first attribute is type and you already saw it.

I just took it off I want it to you to see that he does not have a closing tag.

So we have a natural view called type and this is just going to let us know or let right here it's going

to let the browser know what type of input this will be.

And it will.

The default is tets.

And this is the one that we are typing in right here.

And if you see if we go to the browser I can write stuff in here.

Right.

And this is Google Chrome by the way.

So if I take this off here and I save it and come back and refresh it.

We still have the têtes.

So that's the default type for that.

Right.

So you're going to type in text because I just like you know it's appropriate to do it best practice

and then I'm going to make another input below.

Now keep in mind that if you keep making inputs like this and you don't put no separation no line break

or anything they're going to keep going horizontally like this.

All right.

This is an inline element that we can it's not a block level element.

All right.

So this one here we can actually change the type on it that type of this would be e-mail.

All right.

That's just going to give us some validation there later on.

I want to show you once I put a submit button.

Right.

Now let's make another input type something else.

Let's make this one type password.

I just want you to be familiar with its types here.

Right here if I type here you see those dots there and that's why we name it that type we name a password

here.

So that way we have this data there the user does not see the password right now in the past.

We this is why we used to have.

We used to have a tets fielding here but now we are able to have an e-mail field.

So that way we have some security there.

All right.

So this is happening in the browser.

Now there is another input type and this one is called File.

All right refresh.

And this one is just going to allow us to download something from the computer.

So if I click on it is going to prompt me to download something from it from here to upload something

there.

So if I click here on this Lamborghini picture and click open you can see that this gets saved right

here in this far in this input.

You see the file name right here.

Let's do it again.

And you're going to type this image here.

All right.

As you can see right here right now I will explain that later on how that works.

But just know that that's not going to be processed by the mouse is going to be processed by language.

Probably like BHB or something like that right.

But don't worry about that.

We'll explain later on.

Now let's make another input here called submit and this is what makes everything happen on this form.

Refresh.

And if I click submit.

Nothing happens.

Right now I'll show you why that is happening right now.

All right.

So first let's go.

Heading kind of fix this a little bit right.

We don't have this all looks really bad is all in line and looks really bad doesn't even look like a

form.

Let's go ahead and start formatting this a little bit.

So I'm just going to separate these inputs right here like this.

All right.

And let's wrap this in detax right.

Each of them.

So I want you to go ahead and do that right now.

All right if you're not practicing you should be practicing.

All right.

You should be doing the same thing I'm doing I'm just going to organize a little bit nice there.

All right.

And I'm just going to wrap all of them tags.

I'm going to put a space there you can see here on the left side.

Everything's changing really nice.

Take your time with it.

You know this is just like art right.

Just put another P-TECH right here.

Here we go.

Almost there we go.

That looks a lot better.

Tuck here and doing this slowly so that where you can do it is another way of me actually doing this

a lot faster.

But I want you to keep up with what I'm doing.

This is put this a little bit here actually this

way and the last one right here is going to this one there.

That's OK.

Let's just leave it right there.

All right.

So that looks a lot better.

Now right now we're missing something here.

Right.

So how are we going to let the user know why they need to type in these boxes right.

So we need some type of name here so this one you just I to use it's a type name in there.

This one I wanted to use it to type the email.

This one password that would be nice if I spelled this correctly right.

Again last word we go the fall is pretty exploratory is actually self-explanatory that's what I try

to say there.

And this inmate also says what he needs to submit.

All right.

So I think that looks a lot better now we can actually make this a lot better later on with CSSA but

just to give you an idea.

Now there is another issue that we can put in here like for example here we can put placeholder

right this is not true with a value of maybe enter name and right and you can do this for all of them.

I'm just going to do it for this one here so you can have an idea.

You see there's now.

Now we don't even need this at you right here.

Right.

And they can just put your name there.

Now there is another way of actually doing this.

Detax that I showed you how to do here instead of doing pretax we can actually do something called a

label right here like that.

And we're going to say label for what name.

Right.

And let's just right name here.

Right.

That's one way of doing that refresh.

And you can see is almost the same thing.

Right.

And we can wrap it around there if we wanted to wrap the whole input refresh.

Same thing.

All right.

So just know that you're going to see a lot of forms with this label there.

Perfect.

All right.

So I just wanted to do it differently there so that where you could see how he's done.

All right different ways and you can do it.

We can also put your attacks in here and bring down the rest of this.

If we didn't have this piece tag here we can put a B.

Right.

But I think with the label element which is a new way of doing it is actually nice right here.

All right.

Very useful.

All right so now what I want to explain to you about the form All right is that we have a natural you

code action here and this attribute has a value of where we want to send the data of this form because

I don't know if you know anything about ph B and you should because you are watching you're really looking

actually a male and that should be the first thing that you look at right.

So you're really learning other basics.

So why this action actually you will do is send all the data.

So when they use it comes in here and type in some type of data and they click and they put a following

here and it takes a minute that's going somewhere else.

You see now that we type in this we put the action in there and submit when we click it we have we get

the at symbol there validation.

This is the browser telling us listen you need to include that and that's why this e-mail type here

does because we can put a text typing here and they can put an email fine.

But if you put that e-mail typing here that's going to give us some validation they would not submit

the data unless they put that symbol there.

So that's an that's an extra validation there.

There's other ways of doing that with javascript and even BHB when they send that information over.

So this form usually is going to be sent to another file.

And for example it's going to be sent to a process that BHB so is going to go to this page that is executed

by ph.

So this whole form all these data is going to be sent to a page called process that BHB and then BHB

is going to process it.

You see the mail cannot be cannot process this information.

You cannot do that.

All right.

We can process someone we can do some validation using javascript before we send it to the server but

it needs to be processed by a server.

And the scale is going to be ph B.

Right.

So that's where the action will do.

And this is how you send information.

Now the other way that he needs is that actually your call method because we need to let him know that

we need to the type of data that he's going to be sent in is going to be post most of the time.

Right.

So this post data there now in the way that this works is now if we submit this form the way it is right

now even if we put this at symbol there and we submitted it say can not post-process that ph be because

we don't have a server here.

Right.

There's no server working.

Usually what we do when we're in development is that we install a server installation which in my all

the cores I explain how to do it.

You install a server a server a local server and your computer acts like a real server and then we can

use this functionality or we pay a fee now in order for us to send these data.

We need to actually catch it somewhere else.

And the way we catch is the when we send it first of all is by using this name attribute here in this

input fields.

And here we just name it email right for example.

Now when this date I get sent to that order to this process that BHB this input right RAHE and this

is the only one we put the name the name attribute and the value email right.

This input will sent will be sent with that text that goes inside this e-mail input.

So in this case if I put Hello G-mail

this day I get sent to that process that BHB and is going to receive it as an array and arrays raise

just a container with some information inside.

So he's going to receive this data in that process that BHP is going to say oh wow look at that array

with a value of email with a key of email.

I'm going to do something with it and then we started doing all the processing over there with that

server.

Right.

But you know that's BHB right.

You would not use this thing HD.

I just want you to have a basic introduction on why the form actually does.

Right.

So all these fields in order for this data to be sent has to have to have some name.

Actually you would have value.

This one has to have a password right.

This one has to have some type of name here.

OK whatever you're sending if you're sending an image you put an image here.

All right and here and this submit has to have a permit or any type of name.

And this those have to be passed where you can name it whatever you want.

You can actually just name it pass if you want.

It really doesn't have to be anything that I'm telling you to do this.

I'm naming a e-mail because it's an email information input right.

And this is a password so that's why I'm using it doesn't matter if you use the same right.

So just know that this is how he works.

If you didn't understand this don't worry about it.

Well you got to take out of this lecture here is no this is a form element.

This is a markup.

This is how you do it and know that we process that information using HP in another page.

All right.

So anyway thank you so much for watching this lecture.

Hopefully you got some valuable information in SC and the next lecture.

It was a pleasure.

Like always take care and great job if you follow me all the way through.

I welcome back my students in this lecture going to show you some very valuable information about forms

the form element is super useful we can use it to send e-mails.

We can use it to receive data from customers in our e-commerce Web sites like feedback's or other information.

So anyway let's go ahead and explore that element.

So let's open our coeditor And let's go to the blank that the male and let's do Aceves here and let's

call this forms I think is appropriate and then we are going to open this in the browser of course that

would go I'm going to close this out since I'm not going to need to go to that sidebar anymore and just

type in let's just make this a little bigger so you can see it.

So the formula is just like any tag on the e-mail.

We have an opening in the closing one that would go and then it's going to have some children inside.

So we're going to have some elements that belong to the form element.

The first one is input.

All right.

There we go.

Now if you see the input here let me just take this off for a minute and explain this.

The input is just like those tags that do not have a closing tag like this.

So we don't we don't have a closing tag the input tag right here and this input element.

All right.

So now the input does have a lot of attributes that we can place in there.

So the first attribute is type and you already saw it.

I just took it off I want it to you to see that he does not have a closing tag.

So we have a natural view called type and this is just going to let us know or let right here it's going

to let the browser know what type of input this will be.

And it will.

The default is tets.

And this is the one that we are typing in right here.

And if you see if we go to the browser I can write stuff in here.

Right.

And this is Google Chrome by the way.

So if I take this off here and I save it and come back and refresh it.

We still have the têtes.

So that's the default type for that.

Right.

So you're going to type in text because I just like you know it's appropriate to do it best practice

and then I'm going to make another input below.

Now keep in mind that if you keep making inputs like this and you don't put no separation no line break

or anything they're going to keep going horizontally like this.

All right.

This is an inline element that we can it's not a block level element.

All right.

So this one here we can actually change the type on it that type of this would be e-mail.

All right.

That's just going to give us some validation there later on.

I want to show you once I put a submit button.

Right.

Now let's make another input type something else.

Let's make this one type password.

I just want you to be familiar with its types here.

Right here if I type here you see those dots there and that's why we name it that type we name a password

here.

So that way we have this data there the user does not see the password right now in the past.

We this is why we used to have.

We used to have a tets fielding here but now we are able to have an e-mail field.

So that way we have some security there.

All right.

So this is happening in the browser.

Now there is another input type and this one is called File.

All right refresh.

And this one is just going to allow us to download something from the computer.

So if I click on it is going to prompt me to download something from it from here to upload something

there.

So if I click here on this Lamborghini picture and click open you can see that this gets saved right

here in this far in this input.

You see the file name right here.

Let's do it again.

And you're going to type this image here.

All right.

As you can see right here right now I will explain that later on how that works.

But just know that that's not going to be processed by the mouse is going to be processed by language.

Probably like BHB or something like that right.

But don't worry about that.

We'll explain later on.

Now let's make another input here called submit and this is what makes everything happen on this form.

Refresh.

And if I click submit.

Nothing happens.

Right now I'll show you why that is happening right now.

All right.

So first let's go.

Heading kind of fix this a little bit right.

We don't have this all looks really bad is all in line and looks really bad doesn't even look like a

form.

Let's go ahead and start formatting this a little bit.

So I'm just going to separate these inputs right here like this.

All right.

And let's wrap this in detax right.

Each of them.

So I want you to go ahead and do that right now.

All right if you're not practicing you should be practicing.

All right.

You should be doing the same thing I'm doing I'm just going to organize a little bit nice there.

All right.

And I'm just going to wrap all of them tags.

I'm going to put a space there you can see here on the left side.

Everything's changing really nice.

Take your time with it.

You know this is just like art right.

Just put another P-TECH right here.

Here we go.

Almost there we go.

That looks a lot better.

Tuck here and doing this slowly so that where you can do it is another way of me actually doing this

a lot faster.

But I want you to keep up with what I'm doing.

This is put this a little bit here actually this

way and the last one right here is going to this one there.

That's OK.

Let's just leave it right there.

All right.

So that looks a lot better.

Now right now we're missing something here.

Right.

So how are we going to let the user know why they need to type in these boxes right.

So we need some type of name here so this one you just I to use it's a type name in there.

This one I wanted to use it to type the email.

This one password that would be nice if I spelled this correctly right.

Again last word we go the fall is pretty exploratory is actually self-explanatory that's what I try

to say there.

And this inmate also says what he needs to submit.

All right.

So I think that looks a lot better now we can actually make this a lot better later on with CSSA but

just to give you an idea.

Now there is another issue that we can put in here like for example here we can put placeholder

right this is not true with a value of maybe enter name and right and you can do this for all of them.

I'm just going to do it for this one here so you can have an idea.

You see there's now.

Now we don't even need this at you right here.

Right.

And they can just put your name there.

Now there is another way of actually doing this.

Detax that I showed you how to do here instead of doing pretax we can actually do something called a

label right here like that.

And we're going to say label for what name.

Right.

And let's just right name here.

Right.

That's one way of doing that refresh.

And you can see is almost the same thing.

Right.

And we can wrap it around there if we wanted to wrap the whole input refresh.

Same thing.

All right.

So just know that you're going to see a lot of forms with this label there.

Perfect.

All right.

So I just wanted to do it differently there so that where you could see how he's done.

All right different ways and you can do it.

We can also put your attacks in here and bring down the rest of this.

If we didn't have this piece tag here we can put a B.

Right.

But I think with the label element which is a new way of doing it is actually nice right here.

All right.

Very useful.

All right so now what I want to explain to you about the form All right is that we have a natural you

code action here and this attribute has a value of where we want to send the data of this form because

I don't know if you know anything about ph B and you should because you are watching you're really looking

actually a male and that should be the first thing that you look at right.

So you're really learning other basics.

So why this action actually you will do is send all the data.

So when they use it comes in here and type in some type of data and they click and they put a following

here and it takes a minute that's going somewhere else.

You see now that we type in this we put the action in there and submit when we click it we have we get

the at symbol there validation.

This is the browser telling us listen you need to include that and that's why this e-mail type here

does because we can put a text typing here and they can put an email fine.

But if you put that e-mail typing here that's going to give us some validation they would not submit

the data unless they put that symbol there.

So that's an that's an extra validation there.

There's other ways of doing that with javascript and even BHB when they send that information over.

So this form usually is going to be sent to another file.

And for example it's going to be sent to a process that BHB so is going to go to this page that is executed

by ph.

So this whole form all these data is going to be sent to a page called process that BHB and then BHB

is going to process it.

You see the mail cannot be cannot process this information.

You cannot do that.

All right.

We can process someone we can do some validation using javascript before we send it to the server but

it needs to be processed by a server.

And the scale is going to be ph B.

Right.

So that's where the action will do.

And this is how you send information.

Now the other way that he needs is that actually your call method because we need to let him know that

we need to the type of data that he's going to be sent in is going to be post most of the time.

Right.

So this post data there now in the way that this works is now if we submit this form the way it is right

now even if we put this at symbol there and we submitted it say can not post-process that ph be because

we don't have a server here.

Right.

There's no server working.

Usually what we do when we're in development is that we install a server installation which in my all

the cores I explain how to do it.

You install a server a server a local server and your computer acts like a real server and then we can

use this functionality or we pay a fee now in order for us to send these data.

We need to actually catch it somewhere else.

And the way we catch is the when we send it first of all is by using this name attribute here in this

input fields.

And here we just name it email right for example.

Now when this date I get sent to that order to this process that BHB this input right RAHE and this

is the only one we put the name the name attribute and the value email right.

This input will sent will be sent with that text that goes inside this e-mail input.

So in this case if I put Hello G-mail

this day I get sent to that process that BHB and is going to receive it as an array and arrays raise

just a container with some information inside.

So he's going to receive this data in that process that BHP is going to say oh wow look at that array

with a value of email with a key of email.

I'm going to do something with it and then we started doing all the processing over there with that

server.

Right.

But you know that's BHB right.

You would not use this thing HD.

I just want you to have a basic introduction on why the form actually does.

Right.

So all these fields in order for this data to be sent has to have to have some name.

Actually you would have value.

This one has to have a password right.

This one has to have some type of name here.

OK whatever you're sending if you're sending an image you put an image here.

All right and here and this submit has to have a permit or any type of name.

And this those have to be passed where you can name it whatever you want.

You can actually just name it pass if you want.

It really doesn't have to be anything that I'm telling you to do this.

I'm naming a e-mail because it's an email information input right.

And this is a password so that's why I'm using it doesn't matter if you use the same right.

So just know that this is how he works.

If you didn't understand this don't worry about it.

Well you got to take out of this lecture here is no this is a form element.

This is a markup.

This is how you do it and know that we process that information using HP in another page.

All right.

So anyway thank you so much for watching this lecture.

Hopefully you got some valuable information in SC and the next lecture.

It was a pleasure.

Like always take care and great job if you follow me all the way through.

   
您的大名:
万水千山总是情,给个打赏行不行。 打赏
本文经授权后发布,本文观点不代表立场
-- 展开阅读全文 --

作者信息

Royal
文章 17 篇 | 1.2k 阅读
最新文章

随机推荐

广告

热评文章

275 ms