Learn the elements that comprise the basic structure of an HTML form.
- [Woman] Every HTML form is different, but there are several things that most forms have in common. In this video, we'll be creating a short form which only has a few elements in it. A heading, a question, a place for a person to record their response, and a submit button. When we start to put the form together, we're going to start out with all the elements that you'd have on a basic HTML page. Make sure that you include the meta viewport element as it's shown here. Without this, your web page will not be responsive.
The next thing you'll need is a heading to describe the purpose or the contents of the form. It's not required to have a heading for your form, but it's good usability, as users will get a quick overview of what the form is about without having to read through all the questions. The heading level you use depends on the page structure. So inside the body element, I'm going to add a heading. And I'm going to call this About You. That's going to be the heading for our form. After making changes to the file, you're going to save it by doing command + S in Mac or control + S in Windows.
And then we can go to the browser and see our changes by doing refresh, which is command + R in Mac or control + R in Windows. So, so far all we have on the page is this heading. Each form will have an opening and a closing form tag. You can have more than one form on a page, but the form elements cannot be nested within each other. The form element is the only element that every form is required to have. So after the heading on line 12, I'm going to add the opening form tag and then go down a few lines and add the closing form tag.
The next thing we're going to add is an id. You probably want to have a unique id for each form because it'll help you with targeting CSS to that particular form if you have more than one form on a page. So I'm going to the form element on line 12, and inside the element add an id attribute with a value of questions. Also on the form element, we need to tell the browser what to do when the user submits the form. The common way to do this is to include the method and action attributes on the form tag.
The method is the form submission method, which is either get or post, and the action is what URI the data is being sent to. We'll go into more detail on submitting forms in a separate video. So on line 12 here, still inside the form tag, I'm going to add method="post" and action= and leave that empty. And that's empty because in this sample form I don't actually want to send data anywhere when I hit submit.
So next inside the form you need one or more fields to collect information. And you can do this using the input, select, or textarea elements. So on the form I'm going to go down to line 13 and add a input element and give it a type of text. So this will just be a plain text input that the user can type in. Generally all of your input elements are going to go between the open and closing form tags. In HTML5 you can link to input elements elsewhere on the page, but that is not currently supported in all browsers.
The input element is what's called an empty element in HTML. You don't need a closing tag, it's just a single tag by itself. Next is the name attribute. The name labels the data when it is sent to the server, or however data is processed. So essentially you can think of it like the name of a column in a spreadsheet or a database, and this isn't shown to the user. So on line 13 inside of the input element, I'm going to add name=, then I'm going to be asking the user their favorite color, so I'm going to call this favcolor.
The name attribute is not something that'll be shown to the user. We'll separately add the text of the question that they're going to see on the screen. Next is the id. The id attribute is going to be used to associate each input field with a label, which is what we'll do next. As with any id, it should be unique on the page and descriptive. So inside of line 13, inside the input element, I'm going to add id="favcolor". And this is often the same as the name.
They can be the same value. So if I save and go back to the browser and refresh, now I can see that input field on the page. So there's a place for the user to enter their answer, but they don't see a question yet. So now we're going to add the label element. The label element tells the user what we want them to fill in. So I'm going to add a label element on line 13 before the input. So a label opening tag, then I'm going to ask What is your favorite color?.
Then the closing label tag. Then I'm going to save, and go to the browser and refresh. And now I see the question that we're asking the user. Now just having text on the page before or after the input box might be sufficient for sighted users, but we need to do a little extra to accommodate visually impaired users using screen readers or users using other assistive technology. So next we're going to add the for attribute. The for attribute is added to the label to match the id of the input element.
This will tell the browser or screen reader which label goes with which input. This is the most basic part of accessibility for forms, so make sure you do this for every input and label. It's important to remember that not all users access the web in the same way, so we need to do everything we can to make sure we accommodate users who are using screen readers or other assistive technology. Otherwise, you're going to miss out on potential customers for your business, or people using your website, and it's just the right thing to do to make sure that we include everybody.
So inside the label element on line 13, I'm going to add for="favcolor", and that for needs to match the id from the input element. Now, I put the label before the input, but we can also take this label and put it after the input element so in the browser it'll look like that. You can also take the input element and put it inside the label, either before or after the label.
And these all are going to work the same, so the only difference in which one of these you pick is how it might affect the way you use CSS to style these elements. Finally, we have the submit button, and it's coded as an input element with the type of submit. There's actually different ways to code a submit button. This is the most basic, and we'll get to the different ways in a later video. So I'm going to go down to line 14 and add input type="submit".
And save and go back to the page and refresh. So now we can see we have a short but complete form. We're asking a question, the user is able to respond, and then they can submit their data. So those are elements that typically make up HTML forms. Now that you have the basic structure, you're ready to add input and other elements that will be used to collect data.
- How users interact with forms
- Designing forms that are easy to use
- Following data privacy laws when collecting information
- Choosing which HTML input types to use
- Adding buttons
- Adding interactive validation
- Styling form fields with CSS
- Using positioning and flexbox to create responsive form layouts