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.
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
Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.
Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail.
Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL.
Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.