Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.2 hours
Getstartedhtmlcss
  • Overview
  • Transcript

3.7 Form Elements

In this lesson we explore some of the more common input types used in modern web development. We also explore a few different ways of allowing a user to select items from a predefined list.

3.7 Form Elements

Welcome back. In the last video we learned how to use forms to better fill out our Contact Us page. We learned how to build the form and then use the input type of text or the text area type as well as labels and submit. In this lesson we're going to go through a couple of more input types and HTML tags you can use inside forms, such as the radio button, checkbox, or drop down box. Let's get started. Checkboxes are great anytime you want to ask your user a question that only requires a yes or a no or a true or a false. Let's take a look at that now. We'll toggle back to Sublime and we'll create a new line break and then we'll do an input. But this time the input is going to be of type checkbox. After that we'll ask our user, would you like us to email you a copy? And then we'll save it and refresh. When we come back, we see we have a check box that can be clicked for a yes or unclicked for a no. And like I said, in this situation a checkbox makes perfect sense. It's a yes or no answer. Do you want a copy of this? Yes. But what if we wanted the user to choose between a certain set of selections, like do you like widget one, widget two, or widget three? If we want them to pick, we want to use a radio button. So let's look at how we would create a few radio buttons now. So I'm gonna toggle into Sublime, and we'll get rid of this checkbox, and we'll replace it with an input. And this input will be type='radio' and we also need to give this entire group of radio buttons a name so the browser knows that they're part of the same group. We'll choose Widget 1 and then I'll just kinda copy and paste these to create the other two. So Widget 2, 3, and obviously I need to change the text there and we'll save that down. We'll toggle over. Refresh. And now we have Widget 1, 2, or 3 where I can only check one at a time. The browser will automatically uncheck all other selections anytime I make a new check. So this is a great solution anytime we have a limited number of options, like two or three. But what if we were to choose say, our country or state? That could be a huge list and take up a ton of space with a bunch of different radio buttons. For that case, we need something more like a select or dropdown list. Let's look at that now. So let's go ahead and toggle into Sublime, get rid of these radio buttons, and in their place I'd like to do a select tag. And within the select tag, what I want to do is create options, so each option is surrounded in option tags. And I'll just copy and paste Option 1 a bunch of times. I create about ten options here. That looks about right to me. And through the magic of speed editing I'll turn these into Options 1 through 10. And we'll save that, toggle back, and refresh and we see Option 1 through 10 in a nice, neat, dropdown format. But truth be told we really don't need any of these selector checkboxes or any of this. Some I'm going to just highlight it and delete it. And then we'll go ahead and save and refresh to go back to our normal Contact Us page. In this lesson, I showed you how to let your users choose from a set of options with either a check box, a radio button, or a drop down list. In the next lesson, I'll show you some more fringe input types like the date time, password reset, and telephone field. Thanks for watching.

Back to the top