From the course: CSS Shorts

Indicating required form fields - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Indicating required form fields

“

- [Instructor] Hi this is Chris Converse and in this episode we'll use CSS to indicate required form fields without needing to add any HTML to our webpage. So if you'd like to follow along, download the exercise files and let's begin by opening the HTML file in a text editor. Now once you have the HTML file opened, you'll notice down in the body area I have a form element and then inside of the form element I have a div surrounding each input and label. Now one of the tricks here is that the label is appearing after the input field and the input field uses a standard HTML attribute called required. This is how we can indicate to the browser and to the potential java script that might be attached to the page, which fields must be filled out. So we're gonna be using CSS to lock onto this required attribute and then styling the label to indicate to the users which fields are required. So to do all that let's go back to the exercise files and let's open up the style dot CSS file that's hooked into this HTML file. So now in the CSS file let's scroll down, let's first create a rule that's gonna target the input fields that have a required attribute on them. So let's come in here and type input as a new rule then a colon, then the word required, let's add in our brackets, let's split this open and what we're gonna do is simply add a border to those form fields. So border colon space, we'll set the size to one pixel, solid for the style and then we're gonna use a gold color. So using the hex value we'll type a pound sign, two Fs for red, C eight for green and zero zero for blue. Add a semi colon and hit save, and back in the browser we'll see now that name and email are showing up. Now we also have a required field on the checkbox down here for the agreeing to terms. However most browsers won't show us any of the styles on a checkbox or a radio button element. And so that's okay because we're going to add some additional visual queues to the fields that are required. So back in our CSS after the rule we just created let's come up here and copy the input colon required. Let's come down a few lines, let's add another rule. Then after the word required let's hit a space then add a plus sign, then type in label. So now what we're doing is targeting any label element that appears immediately after an input field with a required attribute in the HTML. And if that's the case let's change the color of the text. So I'll type color colon space and then I'll come up here and copy that same gold color and then paste it down here. Add a semi colon, let's hit save and now we'll see that in addition to the border showing up on these input fields, we now have the labels showing up in gold text as well. Now sometimes people like to use an asterisk to indicate a required field, so to do that we can make use of a pseudo element. So back in our CSS let's copy this entire rule. Let's paste that down here, let's add in our brackets and then let's come back to the word label, let's add two colons then type the word after to create a pseudo element. And the first property inside of here is gonna be content so content colon space, two ticks for a string and then a semi colon, and then inside of the tick marks let's type an asterisk. With that in place you can go back to the browser and you'll now see an asterisk after the name, email and agreement. So now let's take a look at a few more options. So down here where we added the asterisk, let's replace that with the word required. Then on the next line let's add a font style, we're gonna set this to italic. Next we'll add a padding left property, we'll set this to 10 pixels. And then let's come in here and add a font size, and we'll set this to point eight Ms. Save your CSS and we'll now see that the word required is showing up in each one of the labels. So now let's add an asterisk to the left hand side of the field. So let's add a few returns. Let's come up here and copy this entire rule. Let's paste it down here and change the word after to before put in our brackets, let's come in here and type content colon space, add two ticks for a string and a semi colon and then add an asterisk inside the tick marks. Next property let's come in and set a position property of absolute. Then we'll set a top property of negative two pixels and then we'll set a left property of negative 15 pixels. With these in place we can hit save and we'll now have an asterisk showing up outside of the required fields, which is actually being positioned inside of the div that wraps each one of the input and labels, and that shows up down here as well. And now just to make this a little more visually interesting let's replace the asterisk with a graphic. So for the left property let's come down here and change this to negative 35 pixels, let's set a display type of block. Now again we're still working with the pseudo element that appears before everything else in the label. So after display block let's come in here and set a width property. We're gonna set this to 20 pixels. Next let's add a height property of 40 pixels, next let's come down here and import that graphic as a background image. So background colon space URL put in our parenthesis, type in images slash bee dot SVG. Let's set a no repeat value and let's set the X and Y position to zero. And then finally let's set a background size to contain. And then finally let's get our cursor inside of the content string, and let's remove the asterisk. With all of those in place let's hit save, go back to the browser and we'll now see our SVG graphic showing up inside of the div for any of the required fields. So we've covered a few options for indicating required form fields in a webpage without adding any additional HTML code. Now if you'd like to explore more options for styling forms, check out another episode in this series called let's focus on the focus. Or check out another course that we have entitled styling form elements. And both are available here in the library. And so with that I'll conclude this episode and as always thanks for watching.

Contents