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