Key Concepts

Review core concepts you need to learn to master this subject

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

  1. 1
    Forms 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…
  2. 2
    We 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…
  3. 3
    If 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…
  4. 4
    In 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…
  5. 5
    Think 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…
  6. 6
    We’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”!…
  7. 7
    Using 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. …
  8. 8
    So 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…
  9. 9
    Checkboxes 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…
  10. 10
    Radio 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…
  11. 11
    Even 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 …
  12. 12
    An 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…
  13. 13
    Remember, 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 …
  14. 14
    Nice work interacting with the extremely common and useful element! In this lesson we went over: * The purpose of a is to allow users to input information and send it. * The ‘s action attri…
  1. 1
    Ever wonder how a login page actually works? Or why the combination of a username and password grants you access to a website? The answers lie in validation. Validation is the concept of checking…
  2. 2
    Sometimes we have fields in our s which are not optional, i.e. there must be information provided before we can submit it. To enforce this rule, we can add the required attribute to an element. …
  3. 3
    Another built-in validation we can use is to assign a minimum or maximum value for a number field, e.g. and . To set a minimum acceptable value, we use the min attribute and assign a value. On t…
  4. 4
    In the previous exercise, we were able to use min and max to set acceptable minimum and maximum values in a number field. But what about text fields? There are certainly cases where we wouldn’t wan…
  5. 5
    In addition to checking the length of a text, we could also add a validation to check how the text was provided. For cases when we want user input to follow specific guidelines, we use the pattern …
  6. 6
    Awesome job adding client-side validation to s! Let’s quickly recap: * Client-side validations happen in the browser before information is sent to a server. * Adding the required attribute to …

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo