Create Radio Button Inputs Allowing Users to Select One Option

hey this is ralph and in this video i want to show you how easy it is to create radio buttons radio buttons are ideal when you want your user to be able to select one out of a set of options and you want all of those options displayed on screen at the same time so they can easily pick the comparative would be kind of like a selection menu that would produce a drop down list of options so let's get to it on my page i've already got a section here to display my radio buttons and radio buttons are a little bit weird in the fact that they do use a label but we would generally put the label to the right of the input whereas with a text box or select menu input text we would put the label to the left of the input and you'll see what i mean exactly so i'm going to start off with input type equals radio so of course type equals text that gets us a text box type equals password gets us a password box type equals color for a color input type equals date for a calendar or date input type equals email type equals url type equals tell where's tell at type equals telephone all those look like regular text boxes but they just have a slight different effect on a user on a user's keyboard if they're on a mobile device but i want type equals radio now that's actually enough to see something but it's certainly not as much as we need to do let's see what we get right now input type radio let's jump over to my browser and there it is right there there's my radio button i've got one and i can click on it and activate it notice i can't click on it to deactivate it that's a little different than a check box another useful tool so radio buttons are weird in that you would never just do one radio button you would always do two or more radio buttons so let me go ahead and do another radio button there we go so i've got two radio buttons and of course there they are if i click on the first one great and if i click on the second one i select it but my browser doesn't know that these two radio buttons are connected you know what i'm going to do really quick i'm going to jump over to my styles and i'm going to say input type equals radio and input type equals check box and i'm going to do transform scale um two yeah this will uh double these these little guys up in size and in fact i guess apparently while i'm here margin right how about uh there we go so now i've got those radio buttons however when you use radio buttons the browser needs to know that they are part of a family part of a set and we're going to do that using the name attribute so back over in my editor back on my html file i'm going to make sure that these buttons share the same name name equals we'll just say shipping and i can just copy this and paste it there they go they share the same name so check this out now when i click on my first radio button it gets selected but watch what happens when i click my second or s and my second radio button there the first one gets deselected and now the second one gets selected so they're part of a set and they allow me to jump back and forth now if i had another set of radio buttons on this web page they too would have the same name they wouldn't have the same name as this set they would have their own name so radio buttons in a set share the same name but they do need to be distinguished from each other and of course that's where the value comes in or and or the id so i'll actually do both id equals radial one and i'll go ahead and also do value equals radio one now this is for shipping so um we could just go ahead and call this uh standard for this one id equals radio 2 remember two elements should not share the same id on a web page and value equals express now although these they have unique ids and they have unique values that's still not very helpful to the user so that's where that label comes in i do need to supply a label so after my first one i'm going to go ahead and do a label for radio 1 and this is going to be standard shipping and then after my second one i'm going to do a label for radio 2 or rad2 express shipping so now i've got those inputs and those labels now if you recall the four attribute on the label connects to the id attribute on the input that's going to allow the user to click on the label in order to activate the appropriate shipping now clearly with my margins and stuff it's a little bit misleading it makes it look like it makes it look like my radio button is next to the previous one but that's okay but that's the basics for radio buttons so the key is input type radio and then they're going to share the same name however they're going to have unique ids and unique values then we can use our javascript in order to find out which radio button selection the user picked thanks for hanging out with me you

Channel: Six Minutes. Smarter.

Views: 41,864

Keywords: 6ms, six, minutes, smarter, ralph, phillips, rrphillips, cis, cocc, central oregon, community college, computer and information systems

Id: widROy5qcDc

Length: 5min 55sec (355 seconds)

Published: Mon Sep 27 2021