HTML Form Validation: Complex Form Example

Loading...

Aus dem Kurs von University of California, Davis

Introduction to Web Development

416 Bewertungen

University of California, Davis

Introduction to Web Development

416 Bewertungen

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.

Aus der Unterrichtseinheit

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

Treffen Sie die Kursleiter

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

[MUSIC]

Hi, and welcome to the lesson.

Last time we talked about the importance of form validation, and

we use JavaScript and regular expressions to validate user input.

In this lesson we'll look at our most complex form example yet.

Notice here on line 12 we have a form tag.

And this form tag has an action attribute.

If this form was going to be sent to a server, the action would have the name of

the program on the server that would process the form.

Since we're only doing client-side development in this course,

we'll use it as a placeholder.

Notice too that this form has a table tag within it.

This table is providing structure to the form.

Notice that this table has rows, and each row has three table data elements.

If we look at the form, we can see three columns of five rows.

The left most column has the label, the middle column has the input, and

the right most column has what we call a prompt, which gives the user some idea of

what they should be typing into the input field.

Notice that this table has a border of 0.

I'm going to give it a border of 1, which will give it a one pixel border so

we can see the boundaries of the table on the webpage.

Now, you can see the actual table.

Now, this particular view doesn't really look very attractive, and

it's probably better without the lines,

but it shows the structure that the table is giving the form.

Let's go back, and turn that off.

We could turn it on later if we wanted to.

So, notice that we've got the label, the input, and the feedback, all as classes.

This is going to allow us to apply a consistent style to every label,

input, and feedback in the form.

If we go to CSS, we can see here we have style for

the body, the table, the table data and

then down below we have selectors for the IDs and classes.

Like ID fullpage, or a class, label column, input column, and feedback column.

And these give a consistent style as I mentioned

to each of those elements in the form.

Now, this form also has JavaScript for validation, and we can see it work a bit.

If we refresh we'll get rid of the table, and if I put in just one,

We'll try a letter, one letter and click away.

The onblur event fires, and this field requires more than one letter of input.

So what's being called there,

Is this function onblur validateFirstName,

and on the last name, we have validateLastName, but

notice in this HTML, we don't have any JavaScript tags.

Well, we do really on line 8, but no JavaScript to go with it.

We're seeing here for the first time the src attribute

of the script tag where we can provide a filename that contains our JavaScript.

This is very useful when our JavaScript is longer and

we like to keep it in a separate file.

And we have that here.

So here's our validateFirstName and our validateLastName functions.

They work very similarly, they have a different regular expression, but

are otherwise essentially the same.

In validateFirstName, the regular expression allows lowercase and

uppercase letters.

It allows a space, it allows an apostrophe, and a dash.

And it has a length, between 2 and 15 characters required.

The validate last name is similar, except it's between 2 and 25 characters required.

So here, we're doing the regex test of the field for

first name, and below here for the field of last name.

And if the test is successful,

this will return a true and we'll get a style green and the word valid.

If the test fails, meaning that the user's input doesn't match this regular

expression, then we'll get red and an error message which we already saw.

So let's return.

We'll put in some more letters.

And now that we've put in enough letters, we're getting a message valid.

And if we do the same thing here, we'll also get valid.

So that's all for this lesson.

Next time we'll continue looking at this form and

some of its additional validation and features.

Durchsuchen Sie unseren Katalog

Melden Sie sich kostenlos an und erhalten Sie individuelle Empfehlungen, Aktualisierungen und Angebote.

Coursera arbeitet mit erstklassigen Universitäten und Organisationen zusammen, um Online-Kurse anzubieten und dadurch universellen Zugriff auf die weltweit beste Ausbildung zu ermöglichen.

© 2019 Coursera Inc. Alle Rechte vorbehalten.

Aus dem App Store herunterladen

Erhältlich bei Google Play