Deliver Radio Button Field with airSlate SignNow

Deliver radio button field

we're going to take a look at some new controls we're going to start off with radio buttons so i have this little [Music] project i set up all i did is create a new project i called it pizza order because we're going to pretend we're creating an application that you might use at a pizza parlor somebody calls up to place an order you type it in the computer hit enter and gets the order placed or prints out a receipt for the cook or whatever so let's take a look at some of the things let's first let's do a button [Music] i'm going to put a button on and accidentally put two buttons on move this one down here and this is our place order button this is where the magic happens this may not be what our form looks like when it's done but at least we have a button to use when we get there um let's think about when you order a pizza usually the first question they might ask is this for pickup or delivery right so let's create a spot where somebody can select pickup or delivery and to do that we're going to use a radio button so here's the radio button control i'm going to drag it onto my form [Music] and it includes text beside itself right here it's got text for radio button i'm going to say pick up i'm gonna say pick up because it's not a pickup truck okay and let's do another radio button and look and notice the little lines visual studio puts when i when i put these on take them off it really helps me line line them up very well this one we're going to call it's text we'll say delivery okay now i didn't name either one of them and i do need to name them so i'm going to come up here radio button one this first one we made i'm gonna call rad pickup i won't use spaces here and this one will be rad delivery now you've used computers enough in your life that you probably instinctively know how radio buttons work and that is if i check one i can't check the other whichever one i pick the other one gets unchecked okay notice when our form first started that neither one of them were checked okay that's not necessarily what what we want to happen maybe it is maybe it isn't so i'm gonna lead into this right now we have to do input validation with our forms checking out whether one of the options is picked or not if we want to make sure one of the options is always picked it helps to start out with one already picked because the users don't have to think about it so if it's somebody at a pizza place taking phone orders maybe delivery is the default that we want to pick so we can go to the delivery and it has a checked property that we can set to true and if we do that it starts out with delivery automatically check now we can change it to pick up we can go back and forth but it helps to start with one that's a whole block of code we don't have to worry about doing to make sure that they've picked one of the options maybe that's not how we want our form to work uh maybe we don't want to have one started to force them to pick one but then we'll have to have code to make sure that they picked one of them okay so that's how a radio button works it's really pretty simple those are the two fields we tend to use we text for the display we have to give it a name and then we the checked property is what we use in our code if delivery is checked maybe we'll add two dollars on when you know when somebody clicks the place order button will say hey if if delivery dot checked so this is if rad delivery dot checked equals true um we'll add two dollars onto the price or something when when they do the order okay so we'll get more into that as we go here what else all right we're ordering pizza so i want to do radio buttons for them to choose between thick crust and thin crust so let's do a radio button we'll come down here call this rad actually we'll put thick crust this is the text we'll start with thin crust and then for the name we'll call it rad then crust makes sense right great let's put one on for thick crust and down here we'll put thick crust i messed that all up all right there's our options for thick crust or thin crust so let's start our application do we see a problem here all the radio buttons on my form i can only check one [Music] one at a time that that's probably not good also it would help to delineate the sections of this form that people need to pick out so we're going to learn about yet another control last week we did panels and you used a panel in the application you did last week and a panel is a way that we can group things together on a form okay and it visually groups them together this week we're going to work with another control called a group box so here's a group box right here and it's very similar to a panel it lets us put things together inside an outline so people can see the parts of our form but group box also works in conjunction with radio buttons to define which radio buttons work together so i'm going to move these out of the way and i'm going to move these out of the way okay and let me put a group box up on my form okay there's my group box and notice group box has a light line that goes around it but it also has it's like own built-in label so that's in a text property i can change that delivery options i'm going to take these two radio buttons and put them inside [Music] my group box okay i actually don't like the way those fit i want to put down a little bit yeah that looks nicer and i can even make that smaller the nice pop part about having i'm going to stretch that out so delivery options goes across um once they're in the control okay this is another container i can move the container around and redesign my form and the buttons go with it automatically that's kind of nice let's run our program notice thin crust and thick crust are now separate from pickup and delivery okay so now the group box has really helped us out here let's do another group box we'll put it right here and this one will be for and we could name our group box if we wanted we're just setting its text field if we're not going to use it in code again i don't see a big need to give it a name so we're going to use our radio buttons in code probably but we're not going to use our group box names in code we just set their text field um maybe this is crust type okay and then we put our radio buttons for thick and thin crust inside here our form starting to come together let's get these aligned on the left side maybe you should be picky about your forms they should look nice we don't want to design bad user interfaces for our customers okay and for our for our workers for that matter again i don't have anything checked by default for my crest type maybe that's because i want i'm forcing somebody to ask for that one or maybe i do want to set a default normally people get at our business maybe people normally get thin so we'll set our crest type we'll set our check for thin crust we'll set his checked property through okay so when it starts out most of the time people want delivery and they want our oh actually let's pretend we're in chicago it shouldn't be thin crust it should be thick crust nobody they didn't call it pizza in chicago if it's thin crust thick crust we'll set that as our default we'll pretend our pizza place is in chicago okay so normally people want delivered thick crust so that's what we'll set our defaults to that way we only have to change them if they want something different okay now we could do radio i'm not going to do the entire form i can do radio buttons for the for the size of the pizza small medium large 14 inch 16 inch 10 inch you know whatever we want to do you get the idea of how these radio buttons work all right in the next video i'm going to show you another control the checkbox