Checkbox and Radio Buttons

Developed with
QA

The course is part of this learning path

Developing Web Applications with HTML and CSS
course-steps
7
certification
1
lab-steps
2
description
1
play-arrow
Start course
Overview
DifficultyBeginner
Duration32m
Students36
Ratings
3/5
starstarstarstar-borderstar-border

Description

Forms are one of the core parts of HTML functionality. They let users submit key information and are used in every industry and on most websites. They’re a big topic, so in this module we’ll go into a lot of detail. You’ll learn about forms in general, text and push buttons and multi-line inputs. Then we’ll move onto checkbox and radio buttons, as well as list boxes and drop down lists. One of the more detailed lessons in this module comes up next, with a deep dive into some of the input types you can use in your forms. Finally, we’ll end the module off with form validation and a little bit about form validation, server scripting and a few security issues you need to be aware of.

Transcript

A lot of information we enter into forms can actually be captured using either a checkbox or radio buttons. The main difference between the two is that you can select only one radio button, but you can select many checkboxes. Imagine a survey. Maybe it asks you if you're younger than 30, older than 30, or prefer not to say. This is a classic example of the use case for a radio button. Maybe in the same survey, you're asked which of the following toppings you like on a pizza, cheese, tomato, ham, pineapple and cucumber.

For this kind of list, you'll want to be able to select multiple options, so you'd use checkboxes. Okay, so that's the use case for checkboxes and radio buttons, but how do you actually add them into a form? So, checkboxes and radio buttons use very similar marker. Both use the <input> tag with the type, name and value attribute. The value is the word that will be sent back to the server, so it's important that the value is correct. Type will either be radio or checkbox, depending on if we want the item to be a radio button or a checkbox.

Last up, the name attribute groups the buttons. This one is important because if one button in a group with the same name is selected, all the other buttons with the same name attribute will be unselected. This means that we need to make sure that checkboxes have different name attributes. Let's take a look at how this works in practice. Let's say I'm developing a page that lets users order a hot drink. Maybe tea, coffee, and hot chocolate. I want to let them order only one of these, but also to be able to decide if they want milk and sugar. Easy enough, I'll start with tea.

So, first, I need to open an <input> tag. Then I'll give it a type. Because I want the user to only choose one drink, I'll make this radio. Then I'll give it a name, which will be drink. All I need to do now is give it a value, which will be tea, so that when the user submits this order, the sever will be able to record what they want. Now I can close this input and add a label for tea next to the tag, so that the word tea is next to the radio button. I can repeat this process for coffee and hot chocolate. So, one second while I do this.

Great, now let's add in some checkboxes for milk and sugar options. This will look very similar to radio buttons, but the type will be checkbox and not radio, and they will also have different names. So, milk first, and I'll give this one the name milk, and add a suitable label. Next, I'll do the same for sugar, and give it the name sugar. Great stuff, now just for consistency, I'll quickly add in a submit button, which we'll call vend, so that the user can place their order. This is easy enough, all I need to do is make the button type submit like this, give it a name and value, and close the tag.

Now all that's left to do is close the form, and, just like that, you can now make checkbox and radio buttons and use them in your own design.

Lectures

About the Author
Students3109
Labs8
Courses29
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics