Label and field interaction

- [Instructor] In this chapter we're going to take a look at some of the basics involved with creating inviting, interactive and easy to use forms. And we're going to start with some simple enhancements you can make to your forms to help make them easier to understand and navigate. A well-designed form should help guide the user to do the right thing when they are working with the form's content, and one of the most effective ways to help users fill out web forms accurately and efficiently is to make your form feel interactive and responsive. So let's start by opening up the exercise files for the course. Now there's a couple of ways you can do that. And again, this is going to be different based upon what editor you're using, but here in VS Code, I can either click on Open folder and then choose the Exercise Files folder here on my desktop or wherever you put it. But my personal favorite is just simply drag and drop the folder right onto the app. And there you can see that that's now open. So I'm going to close that and let's maximize. Okay, so let's take a look at our first example, and that's going to be here in the Form Programming Fundamentals chapter, and it's called labelfield_start. And let's collapse that down. Okay, so this is where the live server extension comes in handy. So let's go ahead and take a look at this in the browser and see what our base form looks like before we make any changes. So the way you can do that is if you have the extension installed, you can just click on the little Go Live button down here, which appears when you've installed the extension, or, let me close this, you can also right click and choose Open with Live Server. And I'm using Firefox, so that's what it comes up in. So let's start by taking a look at the base form, and you can see that it's a pretty straightforward set of controls for entering the kind of address information that you would expect to find on an eCommerce site. So let's go back and look at the code. So the first thing I want to draw your attention to is the use of the label tags here in the form. And you can see that each label is associated with each input field using the for attribute. Now labels are great because you can click on them to activate the field that they are associated with. So let's go back and try that in the browser. And remember, if you're not using live server, you can just bring this file up in Firefox directly, or whatever browser you're using. And let's go ahead and click, and you can see that when I click on the field, it's associated input gets the focus and becomes active. Now notice, however, there's no visual indicator that I can click on these labels, right? The cursor doesn't change. I just kind of have to know that I can do that. So let's fix that first by adding some code to make it more obvious that the labels are clickable. So back in the code what I'm going to do is open up my style sheet definitions, and I'll scroll down to the bottom and I'm going to add a CSS rule for the labels that say that when the cursor is over them, it should be a pointer, okay? So let's go ahead and refresh that back in the browser. And one of the benefits of using live server is that the browser automatically refreshes for us. So now you'll notice that when I mouse over each of the labels, I'm getting a cursor change that indicates that that's clickable. So that's a pretty measurable improvement to the response of this, of the form, but we can still do better. So notice that when I click on the input control, there's not really much of a visual indicator other than the cursor that shows where the focus is. Now some browsers have big thick outlines that they put around the input field, but not every browser does that. And depending on your existing style definitions, that may have been removed either by you or by some other corporate decree that says they can't be there. So let's give the user a better visual indication of where the currently focused form field is. And this can be really helpful in a more complex form or for people who have vision impairments. So back here in the code, let's add some more CSS. First, let's highlight the input element that the user is hovering over with the mouse. So I'll write input, and I'm looking for a text input fields, and I want to trigger off the hover state. And I'm going to change the border color to dark blue and we'll make the border width one pixel. All right, and then I'll change the label when it has the focus within, I'll make the label's color blue. So that way we have another visual indicator of where the focus is, okay? And then one more time, I'll write input when the type is equal to text and when it has the focus, we'll make the border color a one pix solid dark blue. All right, so now let's save and let's go back to the browser. And now let's give that a try. So I'm going to refresh, and you can see that when I'm moving over the fields, now when I hover, you can see that there's a little dark blue outline that's being applied to each of the fields, right? And when I click and give it the focus, you can see that the border is a dark blue color and the label color changes to blue, right? So the form is starting to feel like it's more alive, it's helping us figure out where we can click and shows us what happens when we do, but we can still do a few more things to make the form more accessible and interactive. So first, let's make the first name input field selected by default when the page loads. So we can do that by adding the auto-focus attribute. So back here in the code, let's go to the HTML and for the first name input, I'm going to write auto-focus, right? Next, we could add placeholder attributes to the input fields to demonstrate an example of the kind of data that that field expects. Now it's important to realize that placeholders should not be used in place of labels. They're just there to show the user an example of the kind of data that the field expects. So I'll put a placeholder on the first name and I'll put a placeholder on the second name, right? And then for the address, we'll have a placeholder that shows a fake address. And then for the zip code, let's put a placeholder for a five-digit zip code, and that's a US zip code, by the way, it'll be different for you if you live somewhere else. And then for the phone number, we'll do something similar, we'll have a placeholder phone number. All right, so let's save this. And once again, let's go back to the browser and now you can see that our form looks and feels much more interactive and even inviting than it did before. So the first input field is auto focused and ready to type in, so the user doesn't have to tap into it or click into it. And each of the input fields shows us what kind of data should be there. And we're getting this nice little hover effect as we go over each one. And then when I click on the label, I get the focus and the label color changes. So this really demonstrates how much of an impact you can have on a form's usability just by making some simple adjustments in your code.