Introduction to HTML Forms. HTML forms are a way to capture input and create interaction for your web application. I will begin by creating an empty form element. The form element is the container for the interactive inputs or controls of the web page. Now, inside of the form I want to create a label element for the input. The label represents a caption for the input. Inside of the label, I'm gonna use the for attribute, and set it equal to firstName. The for attribute is just a referencing mechanism to state what input or element this label is tied to.

Now, I will give the label a text content of First Name:, and I will create the closing label tag, and on the screen to the right we can see First Name:. Next, I will create the corresponding input element. Now, input elements have a type attribute, which, in a literal sense, states the type of input that's being used, and depending on the type of input, the input will gain access to certain behaviors and attributes. I will set the input type equal to text.

Next, I will add the placeholder attribute. As the name implies, this attribute sets the placeholder text for the input, and I will set placeholder equal to enter first name, and inside of the input box, there's the placeholder text. Inputs are self-closing elements so there's no need for a closing tag. Now this input is ready to be used and I can type in my name easily. To capture the data that's inside of an input requires the use of web APIs and a little bit of JavaScript, which is out of scope for this video. I'm gonna speed up the video as I change the label, the input type, and the placeholder text.

So now I have an email type input, and on the screen, outside of the label and placeholder text, visually, there is no difference. I can type in an email address, but I could also type in an email address inside of the text type input, so why would one choose one input type over another? There is a large list of input types, and, depending on the type, as I mentioned earlier, they may have different attributes and features based on that input type. For example, the email input offers pattern recognition and the option to accept multiple emails. These features aren't available with a text type input. Now I'm gonna speed up the video again and change this over to a password type input, along with the label.

The password input has a different behavior set than the previous two inputs. I'm gonna type password inside of the input field, and on the screen to the right, the text, as it's being typed, is hidden, and this is the default behavior of this input. I'm going to add two additional attributes to this input. I will type name and set it equal to password. The name attribute is used as a referencing tool. When the form is submitted, the corresponding name attribute value will be part of the submission.

When working with multiple inputs this helps with matching the captured value with the correct input. The next attribute I will type is value, and I'm gonna set it equal to password. Now looking at the input to the right, the password box has text content. Value's the default text value of an input. Now using this for the password input isn't a best practice.

So what are use cases for value? Well, as seen here, value can be used to load preexisting data into a form, typically forms where the data is gonna be updated, such as changing an email address. Value is also used to set the values for form controls such as check boxes and selection menus. So if the form is complete, what about form submission? I'm gonna create a new input, and the type will equal submit. It will also have a value equal to submit. What essentially has been created here is a submit button for the form, and value represents the button text. Now, this doesn't work in its current state. As I mentioned earlier in the video, this does require the use of web APIs and JavaScript. And that's it! Thanks for watching at Cloud Academy.

Introduction to HTML Forms

Learning Objectives

Intended Audience

Prerequisites