HTML Form Validation: Processing

Loading...

From the course by University of California, Davis

Introduction to Web Development

275 ratings

University of California, Davis

Introduction to Web Development

275 ratings

This course is designed to start you on a path toward future studies in web development and design, no matter how little experience or technical knowledge you currently have. The web is a very big place, and if you are the typical internet user, you probably visit several websites every day, whether for business, entertainment or education. But have you ever wondered how these websites actually work? How are they built? How do browsers, computers, and mobile devices interact with the web? What skills are necessary to build a website? With almost 1 billion websites now on the internet, the answers to these questions could be your first step toward a better understanding of the internet and developing a new set of internet skills. By the end of this course you’ll be able to describe the structure and functionality of the world wide web, create dynamic web pages using a combination of HTML, CSS, and JavaScript, apply essential programming language concepts when creating HTML forms, select an appropriate web hosting service, and publish your webpages for the world to see. Finally, you’ll be able to develop a working model for creating your own personal or business websites in the future and be fully prepared to take the next step in a more advanced web development or design course or specialization.

From the lesson

Creating HTML Forms

In this lesson, we're going to learn to apply all of the skills we've acquired so far to make a very common, and very useful type of webpage - an HTML form. HTML forms are seen everywhere on the internet and are used to capture particular information from users in a variety of ways. By the end of this module you'll be able to: create basic HTML forms; identify and appropriately use different types of HTML input; validate user input; submit HTML forms; and test how your forms are working and troubleshoot errors.

Module 5 Introduction1:56

HTML Forms User Input7:09

HTML Form Elements7:14

HTML Form Validation: JavaScript6:24

HTML Form Validation: Complex Form Example5:21

HTML Form Validation: Additional Features7:35

HTML Form Validation: Processing5:50

Meet the Instructors

Daniel Randall
Senior Architect at Composer Solutions and Instructor
UC Davis Division of Continuing and Professional Education

[MUSIC]

Hi and welcome.

In our last two lessons, we've been focusing on a new and

somewhat more complex form than we've seen in the past.

In this lesson, I'd like to conclude my discussion by talking

about the button we're using to process the form.

So here are our results from last time and we have a button called Order Now.

This is actually technically not a button but

a span that is sort of decorated with CSS to look like a button.

But we could use an actual button if we wanted to.

If we scroll to the bottom, where we can

see on line 47 our button, we have a table row.

And in this case, unlike the others where we have three table data elements,

here we have just one.

And this table data element has an attribute called colspan of 3.

This means that this element will span the entire table,

since the table has three columns.

And we have here within the table data

a span and that span has the text Order Now.

Like many other HTML elements, the span can have an onclick and I've given them

the onclick the function calcOrder, which we looked at in our last lesson.

And calcOrder is what produces this output based on the user's input.

Notice here, though, we aren't using the input type submit.

Let's look at that by scrolling down just a bit where I have it on line 55 in

a comment.

Now you'll recall from our previous lesson that this is

an HTML comment where we have the less than and

greater than symbols, rather like any other tag in HTML.

But then just inside it, if we have an exclamation point,

two dashes, and then close this one with two dashes.

Everything within these two comment ends will be only for

our reading, it will not be rendered at all by the browser.

So I've stuck this here and this is what an input would look like if

it was a submit, input type submit, unlike type text that we've seen before.

And a value of submit, which would give the submit button a name with submit.

So let's, Let's take this out and try it.

And we will,

Overwrite our current span.

We'll save the table data.

Like so.

And now, Let's put this back.

Now we should have a new button which is of type submit.

When we refresh.

And notice here we have a submit button.

And it's no longer centered because it isn't

using the CSS from the previous button.

But we have it here and we can try it out and see how it works.

Now I'm going to put in the same values I've been using.

And notice these are validating.

Use 5 and then we'll submit.

Now, I want to point out, this is not going to work.

And what I want to do is show you what happens so

you can avoid using a submit button until you're really ready to do some server side

development and have somewhere to actually submit your form outside of the browser.

So, when I click this, notice that what I've got up in my URL is

a question mark and then the name of the first field and my input, which was Fred.

And then an ampersand and the name of the second field,

which is last name, and my value, which was Smith, and

then the same with the phone and the value of the phone and so on.

Now all of this information is what our

form would now like to send to the server because we have used a submit button.

And this is specifically a button of type submit.

So the reason we were using a span or

any other clickable item that didn't have a type equal to submit is so

this effect doesn't happen.

Of course, when we actually have a server and

we want to submit our form to the server and perhaps have the data go to

a database, then we would want you to submit but in that case.

But our course is about client side development and so we're trying to avoid

this complication since we don't have a server for this example.

But later if you pursue what is often called full stack development,

you will have a server side as well where your submit button

can submit this data in this form to a program that can process it.

So that's all for this lesson.

In our next lesson,

we'll continue to look at some of the additional features of JavaScript.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play