Forms
Take this course and learn about the inner workings of an HTML form! Learn how to create your own form and integrate HTML5 validations.
Start
Key Concepts
Review core concepts you need to learn to master this subject
<input>: Checkbox Type
<textarea> Element
<form> Element
<input>: Number Type
<input> Element
<input>: Range Type
<select> Element
Submitting a Form
<input>: Checkbox Type
<input>: Checkbox Type
<input type="checkbox" name="breakfast" value="bacon">Bacon 🥓<br>
<input type="checkbox" name="breakfast" value="eggs">Eggs 🍳<br>
<input type="checkbox" name="breakfast" value="pancakes">Pancakes 🥞<br>When using an HTML input element, the type="checkbox" attribute will render a single checkbox item. To create a group of checkboxes related to the same topic, they should all use the same name attribute. Since it’s a checkbox, multiple checkboxes can be selected for the same topic.
- 1Forms are a part of everyday life. When we use a physical form in real life, we write down information and give it to someone to process. Think of the times you’ve had to fill out information for v…
- 2We can think of the internet as a network of computers which send and receive information. Computers need an HTTP request to know how to communicate. The HTTP request instructs the receiving comp…
- 3If we want to create an input field in our , we’ll need the help of the element. The element has a type attribute which determines how it renders on the web page and what kind of data it can…
- 4In the previous exercise we created an element but we didn’t include anything to explain what the is used for. For a user to properly identify an we use the appropriately named element. T…
- 5Think about all those times we have to put sensitive information, like a password or PIN, into a . We wouldn’t want our information to be seen by anyone peeking over our shoulder! Luckily, we hav…
- 6We’ve now gone over two type attributes for related to text. But, we might want our users to type in a number — in which case we can set the type attribute to… (you guessed it)… “number”!…
- 7Using an is great if we want to allow users to type in any number of their choosing. But, if we wanted to limit what numbers our users could type we might consider using a different type value. …
- 8So far the types of inputs we’ve allowed were all single choices. But, what if we presented multiple options to users and allow them to select any number of options? Sounds like we could use checkb…
- 9Checkboxes work well if we want to present users with multiple options and let them choose one or more of the options. However, there are cases where we want to present multiple options and only al…
- 10Radio buttons are great if we want our users to pick one option out of a few visible options, but imagine if we have a whole list of options! This situation could quickly lead to a lot of radio but…
- 11Even if we have an organized dropdown list, if the list has a lot of options, it could be tedious for users to scroll through the entire list to locate one option. That’s where using the element …
- 12An element with type=”text” creates a single row input field for users to type in information. However, there are cases where users need to write in more information, like a blog post. In such ca…
- 13Remember, the purpose of a form is to collect information that will be submitted. That’s the role of the submit button — users click on it when they are finished with filling out information …
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
Forms
Start