Explore
For Enterprise
Join for Free
Log In

Browse
Search
For Enterprise
Log In
Join for Free

HTML Form Validation: Processing

Loading...

Introduction to Web Development

University of California, Davis

4.6 (512 ratings) | 48K 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.

Skills You'll Learn

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

Reviews

4.6 (512 ratings)

5 stars
370 ratings
4 stars
110 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.

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

Taught By

Daniel Randall
Senior Architect at Composer Solutions and Instructor

Transcript

[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

About
Leadership
Careers
Catalog
Certificates
MasterTrack™ Certificates
Degrees
For Enterprise
For Government

Community

Learners
Partners
Developers
Beta Testers
Translators
Blog
Tech Blog

More

Terms
Privacy
Help
Accessibility
Press
Contact
Directory
Affiliates

Mobile App

© 2019 Coursera Inc. All rights reserved.