Svelte Tutorial for Beginners #16 - forms (part 2)

Key Takeaways

okay then my friends so now we've seen a couple of different types of inputs and now I'd like to show you two more starting with checkboxes so how do we bind to those well first of all let's create these checkboxes I'll create a label first of all we don't need to fall attribute for now and this is just going to say skills so now we're going to have a series of checkboxes and next to each checkbox is going to be a skill and we tick that checkbox if the person is going to have that skill right so let's create an input type of checkbox first of all and put after this fighting that would be a skill right and then we'll do a br tag so we check this checkbox if they have at the fighting skill I'm gonna duplicate this a couple of times I'm gonna change this one to sneaking and I'm gonna change this one to running like so so let me just save this and preview what it looks like open the model and now we can see we have these skills right here so we check this we're fighting this for sneaking and this running right so now how do we bind to whether the user has checked these tick boxes or not how do we tell that well one way is to use the checked attribute now remember if we have a checked attribute applied to one of these inputs this is either going to be true or false now if I say that this is true then it's gonna be checked right if it's false it's going to be not checked and by default it's false but we can explicitly say false here as well and that will mean it's not checked right so what we could do is bind to this property so much like we're bound to the value in inputs over here we can bind to the checked property or check attribute in a checkbox so we can say bind checked is equal to some kind of value some kind of variable so I'm gonna say let fighting equal false to begin with and then I'm going to pass in here fighting so that is referencing this variable so now this checked property is bound to whatever this is if this is false then this is going to be false this is true this is going to be true and vice versa if we user ticks this and it becomes true checked then this is updated to true make sense right so we can do that for each one of these I'm going to copy and paste these in like so so this will be bound to a variable called sneaking and this one will be bound to a variable called running and we need to create those so let me duplicate those and change this to sneaking and change this one at the bottom to running like so so now we're storing whether a user is checked each one of these in these three variables and if I output these at the end fighting and then sneaking and then running we should see a variation of true false true false true false etc so if I save that and come over here open the modal and I'm just going to enter in a lot of junk here and then if I choose fighting and sneaking then we should see true true false right that person and we see true true false so that's one way of tracking whether a user has checked an input by binding to the checked property now this is okay but it's a little bit messy especially if we have a lot of different checkboxes because then we've got a lot of different properties instead there's another way we can use and that is by using the grouped attribute so let me comment all of this stuff right out and then I'm going to show you a different way of doing this so let me now just grab all of this I'm going to copy it and paste it down here and then uncomment it like so and this time we'll take away binding to the checked property over here we don't want that anymore get rid of that get rid of that and get rid of this and this time we bind to a group property so let me show you how this works bind group and set that equal to some kind of variable so I'm going to call this skills and I'm going to declare this up here let's skills and I'm going to set this equal to an empty array now I will explain how all this works in a second but let me just paste these in down here so bad to the group skills now we need to give each one a value as well so the value of this is going to be fighting we need to give this a value down here so value is equal to this is sneaking and then the value down here is equal to running so what we're doing here is saying all of these different check boxes belong to a specific group and we're binding to that group this variable right here skills which is an array now whatever a user checks the value of that will be added to this group this particular array right here so if we check this and this then the value fighting and the value sneaking will both be added to the skills array so now we're keeping hold of all of the options that our user ticks in one single array which i think is a bit better so if I save this now in fact let's come down here and instead of outputting knows just output skills let me save that and come over here open the model and blahdy blahdy blahdy blah 56 fighting and sneaking at the person now we see we have this array with fighting and sneaking included if we add running and take away sneaking at the person now we have fighting and running and so forth so that is a nicer way of binding to these check boxes by using a group and the same that equal to an array to track these different values okay cool so that is inputs and let me delete all of that junk there because we don't need that anymore the next thing I'd like to show you is select boxes so at the minute a user can enter in their own belt color right here in a text input but instead of that I want to use a select box for the belt color so let me come down below the check boxes and now let's do another label again we don't really need this for and this is going to say belt color then below that we need a select box and this again doesn't really need a name doesn't really need an ID so let's get rid of that and inside a select box we have different options right so let's do our first option and the option value is going to be black and the text that our user sees is also going to be black so let me duplicate this a couple of times let's do four in total this time I want to change this to orange this black on this black so let's change that to orange and then this and this thing over here will change to brown and then this thing this thing will change to white so this is the actual value of the option that we're tracking when a user selects this this is just what the user sees they don't have to be the same but they are in this case because it makes sense okay so now what we want to do is bind to the value of the Select itself so we say bind and then value and set that equal to some kind of variable which we already have the belt color so this thing over here so what's going on here well when a user selects this option from the drop-down then the value of the Select box itself becomes the value of that option so orange so then because we're binding through the value it's going to update this variable up here belt color so whatever a user selects and that's how simple it is so when I output and belt color down here it still should work let me save this and come over here and try this out the name is going to be Mario the age is gonna be 30 will say sneaking and running and the belt is going to be brown at the person and now we see Mario Brown 30s sneaking and running if we change this to black we can see it still tracks it so easy as pie that's how we use check boxes and also select boxes in felt next up we need a way of updating our people data over here in the app components so we'll do that in the next video