Guided Practice with HTML Form Validation, Part 1

Loading...

來自 University of California, Davis 的課程

Introduction to Web Development

400 個評分

University of California, Davis

Introduction to Web Development

400 個評分

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.

從本節課中

Creating Web Applications

In our final module, we're going to explore the basics of designing web applications - programming useful and dynamic webpages that allow our users to interact with them. By the end of this lesson you'll be able to: distinguish between client and server-side development; apply advanced JavaScript programming skills to create logic with selection and iteration; create new features for applications; create more advanced HTML forms; and practice and learn additional troubleshooting and problem-solving techniques. The module wraps with a final peer review activity that will draw upon all of the skills you've learned in this course.

Module 6 Introduction1:42

Client-side versus Server-side Application Development4:28

Features in Web Applications: The While Loop5:16

Features in Web Applications: The For Loop5:02

Creating New Features in Web Applications3:37

Guided Practice with HTML Form Validation, Part 15:42

Guided Practice with HTML Form Validation, Part 27:44

與講師見面

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 an approach for creating new features in web applications.

And in this lesson, we'll be doing some guided practice for

the development of your HTML forms with validation.

This practice should be helpful while you're working on your project for

this course.

So the first thing I think you should do

is spend a little time thinking about what kind of form you want to create.

You can look at forms on the internet but I recommend

considering both how you want the form to look and what it's purpose will be.

For instance, will it be a customer service form,

will it be a form that's specific to some business.

Will it be an order form for ordering a product?

Will it be a form for submitting a recipe online?

There are many possibilities for your form, so give us some thought.

Next, I recommend starting with a template that we looked at a few different

templates in this class.

And you can use any of those or you can use one that you developed along the way.

But it's usually a good idea to avoid

coding the parts of your form from scratch each time.

Now early on it may be good practice, but

eventually we begin to make typos and things that we really do know how to do.

So the typos just slow us down and we weren't learning anything new.

So starting with a template of sorts to save yourself some typing and

mistakes is a good idea.

So here I have a page that we've worked with before at least a version of it.

And I have my HTML tag, my head tag,

I have a title, I have on line 7 a link from my CSS.

On line is not within 13.

I have my script tags and I have a pretty good idea that these are working.

This will save you time if you aren't doing it already,

you should give us a try.

Now because I know I want to go to form, I have form text.

And I have more elements that I really need

from our previous example, and here it is.

So, you could start with something like this if you had it available and

merely add and delete as needed.

The advantage here is that the quotes are in the right places.

You have some of your events ready made.

You'll get a little reminders on the syntax based on what you've done before.

So start with something like this and get all the elements of your form in place.

Now, if you miss one or change your mind at some point of course you can make

one of occasions but I recommend you work methodically on this and

get your form elements all into place.

Next I recommend that you work on your CSS.

Now we talked about in a previous lesson how

it's a good idea to give just a very basic version of your CSS working so

that you know your file is connected properly for your project.

So here we have basic.css, it has just a few items,

it colors the page its style is H1 and gives a test class.

You can do this or even at lest just to get it working initially.

And as we can see here, it is working properly.

At each point make sure it works.

Now, this word has come up brings us to another point.

And that's to ones you have your

script syntax in place put a little bit of JavaScript something that's going to be

visible to you in place to make sure this is working.

So for instance this tells you that there isn't some typo in your tags at each

step you want to find a way to test it.

So, notice that I tested styles I verify that I could see the elements of my form.

I tested, the JavaScript is working, do each one of these things in turn and

get it working to your satisfaction before you move on to the next point.

And avoid the temptation to do too much at once,

changing too many elements before you're able to save the file and test.

Save regularly and test regularly.

This will save you a lot of time because you'll know when something stops working

that it was a change you made in the last few moments that is probably the culprit.

If you instead work for 30 minutes or even 60 minutes,

between tests and your form no longer works.

You'll have a difficult time knowing what exactly you did that

made it stop working or worked differently than it did before.

So this is all previous lessons we'll continue with the same guided practice and

add our JavaScript functions for validation in the next lesson.

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2019 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取