Explore
For Enterprise
Join for Free
Log In

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 (507 Bewertungen) | 48K Teilnehmer angemeldet

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

Kompetenzen, die Sie erwerben

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

Bewertungen

4.6 (507 Bewertungen)

5 stars
367 ratings
4 stars
108 ratings
3 stars
23 ratings
2 stars
3 ratings
1 star
6 ratings

PT

Jan 22, 2017

Even though I haven't been able to purchase the course (yet!), I am very glad that I decided to take this anyway~ It's like an into course for dummies! Except without making you feel dumb~ Lol.

MS

Feb 20, 2019

This course deals with all client side fundamentals of web development. It starts from teaching of HTML to javascript validation of HTML forms. Overall this course is a must for beginners.

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

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

Community

Kursteilnehmer
Partner
Entwickler
Beta-Tester
Übersetzer
Blog
Tech-Blog

Mehr

Nutzungsbedingungen/AGB
Datenschutz
Hilfe
Barrierefreiheit
Presse
Kontakt
Verzeichnis
Partnerunternehmen

Mobile App

© 2019 Coursera Inc. All rights reserved.