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.
Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.
Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.
Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.
Farish is an avid powerlifter, sushi lover, and occasional Funko collector.