This practical course offers an introduction to HTML forms, covering form elements, labels, inputs, and types.
- Learn what is a form element
- Learn about form labels
- Learn about form inputs and their different types
This course is intended for anyone who wants to learn about HTML Forms.
Anyone with an interest in HTML forms in general.
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.
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.