Explore
For Enterprise
Join for Free
Log In

Kunst und Geisteswissenschaften
Wirtschaft
Informatik
Datenverarbeitung
Informationstechnologie
Gesundheit
Mathematik und Logik
Persönliche Entwicklung
Physik und Ingenieurwesen
Sozialwissenschaften
Sprachen lernen
Abschlüsse
Zertifikate

Alle Bereiche erkunden

Blättern
Suche
Für Unternehmen
Anmelden
Kostenlose Teilnahme

HTML Form Validation: Complex Form Example

Loading...

Introduction to Web Development

University of California, Davis

4.6 (459 ratings) | 46K Students Enrolled

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.

Lehrplan anzeigen

Skills You'll Learn

Css Code, Html, JavaScript, Cascading Style Sheets (CCS)

Bewertungen

4.6 (459 ratings)

5 stars
334 ratings
4 stars
94 ratings
3 stars
22 ratings
2 stars
3 ratings
1 star
6 ratings

RS

Jun 12, 2018

I am not new in coding, but in here I found something useful. I really recommend this course for new people, because it is very easy steps of how to make some coding or personal web page.

SY

Jun 11, 2019

A great course for beginners. Easily taught. Practice exercises are very engaging. Overall , the course is good enough for you to create a basic website with lots of validations and CSS.

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

Unterrichtet von

Daniel Randall
Senior Architect at Composer Solutions and Instructor

Skript

[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

Coursera
Info
Leitung
Jobs
Katalog
Zertifikate
MasterTrack™ Certificates
Abschlüsse
Für Unternehmen
Für Regierungen

Community
Learners
Partners
Developers
Beta Testers
Translators

Verbinden
Blog
Facebook
LinkedIn
Twitter
Instagram
Youtube
Tech-Blog

mehr
Bedingungen
Datenschutz
Hilfe
Zugänglichkeit
Presse
Kontakt
Verzeichnis
Partnerunternehmen