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.
StartKey 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