Create Semantic, Accessible HTML for Form Selects
Continuing on from our text inputs, we'll make our next field type including a select with the multiple attribute. Additionally, we'll include these fields in a disabled state. Both types will use the .form-group created in the previous lesson for a touch of layout styling.
You'll notice the same pattern here as with text inputs in that to make select inputs fully semantic and accessible you will need to add a for attribute that matches the id of the select element
Instructor: [0:00] In this lesson, we will create the HTML for our select fields. Our first step is to create the partial, which we'll create in the includes directory, and the file will be named select.njk.
[0:13] In order to help us focus on the output of this file, we'll go into our index and we will comment out the existing include for the text fields and add our include for select.njk. On save, you see that we now have a blank screen, so that we can start to add our select markup.
[0:33] Just as we learned for the text fields, selects also require a label for full semantics and accessibility. We'll label our first field simply "Select." Next, selects also have their own unique element aptly named select.
[0:50] The main identifying feature of a select is that the options presented in the dropdown are also within their own unique HTML tag, which happens to be the option tag. I've placed it in a few options and saved this file, so that you can see that it has been rendered up to the page.
[1:07] Let's look at the anatomy of these options. You'll note that it has both a value attribute and a string between the option tags. The string between is what is shown to the user and the value is what will be submitted as the value of the select field.
[1:24] While most often you'll have the value match the visual label, there may be instances where due to a database or application structure, you would want them to be different, where the username is more friendly and the value is more centric to that database option.
[1:39] Just like with our text inputs, we also need to add an id to our select and we'll copy that for the name value as we learned about previously. We also learned, previously, that in order to fully associate the label with the select we should not rely on the visual arrangement, but also add the for attribute on the label, and that value should match the id.
[2:00] Now, we have our select. It's fully functional. While we're not going to do styling of the select in this lesson, we will wrap this field in our previously created form-group class, which provided some spacing styles.
[2:14] For our text inputs, we also added a class directly on the input of form-field. To prepare for future styling of the select, we will create a nested div that contains that class, instead. We'll add form-field and wrap the select with this div. Now that that form-field class has been applied, what that's giving us right now is this bit of margin that we added when styling the form-group component.
[2:39] With that, we have the essentials for our primary select field. We are going to duplicate this. We also want to represent a multiple select.
[2:48] We'll first update the label and then we'll make sure to update the for id and name attributes. Then, in order to make this a multiple select, we simply add the attribute of multiple to the select element itself. You can see that that has now been rendered to the page.
[3:04] The number shown here is going to vary across browsers. We're going to bring that in alignment when we get to the styling portion. You can see that one of the hallmarks of the select is that it has a capped height and is scrollable.
[3:18] What I'm going to do is duplicate both of these fields, so that we can add a disabled version of each. We'll update our labels to "Disabled select" and "Disabled multiselect." We're going to add -disabled to all of these and on the multiple select same thing we'll add -disabled. Then, on the select element itself, we'll add that disabled attribute and again on the multiple select as well.
[3:45] On save, we now see that those have been added and similar to our text inputs, we see the native browser style has applied a bit of a grayed-out design to each.
[3:55] In summary, we created our select partial and then added markup to represent a default select, a multiple select, and disabled versions of each.
[4:05] Similar to our text inputs, we ensured that we had a unique id and that the for attribute on the label matched the id value on the select. We also reused our form-group class to enable our form layout styling that we have so far and added a wrapping div around the select as a starting point for the styling that will be applied.