Form Input Focus

[00:00:00]
>> Kevin Powell: Now a very big part of CSS is making our page look the way it does, getting things positioned in the right places through our layouts, grid, flexbox, positioning eventually comes in there, but we also have to deal with user interaction, and this is really important because it's good to provide feedback to the user while they're using your website, your web app, whatever it is, so they know if something can be clicked on, if they know there's the focus fields, input, and other things like that that we've talked about.

[00:00:28]
Without these visual clues, people can be really confused. We saw that earlier with the, as a simple example, the ESPN site when I was tabbing through and I just didn't know where I was. I'm getting no feedback from the website. It's a very terrible user experience. The more feedback that we can provide, the better the user experience, more conversions, everything else, everybody's happy. One of the main areas that we see user interaction is when we start dealing with forms, because that's something that the user is not just scrolling through, reading, even the selection we saw before as a form of user interaction where we can change the selection color, but forms are an area where we can provide a lot of user feedback.

[00:01:08]
So I want to look at some of the different ways that we can do some valid or not validation, but provide user feedback using CSS on forms. There's quite a long list. I have put a link here to a full list because there are a lot more things that we can do than just these, but these tend to be the ones that we're using the most often. Really important is this does not replace server-side validation.

[00:01:33]
I've done a lot of demos and people always say in the comments on YouTube of like, oh, don't do that, just use server-side validation. You could. I think this is a really nice first line of defense. I'm sure you filled out a form, you hit submit, then it tells you you got 4 of the fields wrong, and then you have to go back through and actually fill them out and it's really annoying. I'd rather that as the users are going through, they're getting hints that, oh, I forgot that, I need to fix that, and then at the end when they hit the submit, 99% of the time they won't get an error then from the server telling them they made a mistake along the way.

[00:02:07]
So the server-side validation still should be there, but before they get to that part of it, we can give them a lot of feedback. So for this one we are going to be jumping in. I've provided a starting point of a form for us to use. It looks something like this. It's not the most sensical form, just because we have a password field plus some other things here, so we're sort of logging in and signing up for something at the same time, but I just wanted to explore a few of the different options that we do have.

[00:02:34]
So, that's why the form looks this way. If you want to play around with this, I would encourage you, just if you look here, I've already created a success, a warning, and an error state or colors that we can use for these states along the way. So if you feel like experimenting, those are the three colors and things will look pretty decent. I'm using a little bit of nesting here, just to say I have a contact form.

[00:02:57]
I have my input. The field set is for this area down here, just so I have a border that we can see on it. And so all the styling, I'm going to include nested here, just so maybe you have other inputs somewhere else. I know all of these are just part of my contact form. Now the very basics that we can do, we've already seen it, but when I click inside the field, we're getting a focus ring on there.

[00:03:23]
So let's come in and improve that a little bit. We can say when the input is focused, or we can do focus-visible. In this case, either one is going to work the same because on text or password inputs, they're always going to be the same. So input, focus-visible, and maybe I do an outline, and we haven't talked about outline. Outline is like border, but like a box shadow, it doesn't actually take up any space.

[00:03:52]
And when you go on an element, by default, this is an outline, that ring we get. The default ring from the browser is accessible. It's, it actually has a double color on it, I think, or maybe Chrome's just being smart now. At one point there was a double color on them in Chrome, Safari, and every browser does them a bit different, but they were always aiming to be accessible based on the background colors.

[00:04:12]
If you're setting an outline color, just make sure it's something that users can actually see. It works exactly the same way as a border, 3 pixels, solid. Let's just do the warning for now so we can see it. It's not going to be the nicest thing. But I have a color. I said warning, so we'll use the warning, so it's visible when we do it. So, I know I'm focused in that field now. Same thing, we come down, make it very clear for the user.

[00:04:41]
The reason we don't use border. As I said, outlines don't take up space. If you do it at the border, the field, you can see like when I click out, it changes shape because the border's actually taking up size as part of the box model. And so you get this weird shift that comes in and things sort of bounce around a little bit in awkward ways. So outlines are nice when you don't want it to take up any visual space, otherwise it works the same.

[00:05:06]
You cannot put an outline on only one side. Outline is always the whole way around. There is a bonus feature with outline, which is outline offset. Which just makes it go a little bit further out. Make it a bit bigger. Just so we can see, now it's way too much, you can make your offset go negative values work too, but you could end up hiding your element. So, we don't really need that, but sometimes it's nice just to have a bit further out of a focus ring, because it helps just make things a little bit more clear, especially if the colors aren't standing out as much as they were.

[00:05:44]
Whoops, that should have been 6 pixels, not 63. There we go, so you just get a ring coming around it. You might not want these, it's conflicting with the password, but outlines are a very popular way, so I did want to talk about them when we're using our focus states. Now another type of feedback that we can give users that is a really straightforward way of doing it, let's go look at our inputs here.

[00:06:06]
You'll notice that I have an input type of text, input type of email, input type of password. If we come further down, I have this field set for radio buttons. On all of these, there's a checkbox down here too. I've put these all as required. And having required on there means the user has to fill them out before it can submit. If I try clicking this now, it's not actually going to let me submit it because the browser knows there's required fields, the required fields are empty.

[00:06:35]
We're actually getting some of that user input we were talking about from the very beginning before we got to the end here. A lot of the time with required fields, it's nice to have a little star that's next to the label. So we can say. Let's go look where that is. Now, these are, these focus states here are directly on the inputs. Down here, I have something that's a little bit different because I'm using a radio group, our field set to make a group of radio selects that we have right there are radio buttons.

[00:07:10]
So all of these radio buttons are together. But maybe what we want to do is we want to show that this area is being selected, the same way if a user's clicking in these, we know we're sort of focused on that area. If somebody clicks in here, I want them to know that they're focused in this area over here. So for that, instead of using a focus-visible, we have another new cool thing we can do, which is our field set focus within.

[00:07:47]
Which means this element here, the field set, inside of here, something has focus. This one already has a border, so instead of adding an outline to it, I could just change the border color. Border color var, color, we'll do the same thing for now, just so it's very visible, and we can add a warning in there. So now, as I'm going through these, it's like that, and then when I click in here, that whole element's border changes color.

[00:08:20]
You could do the same thing for a form if you wanted to, you'll see something like this is nested. So I'm going to come outside that initial selector. Contact form focus within, and we give this an outline, we'll just do it really big for now, 10 pixels, solid red, just to go it faster because I don't plan on keeping this. Now, if I'm focused on anything inside of there. Let's get it again, there we go.

[00:08:43]
As long as I'm inside of here and clicking on something, that's there. Now you can see it's a bit jarring because as I'm like through these, it's fine, but then if I'm clicking on something, it sort of loses focus temporarily and it's a little bit strange. But if you don't have radio buttons that have this weird thing where you can do that on them, there's definitely some interesting things you can do where your form sort of gains prominence over the rest of the page.

[00:09:19]
One thing you could actually do. It's not going to be super noticeable here, but you could come in with a box shadow that's ridiculously big, 0 0 0 100vw, so it's a spread that's just insanely large, and then a 0 0%, 0% .2. So, well, we'll make it one now, just so we see it all goes black, but then when you're in the form, if you had a subtle shadow on it that covers everything, you could just have it look like the page is sort of faded out a little bit.

[00:09:35]
I don't think I would actually do that, but it could be a fun thing on a personal project or something, do that type of thing.