Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:8Length:58 minutes
Credit js 3
  • Overview
  • Transcript

2.2 Form Markup

In the second lesson of this course, we’ll dive in and write the form markup. Let’s begin.

2.2 Form Markup

Hello, and welcome to lesson number two of this course, where we'll write the page markup. Now, our page is pretty simple, we just have one form in it. So at first, we're gonna have a container which will center everything in the page. And then inside, we're gonna have a title, a subtitle, the form itself, which has three fields, one for a credit card number, one for expiration date and one for security number or CVV. And of course, we're gonna have a Submit button. So let's begin with the page container. We're gonna create a div with a class of card-container and inside, we'll do a header, which will have an h1 plus an h2. The h1 says, pay with credit card, and the h2 says, please enter the credit card number, expiration date, and security code. Now notice these spans here with ids of title-cc-number, title-cc-expiration date, and cc-cvv. Also, notice the active class on the first span. So here's how we're going to use these. Each span will receive the active class depending on which field is currently focused. So if I'm entering stuff in the number in the CC in the credit card number field, then we're gonna activate that particular span. If we're entering the CVV, then we're gonna activate the third span. And we're gonna do that by changing its color a little bit, so we know which field we are currently editing. It's not essential, of course, we don't need to do this, but it's gonna add a nice touch to our form. Now moving on, let's create a main section. And this will actually house the form. Now form action, I'm gonna leave this blank. I'm gonna give it an id of, whoops, card-form and we're going to set the method to POST. Now we're not gonna handle what happens with the data after the page or the form is submitted, but we're gonna set the method either way. Let's create a div called input fields container which will house all of our fields, and each field will have a label and an input. And we're gonna wrap both of these in a div. Div with the class of cc-number-container for once, and inside we're gonna have the label. That's this card number and an asterisk and an input type text with the id of cc-number and a class of cc-input. And let's actually use an id here instead of a class, and let's do the same for the other two fields. So we have two more divs, expiration-date-container which has the expiration date input, and one for CVV. All of these are inputs type text. Finally, let's go ahead and add a Submit button, which in our case will be an anchor tag with the id submit-payment class-"disabled" for now and says Make Payment. And the reason we have a disabled class is because we don't want that Submit button to do anything before the form is validated. Now let's add a footer. And that footer will have a paragraph, an tag, and it says we only accept Visa, MasterCard and American Express. And that's it, basically, that's all the markup we need. Now if we take a look at the page here, we can see how it currently looks like. Of course, it doesn't have any kind of styling on it apart from the reset styles. Now the next logical step, I guess, would be to start styling the page. But here's the thing, we're gonna do things a bit differently this time. We're gonna start with the JavaScript because this entire form is powered by a lot of JavaScript. So to make sure everything works properly before we style, we're gonna start preparing all of the JavaScript code and we're gonna do that in the next lesson.

Back to the top
Continue watching with Elements