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