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.
Another way to give a user a quick and easy way to choose a single option in a form is through list boxes and dropdown lists. Dropdown lists save a lot of space on screen, and the user only sees the menu if they select it, which means you can keep your page looking really nice and clean. List boxes are a little less common these days. They're always visible, but users can select multiple options from them. List boxes are great if you have loads of options for the user to choose between instead of using radio and check buttons.
So, that's why you would use them. Let's talk about the elements you'll need to make them. Unlike the checkbox and radio buttons, you won't be using the input element. Instead, you'll need the select element. This tells the browser that it's dealing with either a dropdown or a list box item. The name attribute of the select tag is used to name the data when sending server side to track user input, so it's important that this is descriptive enough. The size attribute is also important because it tells the browser if the select element is dropdown list box.
If the size is equal to one, then only one item is shown by default, which means it's a dropdown menu. If it's greater than one, it'll be a list box, and that number of items, if supplied, will be shown. If you don't provide the attribute, the browser will default to using a size of one. To add options into these, you'll need to nest the option element which represents the different items in the list. And you may also want to use the value attribute for this if you have specific data you want to send to the server. Okay, so, that's the theory. Let's have a look at this in practice. I'll start with a dropdown menu, and, let's say, it's a dropdown list for a survey asking the user what their favorite food is.
I'll start with a label asking the user to select their favorite food, then opening a select tag, giving it an appropriate name. I'll just call it favFood for now. Then, because it's a dropdown, I need to set the size attribute to one, and then I can close the opening select tag. Next, I need to add in my options. Easy enough, I just open an option tag, give it a value attribute, and then drop the text I want the user to see between the pair. And I'll use my personal favorite first, Pizza.
If I miss out the value attribute, the browser will simply send the text inside the option tag. I can then repeat this process as many times as I like, and I'll do so quickly. One for Pasta and one for Curry. I'll also add in an option telling the user what to do, something like, Select an option, and give this option a selected attribute, which means it's automatically selected when the user sees it, and a disabled attribute, so the user can't select it.
I'll put this option first, so it makes sense to the user. Now that I've done this, I can close the original select tag, and I've got a working dropdown. Okay, now I wanna find out how the user feels about their favorite food. So, let's have a quick look at a list box. This will look very similar to the dropdown. So, I'll open with a label and then select option, giving it a name, and this time I'll use the word Feelings. Because it's a list box, I'll set the size equal to three. This means all three options will be automatically shown to the user, and if I had in, say, five options, the browser will add in a scrollbar.
Okay, so, now I want to add in options. I know I also want to send different information back to the server, not just the name what they selected, but a numerical value to make things easy when we want to analyze the user inputs. So, I'll need a value attribute for these options. Okay, let me open an option element and then add in a value. I'll go with two for now. I'll call this option, I love it so much I could eat it everyday! And then, of course, I need to close this option.
Next, I'll do the same for two other options. The next one I'll give a value of one, and I'll call it, I like it quite a lot! And the last one will have a value of zero, and I'll call it, It's fine. Now, I can close this, and I've got a working list box. The last thing I want to mention here is the multiple attribute, which you can use in list boxes. This attribute gives the users the option to select, you guessed it, multiple options from the list box. To select multiple options, they'll need to hold Control on a PC, or Command on a Mac, then click on all the items that apply to them.
To add the multiple attribute, you just need to drop it into the opening select tag like this. As you can see, the user can now select multiple options in this list, but you should also add in some instruction text telling them to do so if you want to use this feature. And that's it for this video. Dropdown lists are really, really common and a great way to keep a clean user interface while still having a lot of information contained within a page. List boxes are similar and can help you gather information while also minimizing the impact on your screen space.
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.