Web Forms 2021 - Part 8: How to Style your Web Forms (pseudo classes, tips and tricks) | Clyde Matthew | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Web Forms 2021 - Part 8: How to Style your Web Forms (pseudo classes, tips and tricks)

teacher avatar Clyde Matthew, !false | funny, because its true

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

21 Lessons (1h 60m)
    • 1. Class Introduction

      0:46
    • 2. Styling Forms - intro

      5:30
    • 3. Styling forms - fonts and the box model

      7:15
    • 4. The CSS box model

      4:01
    • 5. What are pseudo classes

      4:48
    • 6. Pseudo classes for forms

      8:07
    • 7. The required pseudo class

      3:13
    • 8. Building a simple form

      13:48
    • 9. Generated content

      2:49
    • 10. Adding generated content to our sign up form

      6:55
    • 11. Valid and invalid pseudo classes

      2:41
    • 12. Adding the valid and invalid pseudo classes to our form

      7:22
    • 13. Inrange and outofrange pseudo classes

      9:28
    • 14. Enabled and disabled pseudo classes

      2:10
    • 15. Enabled form - HTML rundown

      7:05
    • 16. Enabled form - adding JavaScript

      14:03
    • 17. Radio and checkboxes - checked

      4:52
    • 18. Radio and checkboxes - default

      4:28
    • 19. Radio and checkboxes - indeterminate

      4:47
    • 20. Pseudo classes - summary

      4:42
    • 21. Class Outro

      0:54
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

1

Student

--

Projects

About This Class

WELCOME TO THIS SKILLSHARE SERIES ON HOW TO BUILD AND UNDERSTAND WEB FORMS. THIS IS THE EIGHTH CLASS ON WEB FORMS --> STYLING FORMS. 

What we cover in this particular Class?

We will cover of ton of information in this entire series, but for Part 8 I'm going to talk about styling forms. 

CSS is a beast of its own. I am going to assume you know the basics of CSS. This class will specifically look at CSS in the context of building forms. As you will learn in this class, some widgets are easy to style with CSS and others (like the FILE type) are inherently difficult. This does not mean you can't style them. It just means you need to implement a few hacks. 

In this class we will be covering things like:

  • the CSS box model
  • pseudo classes
  • pseudo elements
  • generated content
  • inrange and outofrange pseudo classes
  • *** WE BUILD FORMS TOGETHER 
  • what CSS property you can use to help you style your form controls consistently
  • and a whole bunch more!

I'm excited, so lets get CRACKIN. 

LET'S BEGIN

--- in case you're wondering, this entire series is about web forms. 

THE NITTY GRITTY OF WEB FORMS?

A web form is also known as an HTML form. It’s a place where users can enter data that’s then sent to a server for processing. Web forms allow users to place orders on your site, to provide their name and email address to sign up for a newsletter, or to sign up as a member to your site and so forth.

What’s really great about web forms is that there is no “one size fits all”. You can use your artistic flare, and personal business acumen to create web forms with a particular length, format, content type and appearance.

By doing this course, you’ll be able to improve your web form usability, which will ultimately enhance user experience and get website visitors excited about completing your form and converting.

Why is this course so important?

  • Forms which are on point present an opportunity for a company to grow and capture loyalty.

  • A form can often be both a marketing tool and a necessity. A form that puts the user at ease, that evokes feelings of trust, will get filled out far more often than a form which looks (or is) complicated and confusing.

  • After completing this entire Skillshare series, you will be knowledgeable, confident and the “go-to” person for forms.

Let me share my form building skills with you

Understanding how forms work will equip you to become an awesome front-end programmer. Learn how to implement your creative, different and dynamic ideas into your website. Master forms and you’re half way to becoming a full stack web developer. Take control through understanding. Delivering a perfect, interactive and functional form is challenging. In this series, I take a deep-dive into explaining web forms and how they work. Why do we need to wrap our form within <form> tags? How can you include a progress bar in a form? How can you customize a toggle or checkbox? Where does the data go once a user clicks on the submit button? How can you perform validation on your form? How can a user upload a file? What happens once the data arrives at the server? What are the different types of events we can listen to on forms? By understanding these questions, and many more in the course, you will be able to build advanced forms and better yet, understand the full stack process! In other words, you will be able to create dynamic forms that improve user engagement and experience.

WHAT THIS SERIES COVERS

This series is huge and comprehensive, from basics to advanced

This entire series (which I've split into multiple classes) will give you solid fundamentals and practicals regarding forms. It can be taken alone (you don’t need to do any other course) to achieve your goals. You will emerge from this course with an advanced understanding and practical experience with building forms. It will take you to the point where you will understand what method (GET or POST) to use when sending form data, how to define where the data goes, how to perform advanced client-side validation (checking errors on the form before it is sent to the server), how to write custom pattern validation rules (using regular expressions), how to run servers and how to view all HTTP request information. This is awesome knowledge. This series will captivate you and catapult you to the next level and set you well on your way to becoming a true Grandmaster in front-end form web development.

By the end of this series, you'll be able to “speak” and “walk” FORMS by gaining an understanding of how you can build it, manipulate it and style it in meaningful and practical ways. 

Why should you learn so much about forms?

A web form is one of the best ways to get input from prospective clients and indirectly establish a relationship with them. The time you spend in bringing the user to your website should be matched with the time spent in perfecting the user experience with your web forms. It is surprising to see so many sites these days contain complex and frustrating web forms that cause a negative experience.

Ultimately, a web form allows your visitors to get in contact with you and to send information, such as an order, a catalogue request, or even a query, which is passed on to your database.

Can you begin to see how important forms are and how their use can be escalated?

*** The most important course on FORMS on Skillshare***

Successful programmers know more than rote learning a few lines of code. They also know the fundamentals of how HTML code works behind the scenes. This is particularly true when it comes to building forms. If you’re wanting to become a full stack developer, you need to know, really know, how forms work. You need to understand how the browser URL encodes form data, how the browser sends data to a URL that you specify, and how to perform validation to ensure the user does not submit invalid data.

A unique approach

You will learn "why" things work and not just "how". Understanding advanced topics about forms (URL encoding, accept-charset, multipart/form-data, regex, etc) is important as it will give you infinite possibilities and upskill you. Armed with this knowledge, you’ll be able to create forms that are tailored to your needs, and allow the form data to get submitted to a server via AJAX. You will be able to create forms that are customizable by the user (for example, if the user wants to change the color of the form theme). You can create a control on a form that displays the progress completion of the form and displays messages to the user along the way.

Can you begin to see how pivotal forms are and how important having knowledge about forms is?

How is this Skillshare course different?

There are lots of courses on Skillshare that focus on web development. Many never get into the detail about how HTML forms work behind the scenes – a skill that every full-stack developer needs to master in order to utilize potential.

In this series, I focus on the more advanced topics of true web development when it comes to forms. This includes understanding what all of the attributes on the <form> element mean, understanding the different <input> types in detail, what URL encoding is, and how data is sent over the wire to a server.

Practice makes perfect

Theory is theory … but there’s nothing like getting behind your computer and typing in code. That’s why we will be coding, laughing and pulling out our hair together as we code real life websites and exercises during this entire series.

Is this course for you?

Absolutely. If you fit in any of these categories then this course is perfect for you:

Student #1: You want to advance in the world of programming.

Student #2: You want to know how successful developers build dynamic forms that engage with the user, have high conversions that put them ahead of the competition.

Student #3: You want to gain a solid understanding of how forms really work

Student #4: You want to start using backend technologies like Node or PHP with forms

WHY START NOW?

Right this second, your competitors are learning how to become better web developers.

Web development is a blazing hot topic at the moment, and in the foreseeable future. But you have a distinct advantage. This course offers memorable learning topics, actionable tactics and real-world examples.

Lets get started.

See you in the lectures.

Meet Your Teacher

Teacher Profile Image

Clyde Matthew

!false | funny, because its true

Teacher

Ideas are a dime a dozen. The hard part is execution. Unfortunately, most people never carry tasks to completion.

 

I've worn many hats in my career …  As a result, I have an ability to view all sides of a coin, something that is becoming crucial in our tech-savvy world.  

 

My experience and a few words:

 

·        I’ve had to learn things the hard way (aka: hard slog)

·        I want to teach people what I’ve learnt, with the hope of making a meaningful impact (cliché, but true)

·        No one is a master of everything. But at the same time... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Class Introduction : Welcome, welcome, welcome to yet another class all about forms. My name's Clyde. I'm going to be your instructor. And we're going to have a lot of fun together. We're going to start learning now about how to style your forms. We're going to be discussing in this class, things such as pseudo classes. I know weird, right? Pseudo elements. I'm going to be talking about the CSS box model and also going to be giving you some tips, some hex, but how to style some form controls that historically had been very notorious to style. And it is four levels. Whether you're an experienced developer or just starting out, don't stress. You will be able to follow along and you will learn something new. I can't wait. And I hope to see you in the very first lecture videos. 2. Styling Forms - intro: I am super, super excited about this section because here we're going to turn our focus away from actually creating and structuring waveforms to styling forms. And by styling forms, of course, I just mean using CSS and pseudo classes and pseudo elements. We've seen already a lot of examples of using these throughout the course. And I'll just say off the bat that historically styling forms has been rather difficult. And form controls vary greatly in how easy they are to customize with CSS. But the good news my dear students is that it's getting a lot easier now because older browsers are kind of retiring and the modern browsers give us more features to use. So as I mentioned, we've already looked at all the HTML you need to create awesome forms. We started off at the very basics, looking at the actual form wrapper itself. And then we turned our attention to the most important and perhaps complex HTML element when it comes to forms. And that is the input elements. And of course the type attribute is so unique when it comes to inputs because it defines the look and feel of the widget we're creating. We looked at the default type of text, but that wasn't all, was it? We had password, check boxes, files, submits, et cetera, et cetera. There are a ton of them. And we did not stop there. We looked at non input form controls. These are just elements that are commonly used in forms. We looked at the textarea, select, got a list output elements who, and we didn't even stop there. We looked at the progress bar is Meta bars. We looked at option Elements, option group elements. Man, my mind is blown. We've done a lot. But in this section, as I said, we're going to look at how to use CSS to style your forms. And as I briefly mentioned, Form Controls do vary greatly in how easy they are to manipulate with CSS. And this is true even today. There are many form controls that are tricky to manipulate with CSS. If you're anything like me, you want to know why? Why is it difficult to start with CSS? Who does a very good question? So let's separate out form controls versus firstly form controls. For controls would edit to HTML in the HTML2 specification all the way back in 1995. Isn't that old school. Css, however, wasn't released until late 1990s six. And it wasn't supported very well by browsers for a few years after that. And this just meant that browsers are lying on the underlying operating system to manage and render form controls. And even with CSS available to style the HTML. Browser vendors have historically been reluctant to make form controls scalable because they were thinking that uses, we're so accustomed to the visual appearance of their respective platforms. But the good news, as I mentioned, is it time has changed and website owners one form styles that fit in with the overall site design more than ever today. And the web has changed to make this possible. But nevertheless, we still have these nuances even today. So although we've come a long way, we still have the good then the SD and the bed. What are some of the good form widgets we have and buy the good? I just mean these are elements that can be styled with few, if any, problems across different platforms. So things like the form, field sets, some input controls, buttons, labels. These are very, very easy to style, but of course we don't only have the good, we also have the bed. These elements are more difficult to style. They require more complexity. And some maybe specific tricks. Things like input weights, type, attribute is set to search, checkboxes, radio buttons. We've seen examples of these in the course where we had to kind of hide the default appearance and create her own new one from scratch. We've seen this. And then of course we've got then nasty. These are just elements that really are difficult to style through. These include things like input weights, type are set to color. Remember that color picker, we can't really manipulate at all the visual appearance of that color picker. We've got input of type file, also very, very nasty range select elements. And remember those progress and meatballs? Yes, we can target the, you know, the webkit, pseudo-classes, remember those. But it's not well supported across browsers. And for that reason they are nasty to style will see you. I guess what I'm trying to say is the real problem with the bad and the ugly controls is that they have a very complex structure and beyond some basic styling. And by basic styling I mean, such as changing the width, the margin of the control. You generally don't have the ability to style the controls internal components. For example, the date, picker calendar. We can't change the extra style of the calendar. Or what about the button on the select element that causes the options to display? We can style the look and feel of that button making up those widgets. So you can see why I'm saying his or bad and ugly controls. If you want to thoroughly customize these widgets, you'll have to create your own using HTML, CSS, and JavaScript. Anyway, we've got a lot more to cover when it comes to CSS. I just wanted to kind of give a high level summary. The fall we continue. Can't wait to see you in the next lecture. 3. Styling forms - fonts and the box model: Let's talk about styling forms in a little bit more detail. The first thing I want to mention is that to style form controls that are easy to style. Remember those good ones. You shouldn't face much difficulties at all since they mostly behave like any other HTML element. And as well as some basic CSS tools, we can also exist several selectors, UI pseudo-classes that enables styling based on the current state of the UI. And we've already seen many examples of using these pseudo-classes in the course. And there are few important points I just want to make. Firstly, I want to look at fonts and takes when it comes to styling our form images. The first thing I want to say about it is that the CSS font and ticks features can be used easily with most form widgets. And to make your form appearance consistent, you can use this CSS rule. You can actually target the font-family and font-size. And when you set it to inherit, what it does is that all the child elements will inherit the font family from the parent. And this will make mashed form widgets consistent with your overall theme of your site. But my dear students browser behavior is often inconsistent. And what I mean by this is that by default, some widgets will not inherit font-family and font-size from the parents. So just bear that in mind. So that's fonts and text. The other very important CSS property we need to discuss is box-sizing. Because this can make or break the styling of your form. It really is good to know. So what is this box-sizing all about? Well, firstly, when it comes to fonts and takes, they have support for every property related to the CSS box model. And what do I mean when I say that all text fields have complete support for every property related to the CSS box model legis mean all of these texts, fields allow us to manipulate the width, height, padding, margin, and border properties. And remember, every browser relies on the system default styling when displaying widgets. So it's up to you to define how you wish to blend them into your content. If you want to keep the native look and feel of the widgets, you'll face difficulty if you want to give them a consistent size. And this is because each widget has their own rules for border padding and margin. So if each widget has their own rules, what do we do to make a consistent? Well, it's actually surprisingly easy to give the same size, two different widgets. We can just target the box sizing property. What, although in stressed and stress, you know me, I love looking at examples. So why don't we hop over to the text editor and let me show you how it works in action. I mean, you can see here just a snapshot. We target the box-sizing property and we set its value to border-box initial you what that does. Very quickly, I want to show you how this box-sizing property works. So let's just create a very simple HTML page. We're going to have a style section because I want to use this box telling property that for now a form widgets and see the default styling that's applied. The first formula that I'm going to create as an input with time it takes. We save this, refresh the browser, and there we go. We don't need an ID, a name, and actually just put a placeholder. Box. Sizing is pretty straightforward. All right, so let's put a break and then it's now create another input, this time with its type attribute C to date, input. Save this. And we go, you can really see the browsers applying different styling, different widths, two different types of form controls. Again, we don't need name and ID. Another break this time, let's try select elements about that. We'll even move away from the input. Tiny. I know, I know. I'm daring, daring. Stay we go. Here's another default sizing applied by the browser. Why don't we try text area break. Let's try it text area. We don't need a name ID, columns or rows. We'll just have the default and we can say, box sizing is cool. Save this. And we go yet another width applied to another form control. Okay, client, these are just elements, but what about buttons? Well, let's do an input to a break. Let's do an input of type, submit. The value being save that there is a button, yet another width. And we can even try yet another button this time, the actual button element of types. Let's give it the value of submit and we go. All right, let's expand this. You can see we've got different form controls, all with their own styling applied by the browser. But this is where the benefits of box-sizing comes in. My dear students, you know what? Let me actually have the side-by-side, because you're going to see a massive transformation now. And let's talk at absolutely everything, all our inputs, all our select elements, all of our text area elements, and buttons. Now, this is where the magic happens, because if we access the CSS box sizing property and we set it to content box. Nothing seems to happen, but actually, let me prove it to you. Let's say we want our form to be uniform, we want all our widgets to be the same width. So let's set a width of, I don't know, a 150 pixels. We can see that because it's the content box. It's only literally the content. That's a 150 pixels. The browser, the install applies the default heading and borders to it. So that's why we can see different widths on all of our widgets. Even though we've tried to say we wanted all at a 150 pixels, the most easiest solution is content box. We can have, right? Border-box and we hit Save. Cool. That is, it's all aligned and we can even fake padding. And we know that the width will always be the same. This is the benefit with border-box. But let's say you have to use content box. How would you make the width the same? Well, remember that the content box doesn't include panning and borders. So let's remove the padding and let's put our border of one pixel, solid black, the same border they will apply to every single widget. And if we hit save, now we've got the same with every single widget, but it's kind of cumbersome. And quite frankly, sometimes you want padding. You want to keep the content box dynamic. So often you don't want the content box, we want border-box. And once again, very simple, very quick example is jumping ability to fly. 4. The CSS box model: Pretty cool, right? Haha just noticed asphalt example wrong except Molly, anywhere, you know what I mean? Anyway, let's continue. Just wanted to show you that very, very quick example. You might be thinking, what is the box model? Well, when laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. And from this, CSS determines the size, position, and properties of these boxes. I keep talking about boxes, but how does that work? Well, every box is composed of four parts or areas. And these areas or parts are defined by their respective edges. What do I mean? Well, firstly, let's start off at one age, the one pot. And this is the content area. This is bounded by the content age and it contains the real content of your elements, such as the actual text or the image, or the video player, its dimensions or the content width and the content height. That's the content. That's one area. What's another area? That's right. Padding. What's another area? Border. You've got it. You probably know these already by the way, the final is what? Margin? That's right. So there you go. Every box is made up of these four parts. Have you got it? Pretty intuitive, right? And as I mentioned, that content area in the middle contains the real content of the element. And yes, we can affect it. Sizing with the width, min-width, max-width, et cetera, et cetera properties. It's very, very easy, but this will target the content area itself, not necessarily the padding border or margin. Remember that? So how does this box-sizing property work and what is the default? Will these two values it can take? We've got the content box and this is the default. And when the content box is set, what does it mean? Well, it just means if you sit in elements with a 100 pixels, the elements content box will be 100 pixels wide. This means that if you add any width of a border or padding, that's going to be added to the final rendered with making the element wider than a 100 pixels. So it's kind of counter-intuitive. You might want your div tag to be a 100 pixels, but once you add padding and margin, it will be more. So the good news is to get around us. We can set the box-sizing property to border-box. And this just means the browser's going to account for any border and padding in the values that you specify in the width and height. For example, if you sit an element width to a 100 pixels debt, a 100 pixels will include any border or padding edited. And the content box will shrink to absorb that extra with. And this makes it very much easier to size your elements and widgets. Pretty straightforward, right? Hope it's making sense. So just remember this box-sizing property can be very useful for you when you're styling your form. But it's not to say that you never want to sit your box-sizing to content box. When you using position relative or position absolute, for example. Sometimes it's nice to use box-sizing of content box because it allows the positioning values to be relative to the content and independent of changes to border and padding, which is sometimes desirable when it comes to Div. There's not one rule that fits all the kind of have to just approach each problem has unique. Yes. Mostly we are going to be sitting the border sizing to border-box. But not always. Ooh, well done for getting through this. Hope you're having a lot of fun. I'm just giving you a little tips along the way when it comes to CSS. I'm having a lot of fun, but I want us to now talk a little bit about pseudo-classes in the upcoming lectures. I'll see you now. 5. What are pseudo classes: Let's look at this funny word called pseudo-classes. What does those edits crux. It's just a state that can be targeted with CSS. And let's start at the basics. What is the definition of pseudo will, if we Google it, there we go. Something that's not genuine. False, a shampoo spurious, almost approaching or trying to be. That's what's pseudo means. So we can say that a pseudo-class is basically a phantom state or a specific characteristic of an element that can be targeted with CSS, but don't get confused with pseudo elements. Pseudo elements are different pseudo-classes as pseudo element is a phantom element that does not exist in the DOM. And we can target both. Let me be clear when it comes to forms. We've seen examples of this. And when I say that a pseudo-class is basically a phantom state, we know that forms mostly deal with states, right? Something's either required or it's not. It's either valid or it's not, it's invalid or it's not. These are states. But as I mentioned, sometimes we use pseudo elements. Especially when it comes to styling. Remember that before pseudo elements, that after pseudo elements, etc, etc. Okay, So how does pseudo-classes work? Well, it's very simple. Pseudo-class selectors or CSS selector with a colon proceeding them, right? So type is selected. We taught the colon. We then target the particular pseudo-class we're after. We can style it with normal CSS where we bought coffee and you had been very, very used to this. For example, let's target a button and let's hint target the pseudo-class of hover. Course, we can change this background to black when the user hovers over it, for example. But that hover, pseudo, they are tons of them. Link visited, act of target, valid, et cetera, et cetera. We have seen tons of these already in the course. It's just nice to refresh our memory noun again. Let me just hop over to the console and let's do a fun little example of using a pseudo-class to display a hidden paragraph. You know the drill by now, we've got a blank file here. Let's just create an HTML document within here. Let's have a head and style section because we're going to be targeting CSS pseudo classes. But first, let's create our actual content. Let's create a div. And in here we can say, hover over me and see what you find. And then we can have a paragraph. Nice. You've just used a pseudo-class on a div element. If we refresh the browser, we can see that we've got all the text displayed, but we don't want to show this paragraph until the user hovers over the div with the mouse. So how do we do this? Media students? Well, firstly, lifestyle, this paragraph element, I want a background of malicious do yellow. And let's give it a padding of 20 pixels. And the final step is I went to hide this. So let's set its default display to none. So now it's gone. I want to target a CSS pseudo class, and we don't have to use pseudo classes with forms. It's why the skills you're learning in this course are going to really help you in your div Korea. Super exciting. But anyway, we want to use the CSS pseudo class. And what's cool is that we can use these with other CSS combinators. For example, we might want to use the Tilda combinator in CSS to target a sibling. Me show you what I mean. Let's grab the div. We know that we want to target its hover state. And specifically, we want to target the sibling paragraph. And the sibling in a CSS combinator is denoted by tilda, this little funny curly thing. And we want to target the paragraph. This is how easy it is to target a state. Here, a hover state. And all we wanna do when that happens, because remember now we're targeting their paragraph. We want to set its display property not to none, to block, which is its default. So let's take the mouse and hover over the dove. Hand. There we go. How awesome is this mission? Just a really, really quick and fun example to show you how easy it is to work with pseudo classes. But I know, I know this course is all about forms. And the next lecture, Let's continue talking about pseudo-classes, but with a flavor of forms. See you in the next lecture. 6. Pseudo classes for forms: Back to pseudo-classes. We're not quite finished. And remember by a pseudo-class or just mean it's the state that can be targeted with CSS. So remember, pseudo-classes are used to define a state of an element. Specifically, they target elements that can't be targeted with traditional CSS like combinators, selectors. What a combinators? Well, they are for combinators in CSS. Combinators just something that explains a relationship between the selectors. Rights are the four different combinations and you've probably used all of these in CSS or the space which just defines a descendant selector. We've got the plus sign, which is an adjacent sibling selector. We've got that little tilde key, which is a general sibling selector. So it doesn't have to be immediately adjacent to the one we dealing with. And then of course we've got the greatest sign which is a Child selector. You've seen all of these. I'm pretty sure if you've done any CSS, then we've got simple CSS selectors. What are those? Remember that CSS selectors are just used to find aka select the HTML elements you want to style. And simple selectors are different from combinators. Selectors, symbol selectors are the ones that have a certain attribute. So actually maybe I should have called this attribute selectors. They select attributes based on the class name for the name or ID. But sometimes combinators, selectors or simple aka attribute selectors are not enough. And this is where pseudo-classes come into the picture. And they are a bunch of different types of pseudo classes, such as root, target, visited, vetted, et cetera, et cetera. And this is not even mentioning the bunch of pseudo elements such as after, before, first-line, et cetera, et cetera. And we've seen in many examples in this course that we can not only use Form Controls outside of forms, but we can also target pseudo-classes outside of forms. Slide, this class is all about forms. I hear you, I hear you. So let me just jump over to the console quickly. It creates an input type checkbox and leads style that checkbox, depending on its state. And when you hear the word state, ding-ding-ding, you should think of pseudo-classes. So let's target the checked pseudo-class. Let's use a CSS combinators selector and let's style the label of the checkbox. Let me show you. All right, Very quick example, very fun example. Let's just create a HTML document. Will have a style section. Because I want to show you how we can use CSS, combinator, selector or gap in our body. All I want as an input type checkbox or we want don't need a name, not savoriness to server. The idea can just be food. That's the input. Let's give it a label. And remember now the label in order to work has to be linked to a form control. We link advisors for attribute having to match the ID on the actual form control, which is foo. And we can just say here, toggle the checkbox on and off. That's all we want to do. And if we look at this in the browser, which is open it up, There we go, toggle the checkbox on and off. And of course, if we toggle it, nothing really happens. Nothing exciting. Let me just zoom in a little bit better. All right, so let's start styling. What, what should we do? Well, I want to target this checkbox only when it's checked. How can we do that? Well, we can't use any traditional CSS selectors because it's a state that I'm trying to manipulate or style. And when we talk about states, we must think about pseudo-classes. So I went to grab this input element, but I only want to style whatever I want to style when it's checked. And of course, that's why we have that colon to denote that this is a pseudo class. Now if we try to style this directly, there's not much we can do because the actual input of type checkbox is a bad CSS control. And by bad, I just mean it's more difficult to style. For example, you can't affect its background color and set it to red. Toggle this, it's still blue. Browser doesn't care what we say here. You can't try and affect the actual check caliber, making that RED. That doesn't do anything either. So in this instance, what I wanna do is I want to target as input when it's state acidic. But then I went to use the CSS combinators selector, specifically the plus, which is an adjacent sibling. We know that the input and label, or siblings and label is immediately following input, which is why we can put this plus sign. We then grab that label. And now the label itself, we can change its color, color to red, font-weight. Let's give it a bowl. Now if we check this, look what happens. How awesome is this? And what a fun example. And I encourage you to stop playing around with CSS, combining things like pseudo-classes and traditional CSS selector. Here, the combinator selector. Anyway, Herbie, having fun, Let's jump back to the lecture. So you following along this course is all about forms. We talking about pseudo classes. Why don't we talk about pseudo-classes for forms. Vector. Great idea. Let me start off by saying input controls and other form widgets have a few unique features. And they are CSS, pseudo-class selectors. They can target form controls based on the features. And these classes are known as UI pseudo-classes. Okay, glide. So where did it all begin? Who's given us access to these UI pseudo-classes? Will the original pseudo-classes were given to us by CSS 2.1, which one specifically or the ones relevant to forms or hover and active hover selected element only when it's being hovered over by mouse. Focus. Obviously, when that elemental form tab is focused and the active pseudo-class selects an element only when it's being activated, aka while it's being clicked on, when the return or enter key is being pressed down. In the case of a keyboard activation, that CSS 2.1 is rather old school. Yes, we still use hover focus on active, but the good news is that more pseudo-classes had been given to us by more recent standards. Standards like the CSS selector level 3 and CSS basic UI level 3 specification. They added more pseudo-classes related to HTML forms. They provide several other targeting conditions that you can take advantage of, like what Clyde? Sure. You've seen some of these already required, valid in range, etcetera, etcetera. The opposite of required, by the way, is optional. We've also got the optional pseudo-class. We've already seen many other examples. We've, we've looked at ones that target the in valid pseudo-class. We've got others as well. Examples that you've seen in this course like checked indeterminate. Other pseudo-classes like default, read only, disable, enable, Hicks, cetera, et cetera. They actually just too many for me to list on the screen. And in this course we have looked at a lot of these already have money and we still going to look at these. When you're dealing with forms, you're going to be dealing with these all the time. And just to be clear, the ones I've just spoken about now are not the only pseudo-classes available to us, but they are the most useful when it comes to form H2O. So you can tell there are many different types of UI pseudo-classes. Hope you're having a lot of fun. Hope it's all making sense. I hope it's all coming together. And I'll see you in the very next lecture. 7. The required pseudo class: I am super-excited this time for real, for real excited. Because now we're going to be talking about perhaps one of the most important pseudo-classes you can target to style forms in a very cool and intuitive way. Can you guess what the pseudo classes you've seen many times already? That's right. That is the required pseudo-class. And one of the most basic concepts with regards to client side form validation is whether a form input is required. And by required, I just mean does it have to be filled in before the form can be submitted to a server. If it's not required, it's optional, right? As I mentioned, required is a pseudo-class selector, specifically selecting or finding form elements that are required. More specifically, it's used to select form elements that have the required attribute set. Remember, we put the required attribute on a lot of our form controls. It's either there or it's not. So it's a boolean attribute. And it doesn't work in all HTML that only works on selected elements at works on text area inputs and the elements. And these elements have a required attribute available to us in HTML, which when set just means that you have to fill in their control but for the form will successfully submit. Okay, Clyde, that's a required pseudo-class, but what about if it's not required? Well then we've got this optional pseudo-class. And there's optional pseudo-class only targets input and select elements. And of course it's going to target all the elements that don't have the required attribute sit. And one could argue that this could be useful if you want to give optional fields a specific look, maybe slightly less visible than required ones. But hang on. What, what is this professor? What, what do you want to say? You'll probably not find yourself using the optional pseudo-class very often. Why is that? Well, form controls or optional but default chloride. So you could just do your optional styling by default. An edge styles on top for required control. There is a very good point. So I actually don't see much use of this optional pseudo-class at all. In fact, I remember using it even once I always use required. And of course your optional or your default styling, you just apply anyway. Thank you very much, professor. You can go now. There we go. We've looked at required, we've looked at optional. And before we continue with this lecture, I do want us to hop over to the text editor quickly because I want as bold as sign-up form is you. And I want to specifically target the required pseudo-class in order to style it a certain way. Let's do that now. 8. Building a simple form: Awesome, awesome, awesome. I've got my coffee. I hope you do too. And I want to start in this lecture building of form, pulling a very simple sign-up form. But we're going to be looking at this form again in future lectures. So it's good if you can start with me here, pulled it up from scratch so you know exactly where we picking up in later lectures. So how do antibodies form? Well, we want to feel it too wrapped in Thai form into one group. The fields, it usually has a legend associated with it. Last little hitting. And then of course I want to wrap each form control in its own div. So let's get into it. But first things, first, sip of hot coffee. Lovely. You know the drill by now, we just starting with an empty file, we want HTML and yes, we do want a style section. We're going to be styling this for obvious reasons. We talking about CSS, right? But before we can style the HTML, we have to bold the HTML. So let's do that within the body. And let's create a form, leaner rep, everything within these form tags. First things first, like I mentioned, our 12 a field seat elements. The fields it element needs a legend. And let's just say this is sign up. Now we save this and look in the browser. There we go. Very, very simple. And then I want each form control wrapped within its own div tag. Let's do that. We've got a div. We don't even need to put a class ID on us because we can just target it directly and CSS, each div is going to have a label or is good to get used to doing labels. We can give it a for attribute value of F name for you guessed it firstName. So these are labeled. And of course we need an input with type to text. The name we can give that can also be if name. And the ID has to match the value of the for attribute on the label, which is also, if we save this, there we go. We've got our first then. But I am wanting this to be a required field. How do we do that? That's right. We put the required attribute on the input type of text. Very, very simple. Images expand this so it's easier to read. So that's our first input control. I want to create another one. Now. We've asked for the users firstName. So that's great. Another div and label. Now I want to ask for the filename and you guessed it, that is going to be the last name. Again, input type text. We can give it a name and last name. And the value of the ID has to match that. For attributes value, which is I'll name as well. And of course we want this required as well. So there we go. Those are the two women have a comment here To required input fields. The last thing I wanna do in this form, as I want an email field, create an optional email field. How do we do that? A 100 representative. We need a label, the for attribute. We can give that a value of email. And of course we can write her e-mail address in brackets. We can just say include if you want updates. So it makes it pretty clear that this is an optional input elements. What kind of input do we need? Here already know this of type e-mail. That's 100% correct. We can give it a name of email, and of course the ID has to match the value of that for attribute, which is also. The last thing we need to do is how do you submit a form? That's right, create a submit button. And we can do that by, again, I want interrupt, a reform control in a div. And here we can just create a button with the type set to submit. And we could just say, I don't know, Let's go. How's that? The browser? Expand this, and there we go. I know, I know it's pretty hideous. I don't like the look of this right now, but the HTML is done and you can see how quick this was for us to sit up. So now let's start including some CSS. You know what I'm gonna do? I'm gonna put this side-by-side or is nice. And then you can kind of see how the CSS a fixed the styling as we go. Maybe I should zoom out here just a little bit. Has debt or writes My dear comrades, my students, my awesome, awesome frames. What should we do first? Well, I think we should start off with the field seat, right? Let's start off in a logical from the top to the bottom kind of order. Let's give it a width of 40%, maybe 30 percent. And let's see what that looks like. That's okay. I don't like it's stretching across the entire screen of the browser. And let's see into this now in the middle of the page. Yeah. And let's give it some padding. You can already see how quick and easy it, transforming, boring HTML descending, nice, can take a very quick and easy. As I mentioned, we're going to be logically going in order here, so fields it. Then let's deal with our legend. Let's give our legend a nice, nice background color here. 19197167. As an OT working with accommodate that save and there we go. It's like a turquoise color. And the text, I don't want to be bled solutions make it white. And let's give this some padding. Five pixels and ten pixels. What else can we do? Okay, that div, we can target, remember each control as representative and they're quite bunched up to each other here, and I don't like that. So let's just give it a margin. Bottom of Sunday, maybe 20 pixels. That's better. That's better at least now they separated. All right. What's next? What's next? Medea students. That's right. Let's target our input. Let's set its width to a 100 percent and its parent is a development rights. So what I mean by a 100 percent instead, it's just going to stretch across the entirety of the reason you still seeing gaps that it's not touching the age is because we gave this field seats and padding. If we make this padding 0, then there we go. It will stretch across the entire width. Anyways, we want padding of 20 percent, 20 pixels, sorry. So there we go. That's width, border-radius, southern borders here. Let's just the fact that very, very slightly, we'll make it five pixels has that. And then this gives us some padding. Also, five pixels can actually zoom out slightly. Yeah, How's it coming together? It's coming together. Okay, we've done our inputs. What about our labels? We can do our labels. Let's just give a label some padding. Next, let's target our button. That lets go buttons pretty hideous at the moment. Let's give it a width of 30 percent. Let's put it in the center. Fichte's display property to block. It will go also want to give this some padding, five pixels. Font size, a 100 percent. Let's give it a nice background color. Like a nice blue. I'm not seeing like a nice blue. Yeah. Let's not give the actual taste a color of white. Border. Hate that. Who hates very strong word, I dislike the default border didn't. Let's just give it nonetheless. Get much nicer. Border-radius gain. We just curve those borders ever so slightly. It looks nice. And let's give it a bookshelf just to finish it off. You know what, let me give this, what does 40% look like? Yeah, that looks better. This novel that takes us flooding in quite nicely. Now I want to target a few pseudo classes. Firstly, when a user hovers over all of these inputs, I want the background color to change, to visually let the user know that he or she is hovering over them very, very quick, or I'm going to do is target our div. But I want to target the dove when it's in its hover state. And then when this is being hovered over, we want to select the child input element, right? The child combinator NCEES is denoted by the greater sign. And the child we want to affect its styling is this input element. All I've done here. And of course, we want to affect its background. And I wanted to be a kind of a gray color to 43 to 43 to 43. Rach receivers works. It's hover our mouse over and look at that. Very, very cool, intuitive, right? I love it, I love it. Why don't we do the same thing for the button? So we grab the button and we want to affect it hover state. All we wanna do is change its background color. And let's pick that 1821. Here we go. Let's see if that works. And it does. Easy and quick. This is, but the lecture was all about this required pseudo-class. So let's use the required pseudo-class to style up our form. How do we do this? Well, firstly, let's grab our input element and targeted state of required. And remember, we need a selector, the colon, and in the pseudo-class, it's this easy and we've seen many examples of this in the course. This just give it a one pixel solid border of, I don't know. Let's do it to 23 21.8530, how they kinda look. So when the page first loads, we know that the first input data is required. Why is LastName not graded? This is a concern. So let's look at our file here. They we go Not area required. We just needed. To have the required attribute, let's go back to our browser, and there we go when it loads up user-user now, visually know that these two are required. How awesome, how awesome. This is fun. This is fun. So we've dealt with targeting the required a pseudo-class. But what's really cool is that we can combine pseudo classes. For example. We can style and input that has a required attribute. And that is in focus. What, let's redraw that it's very easy, you'll see now let's talk it out input element where it's pseudo-class required. But at the same time, we only want to affect the styling in this case, when it has focus. Today we go, We're literally using two pseudo-classes. And to prove it to you, Let's just give it a border. Two pixels, solid. Orange kind of view. Read his bed, concreteness, good and oranges kind of in an intermediate state. And let's distribute the outline. And like the outline. Okay, let's see if this looks good. It's got our browser and let's give it focused. Now let's click inside this box. There we go. How awesome is z? And that's very cool, right? Of course it's not affecting the e-mail address field. Do you know why? A 100 percent It's because of this required, isn't it? If we take that required away, go back to our browser. Now it will affect the email field, but we only want to affect those that have the required attribute on them. They would go making a lot of saints. The other thing I do want to mention to you, and we have mentioned the lecture is this optional pseudo-class that is available to us and you just put the cytosol. How do we use this optional pseudo-class? Well, we could easily the email address day. We know that that is the only optional element in the form. So let's target that now. But instead of targeting with using CSAs by targeting the type of email which we could do. Let's now target the pseudo-class of optional, because we know that is an optional form control and let's affect its border, right? I don't like the default border that the browser provides. And let's give it one pixel, solid. Save it and navy go. You can see that it's updating at e-mail address field. But as I mentioned in the lecture as well, That's kind of pointers in a way because we don't even need to have this optional element. We can just style the default look and feel of all inputs without it. And if you do that and we get the same result. So it seems kinda point does, but you know what? I guess it doesn't harm to be overly specific when it comes to coding because then it makes it very clear what it is you want to achieve. So here we go. This is a cool form. We're going to be working with it, like I mentioned in a few lectures going forward. And you might be thinking right now, Clyde, this is an awesome little sign-up for very clear and very intuitive. But I beg to differ. It is a good form, but they are a few problems with it. Let's hop back over to the lecture. Let's take a break. Pop-over back to the lecture and Emmy, explain what I think we could do to improve this form. C naught. 9. Generated content: What a cool example, right? You can see our former slowly starting to come together. But let's talk about it in a bit more detail. The example wasn't terrible, right? Perform looked kind of cool, but it wasn't great either. Why wasn't a great? Well, I can think of two reasons. Firstly, we only using color, in other words, we are signaling required versus optional status using color alone. And this isn't good for colorblind people. The second reason why this isn't that great is that the standard convention on the web for a quiet status is an asterix, all the word required being associated with the controls in question. So then, in order to improve our form, why don't we look at a better example of indicating required fields using not only the required pseudo-class, but it's also going to require us to use generated content. What we will, what is generated content? Will generated content is done via us using and targeting pseudo elements. For example, we can use the before and after pseudo elements along with the content property to make a chunk of content appear before or after the effected element. And you'll often use the before and after pseudo elements when it comes to styling forms. Just remember though, that the chunk of content you add is not added to the DOM. So this means it's invisible to screen readers. But what's cool about it is that it is part of the documents styles because it's a pseudo element that can be targeted with styles in the same way that any actual DOM node can. And this is really useful when you want to add a visual indicator to an element, such as a label or an icon. But you don't want it to be picked up by a assistive technologies. So is this making sense? We looked at the required pseudo-class. We discussed the optional, it isn't really that useful to us. And then we discussed the fact that it's actually not enough just to target the required pseudo-class. Often when it comes to forms, we need more. And one of the ways to add more is using generated content through using pseudo elements. So why don't we go back to our form and let's improve our form. In fact, what I want you to do is I want you to use a pseudo element to now add content. Specifically, I want you to add the word required. Give it nice cool styling. So it's very clear to a user that the firstName and lastName is a required field. Let's give that a go. Let's start improving our sign-up form. 10. Adding generated content to our sign up form: I've still got my coffee by the way. I'm really, really enjoying it. I hope you're having a lot of fun. Remember to smile, remember to enjoy what you do. Laughter short. So anyway, we picking up on this form we started, but as I mentioned, we don't just want a color indication to user. What about if they colorblind? So it is good practice on required fields to either have an asterix or the word required. I like the word required. I just prefer it. How can we do that? Many ways, but one way, as I mentioned, is to produce generated content using the before and after pseudo-classes, sorry, the before and after pseudo elements. Now, there is a slight nuance. Let me just go down to HTML. You know, you think you can just target our input and in the pseudo element of often before, I wish it were that simple. But let me do a commenter below the input. And I specifically wanted to do generated quantity. I want to show you how to target the before and after pseudo elements in order to add content. Unfortunately. And this is what I didn't mention in the lecture. Unfortunately, input elements do not support generated content. And I think we discussed this a long time ago. I think it was actually in relation to the text area element, if I'm correct, that they kind of treated like CS is replaced elements in the same stack. We can't add the before and after pseudo elements to them, nothing will happen. Rights, unfortunately, input elements do not support generated content. So let's include a span element to rep the generated content onto that kinda making sense. So all I wanna do is I want to include now right below are and put a span element and in TV span element. And of course I want to do that on both inputs, right? We've done it on the one. And now I want to do it on the last name as well. So everybody but two spans. Obviously nothing happens on our page because we haven't put anything in the span. How do we do that? Well, it's very, very easy. First thing I wanna do is I want to make the span element a relative element. And I want to do that because when we produce are generated content, I want to seek that position property to absolute. And when you think of absolute positioning, that gives us a lot of control, but it's going to be absolute to something. And that something is a parent that has its position property sit relative. And its parent here is going to be the span itself. And we could just target the span, okay. But I want to show you other ways to do it. I want to show you how you can start using CSS combinators. Let's start off at our input and we know the immediately adjacent sibling is this spin. So that's what I'm targeting here. And if you hover over, the IDE actually gives us clues, tells you that we're targeting the span that is immediately after the input. Quite useful. Now to the plus combination means, by the way. And all I wanna do here is I want to sit its position property to relative. That's all I want to do. It really is that simple. Next, I want to be very explicitly target that span and its target now the pseudo element, often the after pseudo elements. How do we do that? Well, firstly, again, we can do this more simply, but I want to show you how to use taught using CSS, combinators, and selectors. Firstly, we only want this to affect input elements that have a required attribute on them, right? We don't want this to affect the email. Maybe we put a span there by mistake. We don't want that to be a required field. Next, we're going to use this Adjacent Sibling because we targeting the span. But this time we want to target the off the pseudo element. Remember the office pseudo element, it creates items, but you can't see it in the DOM. It doesn't really exist on the page, so we can't copy it, we can't select it with the mouse. It really is only there for visual purposes. So let's see how this works. Firstly, I want to sit its position property to what? To absolutes. Exactly. And it's going to be no absolute to that span. The next thing is we have to affect this content property and I want the word required. And you can see it on the browser. Medea students, how awesome is this? Yeah, school. But it just looks like. And how we got to think about styling. Firstly, I want the font-size of a true 0.7 onset. The semicolon at the end. Look what is going on here. Let's give it a background color of black. But now we can see the word. So let's give them a white font. They would have thought would need padding. Hey, it looks terrible. Heading five and 10. Does it look nice? And it looks cool. I actually quite like this. I actually quite like that. But now because we said this positioning to absolute, we have a lot of control. For example, we can push this up by effecting the top property. And let's try 35 pixels. We can also push it, lift. Think 60 pixels will work. I think this is coming on quite nicely, don't you? You know what I wanna do? That's not quite lining. And I guess part of the reason just thinking about it is that the label element is not blocked by default. It's actually inlined and they can cause a few issues. So why don't I just go to our label. Don't know if this will solve the issue, but it should help display block. Yeah, The really looking a bit better. You know what, I actually think that's fine. I mean, we could bring it slightly, slightly down. Let's go down here. Maybe we can do 32 pixels. How's it? I think that looks fine. Yeah, Maybe this is stretching too much. So maybe what we can do is make the field set width 30%. How does that look like? Probably looks fine. But there you go, you can play around with that. But this is just a better way to do things, my dear students, as I mentioned, because it's a pseudo element, we can't select this required upon highlighted in any way. But visually it makes sense, right? It's telling the user that these two fields are required. So as a stand-in, Clyde, well unfortunately it's not quite perfect and distill something that I think we should add in order to improve on the sperm. But in order for me to tell you that, I first want to hop over to another lecture to discuss it and another type of pseudo-class. See you in the next lecture. 11. Valid and invalid pseudo classes: We're not quite done there something else that I really need to mention and that is the valid and invalid pseudo-classes. Specific styling controls based on whether the data is valid or not. What's really cool is that form controls with constraint. Limitations can be targeted based on the valid or invalid states. And when you think or hear the word States, ding-ding-ding, you gotta think it's pseudo classes and the pseudo-classes relevant to forms of valid and invalid in the case of numerical data, by the way, we can also talk about in range and out of range and daughter. Anyway, I want to keep it to the valid and invalid pseudo classes in this lecture, as I mentioned, Form Controls with constraints. Limitations can be targeted based on these two states, valid and invalid. And just remember, I want to be clear, this does not remove the need to perform validation on server side, even though far fewer invalid form requests or to be expected, invalid ones can still be sent by non-compliant browsers. For instance, browsers without HTML5 and without JavaScript, or even by bad people trying to trick your web app. So don't think they're just adding some simple front end constraints is enough to protect data not. But anyway, what else can I say about the valid and invalid? Well, firstly, controls with no constraint, validation will always be valid. So if you go and target their class and you don't have any constraint validation in the styling will always apply to that widget. Because it will always be valid, makes sense, Makes it mixed controls with the required attribute set on them and that have no value are counted as invalid. In other words, they will be matched with the invalid and the required pseudo-class. And what about some of the form controls that have patterns associated with them? Things like inputs, where it's type attribute is set to email. What about where type is URL? Will in those instances, the controls with built-in validation are invalid when the daughter entered into them does not match the pattern specified. And finally, controls whose current values outside the range limit specified by minimax, attributes are invalid, but they're also going to be matched by out of range. What what is this out of range? What does that all about? Don't worry, we will be talking about that shortly. For now. I want to stop here and I want to go back to our call sign-up form. And I want us to now target the valid and invalid pseudo-classes in order to improve upon it. Contracts. I'll see you now. 12. Adding the valid and invalid pseudo classes to our form: Come on, welcome back, welcome back. Super amped. And unfortunately my coffee is always finished. Anyway, having a lot of fun. Now, I want us to add or target the valid and invalid pseudo-classes to just bypass this up, to really add, consume because then spares. But how should we do it? Well, who gets the many ways to do things when it comes to coding? I'm not saying my way is the only way. It's just one of many ways you can do it. And here, remember we've got this span element. Let me just show you an HTML. We've got these anti-spam. And when we put that required word on the screen, what did we do it? What did we target? That's right, we targeted the after pseudo elements. Now we want a valid and invalid styling. But specifically I want to check mark and across to display. And again, I want to target a pseudo element, but we've already targeted the off the pseudo element. So why don't we target the before pseudo element in this case? And in all we need to do is we need to determine its state. And depending on the state, we can change its content property to either a checkmark or across. If you've got it, not quite the morning. I'm going to show you exactly how to do it right now. So of course, let's go up to our CSS. And here let's just put a comment, adding valid and invalid styling. Because that is what's missing on this cool little sign-up form. How do we do it? Well, the first thing I wanna do is I want to set the position property of the span of four to absolute. And of course we could just do it like this. Before. I want to show you how to be more explicit when it comes to CSS. So we can start off at our input and we can target what they tried. We can target the immediately adjacent sibling span. And that's with a plasmid for art. And like I mentioned, I want to see it. It's position property to epsilon. That's all I wanted to do for now, is a few more things I'm going to have to add on. Yeah, I'm going to have to adjust its position right. I'm going to have to move it left. And but let me show you first before I just put figures, they're lit now target the invalid pseudoplastic. And let's give it a border of two pixels. Solid. Rid. Ok, so now we know that these two are invalid, but there's still a problem with this. If we just left it here. Do you notice, let's start typing the name of Molly. If the user clicks out of this control. We get to that red box again. And it's indicating to us that something's either wrong. I mean, if you recall that styling actually applies to all our controls that have a required attribute on him. We don't really want that. We don't really want that. When the user types something in firstName and lastName, we want it to become valid, don't win. And to even be more explicit here, we could have gone inputs with these a required attribute on them and it's invalid. To do this, we could do that. Like I mentioned, we want something very similar, but for when it's valid. So we wanted to inputs, we required attribute a seat. But this time we, it is valid. Yeah, we can just change its border property to one pixel, solid RGBA. Let's just go 1.81689. What does that look like? The user types in D selects the control, it's green now it's indicating to the user that this is a valid form control. And this could be enough. That could be enough. But I do want to add a bit of spin. I want to be a bit cool here. I want to add a little checkmark when it's valid and across when it's not. How do we do that? Well, I've really given u 2s have an I, we need to target the before pseudo element. So let's first deal when it developed first or invalid, invalid first. So let's talk about input. We, its state is invalid. But now we want to talk at the immediately adjacent sibling span. But we want to target the before pseudo element. And the content we want to put in here could be anything we want trots if Iraq wrong. There we go. We've already got the styling name, but I don't want wrong. I want a nice cross and we want it to be read right? Color, RED must be non-working. Keep forgetting to put the semicolon there. But we don't want the word wrong. We actually want across. So I've already got the side here. You've seen the site before. Top towel.com. And we can just, for a cross, I think will that work? I wonder if we can just type X. X is beta. And then what we can do is we can just highlight it, copy it. Good, I'll text editor and paste it in here. We could have just used our keyboard, by the way. Maybe there's a better looking one. Just to show you how to choose a funky, funky looking one. Let's put that in here. No code. There we go. And let's go back to our browser. And there's a cool cross. How awesome. And because it's position property is set to absolute. Remember, this is why we did that is because we have so much control now of a way we want that cross. So for example, let's push it left butt. And I think we just need to actually need to bring it down there and we bring it down a bit too much on pixel. Now we actually need to push it up slightly. Here we go. I think that looks perfect. And of course, when the user starts typing, that XOR removed because it's not now invalid. Pan as it's called, this is called. The last thing I want to do, of course, is not target the input, but we state is valid. And again, we're going to use the plus sign to indicate we targeting the immediately adjacent sibling, which is the span. And of course we affecting the pseudo element styling the content, we want to be a tick or a checkmark. I don't know what you call it a day where you are. In Africa, we call it a tick, but it tickles also one of those little creatures that when you're walking through the bush, they can bite you. Say I'll check mark is probably the correct one. Check mark. Here we go. And just copy that text editor, put it in there. Let's go back to our browser here and start typing. And then we go. But the chick at the moment is blank. So why don't we just change its color property to green? Start typing. How is that? I love it, I love how awesome. You can see, how fans, as you can see, how easy as well as a development. Once you know the tools, there is really no excuse that bed forms instead, it should be very, very easy for your users to come onto your web app and to figure out what you want them to be. Having a lot of fun of you. Join us. I hope you enjoyed this course and I'll see you in the next lecture. 13. Inrange and outofrange pseudo classes: We've been talking about the valid and invalid superclasses. But now I want to quickly talk about when we dealing with numerical data that in range and out of range or pseudo classes, it's rather intuitive, but this is applicable on numerical inputs. Inputs, weights, type of symptom number. We age range is specified by the Min and the max attributes. I keep mentioning input weights, box it to number, but it doesn't only apply in those instances, it's any numerical input. So inputs, weights, type of seat to date, month, week time, datetime, local number, and range will apply in these instances. Got it. Cool, cool, cool. Let's move on. And what's interesting or something that you need to bear in mind is that when an input has daughter that's in range, it's also going to match the valid pseudo-class and vice versa, inputs whose daughter is out of range will also match that, invalidate a pseudo-class. Why isn't that weird, solo the incline? Why do we need both? Well, the short answer is semantics. The issue is really one of semantics. Out of range is more specific. What I mean by this is that using out of range pseudo-class is a more specific type of invalid communication. So you might want to provide a different message for out of range inputs, which will be more helpful to users then just saying invalid, for example. And if you are a bit confused, let me just jump over to the text editor. You know, we've been dealing with this form, the sign-up form, FirstName, LastName, and an e-mail. Well, why don't we remove that email, replaced that with some numerical input type like age. And it did say it needs to be greater than 12. Well, in that instance, let's start using the enraged pseudo-class. You'll see that the valid also applies and how we can use them both. So let's hop over to the Text Editor now. For real, for real, I'm literally just bad with my coffee. I'm going have to get another one soon. But anyway, here is our cool sign-up form. And as you know, we've got first name, last name, and an email. But I want to show you now an example where we can target the out of range pseudo-class. And you'll see once you understand these concepts, whether we just targeting one pseudo-class versus another, really doesn't matter. And then you'll see how easy and intuitive it is. So let's just use this form because we've come such a long way and get rid of the email. And let's put in a input of type number. Because now we want to work with in range and out of range numbers data. So we're going to just quit him in our HTML and add a little bit of CSS. And you'll see that it's going to be really cool. And then in terms of giving an error message, why don't we do something different? Why don't we actually say something like access denied or you've been denied access or something like that, rather than just a cross. So let's get cracking. See how we are we're done. Dove, we read the e-mail control. We don't want the e-mail control anymore, right? So we say this added, gone. All I wanna do now is I want to have a label. Always good to get used to putting labels everywhere. And here we're just going to ask for an age, right? And we'll say it must be 12 or higher. I don't know. I just can't think of anything else right now. So age, the simplest, and English just include now an input. But now I wanted to type set to number, name. We can give age and the idea of course, has to match the value of that attribute, which is also age. But this time, I also want this to have a required attribute and look how cool this is because as we save, it gets exactly the same styling as everything else. How, and why doesn't it have the chick, the cross? Why is it not happening? Well, it's because we don't have a span, right? If we include the span, there we go, it looks like any other input and of course any number now will work. And as you can see, these input controls have the up and down arrow by default and then the chickens display over it. It's quite annoying. So why don't we just push those checkmarks and the crosses to the right of the box. Let's get to our code here. Remember we've got absolute positioning will, instead of it being pushed to the left, why don't we push it to the right? Let's try 10, 15. Here we go. Any number now will work. Yeah, that works. That works. Still looks nice. So there we go. We've added our span now input, but I want to add some constraints here. So let's just say men attribute can be set to what? 12th and the max. Let's say we don't want people over a 100 years old on our site. Actually, you know what? People do reach that, let's say a 150. And let's refresh. And now if a user types in say five, we'll stall invalid. But as soon as they use these toggles, we've got a minimum of 12 and we get a valid state. So here we are targeting the valid state it is working, but an alternative is to use out of range. What do I mean? We can target the input, but now specifically target the state where the number is out of range. In other words, it's either below 12 or more than a 150. And we can basically do exactly the same concept. We can target the span. This time, it's off the pseudo element. We know what we could even talk at the before pseudo element. And here we want content to be, sorry, denied entry. So if we out of range, Let's do five. We've got sorry, denied entry. You know what? I actually don't want to target the pseudo elements. I want to replace the word required. Can you see the word required there? Why don't we actually target the shoot applause. And let's put the number five. There we go. So at least that has changed. Sorry, denied entry. Well, let's just put x is denied, access. Denied. Let's put a 160. X is denied. It's pretty cool. The color we want wife, But it is why it's already what? A 100 pixels. Let's put five. These knots fitting nicely. Maybe a 100 pixels is too much to 80. Yeah, that's better. Background color can be read and it's fine. Denied, baby. Actually the width can even be less. Should we try 57? Here we go. That looks fine. I want to push it, push it lift. So let's do that. We should lift AT, I think that looks cool. How awesome is this? Can you see how cool it is? So now we've got obviously different styling applied to different things that's required if this is now invalid or if it's out of range. If the user types one, we get this existent unhide all. And of course when we start going in range, that disappears. So there we go, heavy very quick example just to show you that we don't always have to just target the valid pseudo-class. We've got these others called out of range. And of course in range. When we dealing with numerical data. There we go. There we go. I hope it's making sense. And I told you, you know, boils down mostly to semantics, but also it can be quite practical. I mean, in our case, we did target the out of range pseudo-class and we gave the user a very specific message when it came to that being out of range. So there's one very useful scenario of us wanting to target the outer range versus only the invalid. Because they invalid pseudo-class might have styling applied to all other form controls. In our case, firstName and lastName. Okay, cool. You've got it. You've got it. There's just one more thing I want to mention, and it's bit of a warning, but it's an obvious warning. You just need to understand your code when you start writing HTML. And I know it sounds obvious to say you need to understand your code, but you really do. Let me ask you a question. What if you use both pseudo-classes, required and out of range at the same time, can you do that? What does it mean? Well, as it turns out, they worked very nicely together. Because when the page first loads, the required class will be displayed, right in our case, along with that Red Cross and the border. But when you've typed in a valid number, for example, a valid age in our case, then the input will turn valid. If I were, you then go and change the age injury to one that's out of range. Then of course we show that custom error message to the user access denied. And the out of range styling is therefore shown. And that thing to bear in mind is because the out of range rule appears later in our CSS source code then the required Rule, the cascading rules come into play and the out of range message is shown instead of say the invalid or the required styling. So just bear that in mind rat or I. But I think we've covered a lot and lot and yet there's still a few more things I want to mention when it comes to CSS styling forms. So stick with me and I'll see you in the next lecture. 14. Enabled and disabled pseudo classes: Welcome back to yet another lecture on pseudo classes. And now I want to talk about styling enabled and disabled inputs. Firstly, what is an enabled elements? That's just an element that can be activated. In other words, it can be selected, clicked on, typed into et cetera, et cetera. And a disabled element is the complete opposite, right? It cannot be interacted with in any way. And even more than this, daughter is not even sent to the server. But what's really, really cool, this is that these two states, enabled and disabled. They can be targeted using the enabled and disabled pseudo-classes. And how does the enabled pseudo-class work? Well, It's very, very simple. Firstly, I just want to mention it is only associated with form elements, right? Inputs, select elements and text area elements. And enabled elements includes the ones, as I mentioned, you can select on that. You can enter data into it, you can focus on or click into eccentric cetera. And how do you target it with CSS? Well, let's say a check box is checked and you want to target the label immediately after it, we can type it out like this. There's an example, pretty straightforward, right? Pretty intuitive. And I'm going to show you an example shortly. But before I do, let me just talk a little bit more about this disabled pseudo-class. Why would this ever be useful? Well, sometimes if some data does not apply to certain user, you might not want to submit their daughter when they submit the form. What isn't that weird mall? A classic example is a addressed for commonly you'll be asked if you want to use the same address for billing and shipping. Let's say the user has the same shipping address as the billing address. Will in that case, is no point sending duplicate information to a server. You may as well only seen one address and disable the other. Said making sense. If not, don't worry, let me actually hop over now to Visual Studio Code. And let me show you an example of using the enabled and disabled CSS selectors because pictures speak a thousand words. 15. Enabled form - HTML rundown: It's getting cold here, my dear students, it has getting freezing here when it is approaching. And then I'm not a man of winter anyway. Okay, What I wanna do, well, let's assume you're buying goods and you need it shipped, right? So you get asked for your delivery address and a billing address. So the first thing I've done, as you can see, the billing address is the same as the delivery address. By default, it's checked by default when the page first loads. And of course the user can input the name and address. They cannot do so for the billing address because it is disabled. We'll actually, the other thing is, let's just say name is Wally. And the dresses one to a lawn. Revenue. If the user clicks, admit, you can see in the URL bar are either name and address in the first box has been submitted to the server, nothing else. But intuitively, what's going to happen when the user unchecks this checkbox? Let's write out once these inputs here to suddenly now become enabled. And then if the user falls them out and click Submit, I want all their daughter to be submitted to the server. Right now it's not working because I want to give you this file. This is like the starting point and a whole run through the HTML now with you quickly so you understand how a bolted, I just didn't want to do it from scratch. We've done a lot of HTML building in this course. And I think you probably just gonna get bored watching me. You can really tell that I've set this up of the field, set the legend, and then just inputs with the type of text, right? Very, very intuitive. I've put the required attribute on them. So if the user does try and click Submit the browser where to allow us to do so. Don't get lost in all the detail. All I'm trying to convey to you is how we can use the enabled and disabled pseudo-classes. While our forms here, we using them, of course, when it comes to billing address and it's a very practical and useful scenario. But before I get into but of JavaScript, I'm going to use JavaScript here to listen to an event. Every time this toggle has been checked or unchecked, every time there's a change. I want to listen for that event. And then I want to now toggle the disabled attribute on an off, depending on the cheek states of this checkbox, right? That's what I wanna do. But before I use JavaScript to do that, let me just explain how I coded this up in HTML. That's very reasonable and see how CSS, I won't go through CSS with you. Our leafs, my comments in here so you can see hostile it all up. But I want to discuss the HTML. The first thing I did is I wrapped everything within a form, right? We're dealing with forms. This course is all of our forms. And then I have two main sections. I've got the delivery address and we wrap that in a field set with the legend and billing address, and we read death within a field set. An elision thing what I did was I've got two inputs for each direct, each within a div. You've seen this structure before. Of course, each form control has its label and input. And in order to make it a required field, That's right, I put the required attribute on each input element. And the billing address was rather similar, right? I put the required attribute on each input element in order to make that check box checked by default, what do we have to do? Remember, fiery fishes page, it's checked by default. All in order to do that, we just put the checked attribute on the actual input of type checkbox. It really is that simple. Then you'll notice that I used disabled attribute on the two inputs. You might be thinking, Clyde, why didn't you put disabled on the actual entire fields it, for example, why didn't I appear on the field seats? Put disabled on here? Why is that? Can you figure it out? Well, if I do that, everything will be disabled, including the check box. So the user will never be able to toggle that checkbox. And that's the reason why I don't want it on the actual field sit at sulfur only wanted it on these two inputs, name and address. And this still allows this to be enabled. And I gave this field set an ID of Berlin. And if I scroll up, you'll notice that the first fields it, that delivery address. I didn't have to give an ID because we're not even going to be targeting net with CSS or sorry, was with JavaScript. So that's why wouldn't it comes to billing address. I've got an ID on this field set of bling. And then of course, very simply we've got our button of type submit. We've got script tags. And this is where I went to include our JavaScript. So I've put a comment, yeah, I haven't wrote or written any JavaScript. Maybe you can give it a go. We've done a lot of it in this course. But if you don't know how to do it, don't stress, I'll walk through exactly what we do in the next lecture. But just to remember, what I'm going to be doing is I'm going to be doing two things. In order to do those two things with JavaScript, I'm going to be listening for the change event on that checkbox because every time it's checked, a change event will be fired and I'm going to be listening for that event. And when that event happens, what do we want to happen? Well, we want two things to happen. One, we want that disabled attribute on each of those inputs to be toggled on and off. So when the user first checks, that, will take that check away, we want these disabled attributes. There. We want them to disappear. We want them to be removed. So that's the first thing we want to do. The second thing I wanna do is I want to change the styling. And you'll notice on here for the label, we've put a class of disabled label. Can you see the class disabled label? Disabled label rhymes, right, but if I scroll up in our CSS, in EC, we've got this disabled label. We've got a color of gray. So we want to affect that styling too. So it's a two things we wanna do, right? We want to remove that disabled label styling, and we want to remove the disabled attribute. And of course, if the user then checks it again, we want to add those back. So it's kind of like a toggle and we wanna keep putting it back in and removing it every time that change event is fired, who can be a lot to take in? Try and give it a go. The most important thing though, is that you understand HTML. That's the most important thing to understand the structure. Gender, Stan, why or how we've disabled turn inputs. At most important, take a break, jump up and down, pat yourself on the back. And I'll see you in the next lecture. We will code up this JavaScript to give them ideas. 16. Enabled form - adding JavaScript: Did you give it a go? Don't worry if you couldn't do it. We're going to be running through the entire solution video right now. So yeah, we are where we left off. We've got this checkbox, but obviously now nothing happens when we check it on and off. We've got our file and around through the HTML, we've just got our script tags here with nothing in it. So what do we do? We put it listen for an event specifically, I want to listen for a change event. Do we listen for that change of int? We'll look at our browser. Right? We're listening for the change event on this checkbox. That's where the change of it's going to be fired from. And when that fired, we want to do two things, right? The first thing we wanna do is we want to remove the disabled attribute on list inputs. And the second thing we wanna do is we kind of want to remove that disabled clause styling. So if we scroll up an opcode, we can see that we've got this label. And on the label we've got a class called Disabled lab. Right now the disabled level, if we just go, we've just given the label a certain color. So all we wanna do is we want to remove that styling, that clause. Those are the two things we want to do, and it really isn't that difficult. Let me now remove myself so I don't block any code. All right, let's begin. What's the first step? The first step is to grab the checkbox because that's where it all begins, right? We listening for a change event on that checkbox. So let's grab our checkbox where it all begins. How do we do that? Well, it's very easy. Let's define a variable in JavaScript by using the let keyword. Let's just call it a checkbox. For lack of a better word, we can access this checkbox by starting at our document object. On here we've got get elements by ID. And the ID we gave it was billing, checkbox. Images confirm it is Berlin checkbox. If we scroll up, there is our input type checkbox with an ID of Berlin checkbox. So there we go. We've got that checkbox in a variable. The next step is, let's add the change event listener. Right? We want to listen for an event. We do that by accessing our checkbox element. And on here, the dom gives us access to a method called addEventListener. We want to listen for the change event. And when this change event is fired, the second argument to this method is a callback function. That's something we want to execute when we hear that change event. And let's just call our function toggle, toggle bling. We could call it anything we want. The final step is, let's define the function called Toggle. Feeling. Really, really is this easy? How do we define a function in JavaScript? Easy, we just use the function keyword. This is a reserved word in JavaScript. Next, we've got to define the function that we're creating and we call it total billing. You define a function by following a parentheses. And then all your business logic and code resides within these curly braces. And this is working. Let me prove it to you. That's just console log. Hi. So every time this change event is fired, this toggle bling function will be fired. And in the toggle billing function, we just got console log. Hi. And I know I'm going slow, but it's important Jan standards. Let's go to the console. Let's now start toggling on and off. And you can see every time we do high gets canceled. So we know it's working. Let's delete this console. What do we want to do? Well firstly, we need to select all billing items. Or should I call them bullying inputs? Let me call them bling inputs, right? If we scroll up in our code, I'm wanting to grab both of those inputs is two of them. There could even be more on your site. That could be a whole lot more. So it's going to be a collection. That's something you need to realize. And then we're going to loop through that collection and we either going to remove or add that disabled attribute if you've got it. Okay, so how do we then put all of these bling inputs into a collection? Well, let's define a variable. Let's just call it bling inputs. And we can access this collection by accessing our document object. On here we've got query selector all. And this will return a collection, specifically a node list collection. And let me prove it to you. We want to select what? We want to select all items with an ID of Berlin. Remember, this is actually done on the parent. Let me show you. On the parent field set we've got an idea of bling. Then this just works just like normal CSS selectors using a space to denote a child. The child we want as an input, but not all inputs just with type of text. So we're being very explicit here as to what we want. And as I mentioned, this will return a collection and I'll prove it to you. Let's console log billing inputs to the screen. So let's go to our browser. X is our console. And let's toggle this off. And there's our node list. And if we open up our node list, how interesting is that we've got our inputs and you'll notice that there is a length property here. This is given to us by the DOM, so we can easily access this length. Which we will have to access because we need to know how many times to loop through this collection. Or let me say it another way, we need to know how many items are in here. So when we run our for-loop, which I'm going to be doing now, we know how many times it needs to run. Okay. Very simple. Kou Hannah, I know I'm going a bit slow, but I want you to follow along. So we've got our billing inputs, okay? This is still with one thing at a time. Before we deal with the class adding and removing that, I wanted to finish with this billing inputs. I want us to remove and add that disabled attribute. How do we do that? Well, we need to loop through the entire input collection. And on each loop we want to add or remove the disabled attribute. That's what we wanna do now and how do we do it? Well, it is very, very simple. We just need to use the for loop. The for loop is very simple. In Arduino, confuse you with all of the words first, I'll walk you through it. So in order to do FOR loop, we need to use the four reserved word in JavaScript, and it takes three arguments. The first argument is, we need to keep track of how many times we loop. Otherwise, it's going to loop forever and never stop. There'll be a problem. And we normally loop through by defining a variable, and the variable needs to start somewhere. So let's say we define a variables I starting at 0 because we want to loop to start at 0. The second argument to this for loop is what? Will we have two tall the JavaScript parser when to stop? And we need to stop when I is less than willing inputs. Remember that? And remember we saw length property rights. So we know that I starts at 0 and in order to access the first item in a list in JavaScript, we use square bracket notation that accesses the first item in the collection. That's just the syntax of JavaScript. So we know at 0 we're accessing the first input. Then the second loop. We want to increase 9p21. Then it's going to access the second input in the collection, and then it's going to hit this I is less than bling inputs linked. So when I get to two, that's going to be false and then we don't loop through this anymore. So that's why it will put a stop to it. There'll be a finite loop. In other words, the final argument that this for loop is what happens at the end of each loop will at the end of each loop we just want to increase the variable i's value by one and we donate that by two classes in JavaScript. So there we go. It is that simple. Now, all we wanna do, if the disabled property is set to true, we set it to false and vice versa. That's the goal. How do we do that? We'll, all we need to do is access our billing inputs. We want to access the first item in that input when I is 0 and then a second when I is one. And then we want to access the disabled attribute of that input. What do we wanna do? Well, in JavaScript, we've got this exclamation mark which basically just gives you the opposite. It's another word for not. And then of course we want to secondly, access the same thing. So basically what we doing this abled I spelled that wrong. So basically here, what we're doing is we're accessing the disabled property. So it's either gonna be true or false that disabled attribute. And then we're going to set it to the complete opposite. So on the first iteration, we know that the disabled properties can be set to true, but we're going to assign it the value of false. So we can dynamically update the disabled attribute. Let me show you what I mean. Let's go to the browser and now let's toggle this checkbox. How awesome is that mature students hope you've got a big smile on your face and you can see how easy it is. This isn't tricky stuff. The final piece to the puzzle is amending the styling of those labels. In fact, we want to remove a class when it's unchecked. And then we want to put the cross back when it's told again, how can we do that? Well, we've got all the billing inputs, but now we don't need the bullying inputs. We want to select all the labels because those are the ones we want to effect, right? So delicious, call it Berlin labels, and we can do it in exactly the same way. Query Select All. We want, all the classes with bling label attached to them. All elements with the class of billing label. Scroll up. That's what we're getting. We're getting all the labels that have a class of bling label because it makes it. So we've got our labels, right and restore going to be now doing code within this for loop, because we're going to be for looping through all of those levels. And all we wanna do now is toggle the class of disabled label. You're just going to be toggling that on and off. In order to do that, we access our balloon labels collection. We access whatever item in the collection. We are in the loop at any given time. And then what's really cool is we've got this class list property in that we've got a method called toggle and it literally just toggles a class. What class we're wanting to toggle will we are wanting to toggle the disabled label class. Does that make sense? This class lists and this toggle that's given to us by the DOM. By the way, it's not JavaScript per se, but we use JavaScript to access it. All these brackets, all the dots. These are all JavaScript syntax. But anyway, this should work right? If we go to our browser and now we start toggling this, you can see ever-so-slightly that the label styling has changed. You know, I can make it more obvious. And if we scroll up here, are disabled level color, we can just say color, grade. So it's hideous. I know. But you'll notice a drastic change now. Right? How also Medea students, and of course, what's really cool about this, because we have required on these inputs, if the user types something here, something here, but doesn't feel anything in the billing address and tries to submit, we will get prevented from doing so. Front end validation is working. Of course, if the user disables thus, then we are allowed to submit the form, right? How cool, how cool. And I hope you followed along. Just to briefly give you a summary, we grabbed our checkbox. We then edit an event listener on the checkbox. And the event we wanted to listen for is the change event. Every time a user changes that checked status, that change event will be fired by the DOM. When that happens, we want to execute a function called Toggle billing. And then we just defined toggle bling. All we did was we got a collection of inputs and labels. We then looped through that collection. We grab each item in that collection. And of course, the two things we did was one, we removed an edit that disabled attribute by using that exclamation mark in JavaScript. And the second thing we did was we toggle those clauses on and off that disabled label class. And what's really cool to prove that it is toggling in real-time. Let's inspect this element. I'm actually glad I actually almost forgot to even show you this. What's really cool is if we grab this name, right now we've got the class of disabled label. Can you see it? But if the user toggles is check box, what's going to happen? Well, it disappears. And that is because we've accessed this toggle method on the class list and we toggling their claws. So every time that event is fired, their classes being toggled, being included and excluded. We check it again. It's added back. We uncheck it, it's removed. How awesome. So there we go. Hope you having a lot of fun hobby, learning a ton. This was just a very, very rudimentary example of showing you how we can use the enabled and disabled pseudo classes. See you in the next lecture. 17. Radio and checkboxes - checked: There's something I want to discuss now specifically related to radio buttons and checkboxes. Specifically, I want to talk about the checked, the default and the indeterminate state, or I should say, pseudo-classes. And when I talk about radio buttons and checkboxes, all amine is an input element. Weights type attribute is either sit to radio or its type attribute, checkbox. Remember we did this a long time ago, although they visually look kind of similar. They are very different in the purpose and functionality. Remember radio buttons, you can only select one within a group. And in that sense, they are mutually exclusive. Whereas an input of type checkbox, well that is just a checkbox. You can have one, you can have more. They can all be selected or none can be selected. But anyways, let me move on. As I mentioned, they are three very important states that you need to know about when working with radio buttons and checkboxes. And they are checked the default state and the indeterminate state or art. All right, let me discuss each one very briefly. First, let's look at this. When checked, we know that those elements are going to be matched by the pseudo-class. And we might this be useful? Well, it might be useful when you want to remove the default styling and 12 your own custom styling. And remember, we've seen examples of this a few sections ago. We built our own radio buttons. And in fact, in order to remove the browser default, remember we had to sit the appearance property to none. And then we built the styles back up our souls. What, it's actually better for me just to show you. So let me take the code that we did earlier. I'm just going to slightly amend it with different animations. Let's have a look at that code are running through it and you'll remember, I'm sure your recall, that checked pseudo-class at really, really was very intuitive. Let me show you now quickly. So what is this checked state all about? Well, you've already seen examples of this where we built our own custom radio buttons. And here are kinda bolted up again, but I've just got slightly different animation, right? That red dot now just comes from the center. And the user can select your favorite fruit. Very simple. So I'm not going to write the HTML code up with you again because we already did it early on in this course. But I can run you through it, right? I mean, it's very, very simple. The first thing we have to do effectively is grab all of our inputs would type radio, and we have to remove the default styling on these radio buttons. And we do that by setting its appearance property to none. If we don't do that, that's going to be excruciatingly irritating. Because what's going to happen is the default selection styling is going to apply. Look. So if I click Bonanno story, we can see that behind our custom red dots, we've got this blue dot. Not very ideal, is it? So that's exactly why we sit. Parents property to none. And and in all I did here and I'll give you this file so you can open it up and we can start working with it later. I just applied some styling and custom styling to our input type radio. Then what I did was I accessed the Perforce pseudo elements in order to create that round dots. And I just created that round dot by literally sitting its background color to red, giving it a border radius, and of course, giving a width and height. So all I did, and of course I just added these transform CSS properties on here, so it doesn't just appear instantly. It looks like an animation. So the inclined, where does this checked state come into the picture? Well, let's assume we don't have a check state. Let's comment that out. Go to the browser. What's going to happen? Well, nothing because wouldn't he use a checks this input box. Nothing happens. We haven't defined any CSS that's targeting any state. So nothing happens. Which is why we have to have this input of type radio where we target the chicks pseudo-class. Because now we saying hey, when the pseudo-class is checked, we can now access that red dot, right, which we sit in the before pseudo element. And of course we can see that scale to one at the moment, the scale is 5000. So here we go, Very simple and this is just kind of a recap for you as to how we use the Chico State. The HTML is very simple. We just wrapped every radio button in a paragraph element. And that's basically it. And we put everything, all those red dots and our Custom radio button in the span elements. That's all I've done. Let's hop back to the lecture. 18. Radio and checkboxes - default: Right, So that's checked pseudo-class. We've then got the default state, and this matches radios and checkboxes that are checked by default. In other words, on the page load bed, What's interesting is that this is going to match the default pseudo-class, even if the user later and checks that box. What I know, it sounds a bit strange. But let me hop over to our text editor. Let's take the code we just looked at when we're looking at the jig pseudo-class. And let's add this default state. And let me show you what I mean. See how we are. We're at our previous example. You saw this when we were talking about the checked state. Now I want to show you how we can use the default state and x is the default pseudo-class. Let's say we want to say it, I don't know, banana is the default selection. And we want the word default by this banana. How can we do that? Baby? Simple. All I want to do, I want to have a span element. So let's say here we got to spend later on we can choose whichever radio button we want to have this default on. So I'm going to put an empty span elements in every single one. I just wanna show you different ways to do things. That's why I'm doing it. And how do we use this default pseudo class? How does it work? Well, let me show you. I want to access these spans. Yes, We can just access it like this. Okay. But I don't want to I want to show you a more precise and more specific way we can access our input element. And of course then we want a general sibling of this input with siblings span. And if we hover over, this was really cool. The IDE is it shows us that we're targeting this input and one of its siblings. It doesn't have to be immediately adjacent. That's why we're not using the plus By the way, we using this tool under the general sibling. So there we go, We accessing this span. I first want to sit its position property to relative and it's the first thing I want to walk, pretty much the only thing I actually want to do. Because now it allows us to access the input. But now I want to target the default pseudo class and I want to access its general sibling of span. And I went to affect the styling in the, off the pseudo element. I want the content to be default. But now if we save this and we go to the browser, nothing happens. And the reason nothing happens as y a 100 percent, we haven't told the browser which radio button should be the default. And it's very, very easy in order to do so, all we have to do on the input element itself is include the checked attribute. It really, really is that simple. And if we go to the browser, now, there we go, we've got banana, and then we've got that word default. Let me just put it side-by-side bar coding editor, right? So our content of default is working, but I just want to style it a bit differently because now uses might think we trying to say banana default, which is not the case. Let's give it a background color of black. Let's give it a color of white, or does it look like, there we go, maybe some padding would be good. Five pixels to the top and bottom, and Tim pixels to the right and lift. Yeah, I think that's looking quite cool. We can also move it around because we'll actually first we have to set its position property to not inherit two absolute. Right now we can move it around, so we can push it to the right. And I think that's really cool. I actually think that's one. I actually think that's fine. You know what, It's a bit big. It's a bit big. So let me just decreases font-size. Yeah, that's cool. And in, just wanna push it down slightly. Top can be minus three trial four pixels. There we go. Awesome is that? But remember in the lecture I said that even when the user later checks another radio button, that default pseudo-class is still going to be activated. So if the user clicks strawberry, that default is still, the styling still applies to the original element that we sit that checked attribute on. If you've got this making sense. Cool, Let's jump back to the lecture. 19. Radio and checkboxes - indeterminate: And last but not least, we've got this indeterminate state. And this indeterminate state applies when radios and checkboxes on neither checked or unchecked and who we are dried. In those instances, they are considered indeterminate and they will deform match the indeterminate pseudo-class. So what elements can be indeterminate? Well, we've already seen the progress element, right? And when the progress element does not have a value attribute, the indeterminate pseudo-class will match. We can also use this indeterminate state on radio buttons and checkboxes. How does it work with radio buttons will win all the radio buttons in the same name, group or unchecked, then the indeterminate state will apply. When we're talking about checkboxes. You can actually put an indeterminate property or an attribute on that input and you can set its value to true. When you do that, then again, that indeterminate pseudo-class will apply. Bad actions, speak louder than words. So why don't we go back to our code that we've been dealing with. And let me show you how this indeterminate pseudo-class can be accessed when it comes to radio buttons. So we've looked at the tricked pseudo-class or the state. We've looked at, the default pseudo-class and the default state. The final thing I want to look at is this indeterminate state. What does that all about? Well, firstly, in order for the indeterminate state to work, we are not allowed to have a default right now, not ever check state because then it is determinant. It's not in an indeterminate state. So let's remove this checked attribute on this input. In other words, we don't have any default state. Everything is unchecked at the moment. Right? So right now we are in an indeterminate state. How can approve it to you very easily that grab our input where it's type attribute is set to radio, just being explicit here. And I want to access this indeterminate state. And to prove that it is, all I need to show you is that we can set the border two pixels, solid grid. There we go. So we know it's in an indeterminate state. Why would you ever want to use it? I don't know. You could animate certain things based on the intermediate state. For example, let's add an animation property here. Let's say takes 0.4 seconds for each animation, the way the animation occurs, let's just say it can happen in a linear fashion, doesn't have to be ease in or ease out. We want the animation to continue indefinitely, right? So it's going to be an infinite animation. And then I want to add this other property called alternate. What I mean by this is at, I want the animation to go from 0 to one and then back down from one to 0. I don't want it to go from 0 to 10 to one. I'll show you what I mean shortly. If you don't, if you don't quite get it. And in final thing I wanna do here is I want to add keyframes. And in order to add keyframes, Let's just give it a custom name, our keyframe, and let's just call it customer Pulse. Just so I can show you how this pulsing animation works. In order to add keyframes, we use the keyframes keyword. We are targeting our custom pulse here. And so redefining. And then we've got another keyword. We want to start from some way. So we use the from keyword. And this is our starting position, right? We're going to start from two pixels, solid grid. That's where we want the animation to start from n. We wanted to go with four. Let's just grow the border. Six pixels, solid grid. And if we save this and look at the browser, how awesome is that Medea students? Remember I told you the whole detection make it longer. 1 second. If we don't have this alternative value here, then look what happens. It just literally starts from scratch every time, so it's quite jarring on the eye. That's exactly why up this alternate value there. And then you can play around with it. You can say from blue. And obviously it's going to go to read. Who bit irritating. I know Hannah. But anyway, when a user then eventually chicks a radio, it's not an indeterminate state and of course everything stops. So it can be quite useful. You know, it just depends on what you're wanting to achieve. They talk back to the lecture. Well done, well done, who? We've come a long way. Heavenly. If you actually try and think back to our very first lecture, it feels young's and Young's ago. I've had a lot of fun, Hope you have to, and hopefully learning a lot. I hope this section about CSS, pseudo-classes, pseudo elements. I hope it's becoming more intuitive. Know I've had a lot of fun and I can't wait to see you in the next section, but you know what, I'm actually thinking before I do, let me just give you a summary. Let me have one more summary lecture after discussing some of the things we've learned. And I'll see you in the next section. Conduit. 20. Pseudo classes - summary: Woohoo, we have finally finished talking about pseudo-classes. Did you even think that we're gonna get yeah, man or man, but well done, well done for sticking with me. I've had a lot of fun. So before we finish up this section, what have we learned about? Well firstly, remember we use pseudo classes whenever we want to style a state of an element. When you gather with state decoding the heat, you think about pseudo-classes and they are a number of pseudo-classes of interests that this course is all about forms. And because it's all about forms, I've had to kind of focus our pseudo-classes on those most relevant to us, to all of these that you're seeing in front of you. Now, we've been through numerous examples in this course of using and toggling the states. So by now, these are going to become second nature to your day. By osteoblast style, a checkbox based on his cheek state. All you have to do is target the chick pseudo-class and apply CSS styling to it. That required is very common. We've seen plenty, all of them. In fact, that's, what's frustrating is that they are many other pseudo-classes, many others. But I don't have time in this course to go through them all. But the good news is that our thought wall, let me just in the summary lecture, look at a few well-supported pseudo classes that you may want to use in your forms at some point. So it is still useful for us, but perhaps not as important as the others. We've been used to. Let me grab this rock thrown into the screen. And let's first look at this focus within pseudo-class. This is an interesting one because it matches an element that has received focus or contains an element that has received focus, you get it. So for example, if you had a form, you might want the whole form to highlight, to blow, to become a certain color. In some way, when an input inside that form is focused, then you would target this focus within pseudo-class. There's also another one called focus visible. What's that about? Let just matches focused elements that received focus phi keyboard interaction rather than touch on mouse. This might be useful if you want to show a different style for keyboard focus compared to mouse focus, for example. And another well-known pseudo-class is placeholder, shown. This pseudo-class matches inputs and text area elements that have a placeholder showing because the value of the element is empty, we've actually seen a few examples in this course already where we used this pseudo-class. Very, very useful. So these are three very well-supported pseudo-classes and the focus within the focus visible and the placeholder shown. Pseudo-classes. These states are very well supported by browsers. They are, others don't. And there's some very good ones out there. But perhaps they are not as well supported by all browsers, at least at the time of this recording. So before we finish off, let me just look at some of these less well-supported pseudo-classes. Well firstly, we've got blank and we've got NT. Basically both of these match in T form controls. Well what does a different thing if they both match empty form controls will pack is empty, is more in depth. That also matches elements that have no children. But even more than us that matches are the empty elements like BR and HR, that's blank and empty. And last but not least, we've got this user invalid pseudo-class. And when it is supported, It's very similar to the invalid pseudo-class, but with better user experience. If the value is valid when the input receives focus, the element may match invalid as the user into Stata if the values temporarily invalid. But it's only going to match user invalid when an element loses focus. And this can be better UI. And if the value was originally invalid, it will match both the invaded and the US invalid pseudo-classes for the whole duration of the focus. And of course in that instance in a similar manner to invalid, it's going to stop matching user invalid state. And similarly to when we use invalid, it's going to stop matching the user invalid state when the value does finally become valid. So there you go, these three pseudo-classes or interesting, but perhaps yet not as well supported in browsers as I speak. Well done for getting to the end of this section. Well done for sticking with me. I know we've been through a lot. I know you've had to endure a lot of code with me, but seriously, well done, it's only going to help you. I hope you had a lot of fun. I hope you still having a lot of fun. And I can't wait to get into the next section. 21. Class Outro: I can't believe it. I can't believe we finished this class so quickly. We really are cruising through this entire series together, a well-done and keep falling me a lot. In this class. We learned about CSS styling specifically when it comes to forms, this series, this class is not about CSS, which is why, you know everything about CSS. But I really kept a narrow focus on forms when we looked at CSS, pseudo classes, pseudo elements, we discussed the box model, et cetera, et cetera. So I hope by now you're starting to feel a bit more confident when it comes to styling your very own forms that I am super excited. Do you know why? Because in the very next class we are going to be discussing a very important when it comes to forms. And that is validation icon white. And I hope to see you in the very next loss.