Web Forms 2021 - Part 6: Web Forms New Input Types & Fun Challenges | Clyde Matthew | Skillshare

Playback Speed

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

Web Forms 2021 - Part 6: Web Forms New Input Types & Fun Challenges

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

31 Lessons (3h 13m)
    • 1. Class Introduction - newer input types & fun challenges

    • 2. Newer input types

    • 3. Email type - intro

    • 4. Email type - validation and benefits

    • 5. Search type

    • 6. Using CSS with the search type

    • 7. Pseudo classes and pseudo elements with the search input type

    • 8. Tel type

    • 9. URL type

    • 10. Number type

    • 11. Take a step back

    • 12. Range type

    • 13. Using JavaScript with the range type

    • 14. Date and time pickers

    • 15. Date type example

    • 16. Color type

    • 17. Common attributes

    • 18. Email Challenge - intro

    • 19. Email Challenge - solution

    • 20. Toggle Challenge - intro

    • 21. Toggle Challenge - building the actual toggle

    • 22. Toggle Challenge - final solution

    • 23. Color Picker Challenge - intro

    • 24. Color Picker Challenge - building the HTML

    • 25. Color Picker Challenge - adding JavaScript

    • 26. Custom Range Picker Challenge - intro

    • 27. Custom Range Picker Challenge - building the HTML

    • 28. Custom Range Picker Challenge - adding JavaScript

    • 29. Form Challenge - intro

    • 30. Form Challenge - solution

    • 31. Class outro

  • --
  • 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.





About This Class


What we cover in this particular Class?

We will cover of ton of information in this entire series, but for Part 6 I'm going to teach you about the newer <input> types introduced to us by HTML. I also give you 5 challenges and show you the solutions. It's going to be EPIC.  

In the previous Skillshare class (in Class 5), we looked at the original input types.

But now its time to get serious.

There’s a plethora of new HTML5 form input types (about 15) that make creating engaging and easy-to-use web forms much easier for web designers. The new HTML5 input types give us data validation, date picker controls, color picker controls, inline help text, and more in the web browsers that support them.

The benefits of these new input types are tremendous for web developers and web designers.

First, the new input types reduce our reliance on client-side- and server-side-scripting for validating common data types like dates, email addresses, and URLs.

For mobile UI developers: You know that creating cross-platform web forms using HTML4 standards is a pain. Using HTML5 form input types could make things easier.

And to put everything you learn in this class into action, we code up some challenges. We do things like:

  • create basic email validation
  • create a custom toggle on a form
  • create a custom color picker widget
  • create a custom range picker
  • build a really cool form

So what are you waiting for? 


--- in case you're wondering, this entire series is about 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.


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


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


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!
  • Yes
  • Somewhat
  • Not really
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.


1. Class Introduction - newer input types & fun challenges: Welcome, welcome, welcome to yet another class. I'm super, super excited. My name's client, I'm going to be your instructor in this class. And this class is standalone use. It's part of an entire series. We'll be learning about forms that are split each class so that if you've very familiar with one area, you don't have to do it. So this class is going to be super exciting cuz we're going to be talking about the new, verbatim, the improved input types that HTML5 have given us when it comes to building web forms. There are about 15 new types by the way. So there are a lot. We're going to be talking about color pickers, date and time pickers. The email input type is very, very cool. We're going to be looking at range because it's going to be super, super fascinating. You already have solid foundations if you've been following me on the previous classes. But now we really going to get into modern form of web development. Super, super exciting. Follow along, grab a coffee, and I'll see you in the very first lecture videos. 2. Newer input types: Who I'm super excited for this section, my dear students. And I keep saying that the input is one of the most powerful HTML elements there is. And I think by now, you should be starting to intuitively get a feel for why. I keep saying it's because there are so many different things we can do with the input type. And in the previous section, we spoke about the original input types that have been with us since Paul Finn off the bus. I've been around for a very long time. And this section is exciting because now it's time to look at the input types. Okay, clive, or what are they? Very high level. We are going to be going through each one individually in more detail. But before we do, he has a very, very quick summary. First is look at week. Week is just the day control that allows you to pick a week by week. I mean, a week and a year date. But there's no time zone. There's no time. So that's the week. I'm going to just quickly go through these color. Very intuitive allows you to open up a color picker and choose a color. Then we've got the type of date. And believe it or not, that just allows you to pick a date again with no time and it opens up a date. Picker on the browser is an example that you can see. Then we've got datetime local, and it's similar to the input of type date on we saw previously. But this time you do have the ability to add time as well, vertical. Then we've got this cool Email tab. And it looks like input of type text is an example you can see on the screen, looks the same as input type text, but it does have validation rules and triggers, the appropriate keyboard for phones. Then we've got month. Again. This uses select a month and a year with no time zone. We've got number. Again, it looks very similar to input type text. Until you hover over it, you can see those two arrows up and down. That's a control for entering a number and it's got default, validation. Aka you can't enter text. And of course the appropriate number keyboard pops up on a phone when you have this type. So that's number. Then we've got range. Range is pretty cool. It's a control for entering a number where the exact number doesn't really matter. You often see these on property websites, for example, when you're searching with their price range, you can find minimum and maximum useful we're going to be seen at later. So does another interesting one. It's basically just a text field used to enter a search term. And the major difference between this and a text type is that there is a delete item that displays that clears the input box. We are going to be seeing that later. Then we've got this type of test. And that's just a control used to enter a telephone number that opens up a telephone key bed on a phone. Then we've got type of time. And that allows a time to be entered. Very, very intuitive. And finally, we got this URL. Again, it looks like input type text, but it has inbuilt Validation rules and irrelevant keyboard, again will display on a phone. And there we have it. Those are the new input types. We've looked at the originals. Now we're looking at the new attacks introduced to us by HTML5. And this was a very high level introduction to the different types. Then the next lectures in upcoming lectures, let's dig deeper into some of these types. Xenon. 3. Email type - intro: The first type I want to look at is drumroll, the input of type e-mail. And what does this type all about? Well, it's pretty intuitive. The user is required to type an email address into the field. And what this means is that any other content entity into that field causes the browser to display an era when the form is submitted. So it is a helpful aid to guide users to fill out a form accurately and more than nasa can't save time. Because it's useful to know that two daughters not correct immediately rather than having to wait for a round-trip to the server. So it's always good to perform some front end validation before sending daughter server. Now the useful thing to know is that you can allow multiple email addresses to be entered by including a boolean attribute called multiple. Each e-mail address in that instance will have to be separated by a comma. So that attribute will look like this, multiple. And in this instance, each email would have to be separated by a comma. So just make sure you make the user aware that a comma has to be the separator. But other than that, it's pretty intuitive, right? What's another reason to have e-mail on some devices, notably touched devices with dynamic keyboards like smartphones, a different virtual keypad might be presented that is more suitable for entering email addresses, including the at symbol. So here's an example of an Android and an apple where you've got those at symbols. It just helps you remember we're trying to make filling out forms as easy and streamlined as possible for a user. Let's hop over to the console and just see how this email type works. It's very, very simple. All we need to do is setup our HTML body within the body, of course, with form. And in the form we can start with our input. E-mail can give it a name of email, an ID of email. Save it, refresh the page. And we can see right now it looks exactly like a text inputs. And of course we need a button will type submits just so we can see that this bad boy. And of course, if you type anything like this, a SDF and retake submit, this is what's really cool. We get an error message. This is built in front side validation by the browser. How awesome is that? And of course something else you might want is a label. Remember the four has to match the ID of the input we want it to attach itself to. And here we gave the input an ID of email, tested e-mail. And yeah, we can say into your email, how does this look? There we go. And if the user obviously clicks now on the label, the input box gets highlighted. How close the bat. If we type some random email at ABC and ABC and we click Submit, in this instance, the browser will not stop us from sending the daughter, even though you and I both know that was a fictitious email. Let's jump back into the lecture. What else can I say about this type of specifically when it comes to validation? As I've mentioned, the e-mail type gives us built-in client-side era validation. And when it comes to styling, just remember that the valid and invalid CSAs, pseudo-classes or automatically applied as appropriate to visually denote whether the current value of the field is a valid email address or not. So just remember, you can target the valid and invalid CSS pseudo classes. Very, very interesting. 4. Email type - validation and benefits: But when it comes to validation, it is not compete. And by complete amine, it's not good for a security AND logic. We already know that server-side code is required to make sure your site is secure. You don't want, heck is coming in and writing malicious code into your input fields and submitting that onto the server. Okay, so that's security. But the logic itself is also not compete when we use the e-mail type. And what do I mean when I say the logic is not complete? 12 x at y will be a valid email address according to the default provided constraints. And this is because the email input type allows intranet e-mail addresses by default. And please note Medea students, but actually not possible to verify if the address provided is in existence. You cannot do this on front end. This is actually an issue that you have to handle. Bio server side scripts, a good way to test for a valid email addresses to send the link to that e-mail. And that when the user clicks it confirms that the email is valid. We've all seen this in action with many sites that you and I sign up to. So just bear that in mind that using this type of email won't ensure that it is actually a valid email address. This is not to say we can't do anything on the front side. We've already seen the use of the pattern attribute in other areas of code in this course. And this allows us to of course, implemented different validation behavior on our e-mails. And of course, we can also use the title attribute to display custom error messages. Let me show you this in action. As I mentioned, what we can do is we can improve ourselves validation rules. One way we can improve front end validation is to use the pattern attribute. We did get into the patent attributes when we're talking about passwords. So I don't wanna get into it here again, but I'll just show you a very, very quick example. So say we have a site and you require for whatever reasons, the user to have a Gmail account. So instead of saying into your email, let's say into your valid email. Email. So it has to be female. How can we implement this? Well, we know that Gmail is just taste and we know that the patent attributes is a regular expression allowing us to define rules and check patterns within text. So this would be a very easy to define with the patent attributes. So let's include the pattern attribute and regular expressions on only applicable JavaScript bats. When it comes to HTML, the regular expression it expects is in JavaScript syntax. So what we do is rapid in a string. We can have any characters are at bats. At some points. We are going to have to have the at symbol and the gmail.com. And that is it. That's our pattern. We can also put on the required attribute, making us a required field before a user can submit the form. And of course, we can provide a custom error message to the user by using the title attribute. So here we can say, please provide a valid email address. Let's go back now to the browser. Let's expand the browser. And let's go ABC. Abc. We take submits and now we are prevented. How cool. Please match the requested format. And these are title rights, our title attribute, please provide a valid and Gmail e-mail address. So of course, if the user goes back and writes at gmail.com and click submit, this will work. So there we go. That's just a very, very rudimentary, very high-level example of us using the pattern attribute haunts and improve our client side validation. This is fine, isn't it? So just remember that pattern attribute is used to specify a regular expression that the input elements value is checked against. And this pattern attribute does work well with an input of type e-mail. We've actually used it in previous lectures. I think it was with the password type, remember that? So yeah, we've seen another example of using the patent, but this time on email. And just to refresh your memory, a regular expression is nothing more than a sequence of characters that forms a search pattern, right? So don't get overwhelmed. But moving on, let me just summarize what we've learned with this type e-mail. Firstly, the e-mail type makes web development easier. Why does it make it easier? Or because validation work is done automatically by the browser. If the required attribute has been specified as well, the browser will not even except the form to be submitted until the user types in an email. It just means we have to write less JavaScript business logic ourselves. And secondly, you can choose to style the email input type. Of course, you want to do this because you want all your styles to appear standard across the board. And it's very easy to apply CSS styling to an e-mail. All you gotta do is target your input what type e-mail. And of course, apply your own CSS styles. Very intuitive. And finally, another benefit of using type e-mail is that touched devices will show the appropriate keyboard. For example, when the type is set to e-mail, you're going to be seeing the at symbol and the period symbols easily. And it just helps you fall in the fields. So there you go, My dear students, we've looked at the input of type e-mail. We've looked at the benefits of brings. We've looked at examples I hope are starting to become more intuitive. See you in the next lecture. 5. Search type: Next I want to talk about the input type search. And right off the bat, I just want to say that input elements of type search of very, very similar to those of type text, except that they are specifically intended for handling search terms. They are basically equivalent in behavior to the type of text. But user agents and browsers may choose to style them differently by default. I guess what I'm trying to say is there pain not special? It just creates a single line text box. That's all that this type of search does. But this is not to say they're useless. Search controls or useful to get a short runs of takes. Its servers or client-side scripts will use as parameters to conduct a search operations. But from a browser side, it does absolutely nothing. It behaves just like a takes two inputs and this isn't a problem. In fact, the spec doesn't even require this type of search to do anything special. What I'm trying to say is that don't expect the browser to bind this input type with a search engine or perform any fancy search operations bec of it. And as I mentioned, it's almost the same as a normal text box that is input of type text. But the browser just tweaks the design slightly to make it look a bit pretty heavy. Got a few other classes. For example, on touch devices, you may see a search word or a magnifying glass icon like this. And it's pretty cool, right? It's improving the UI. And this is not all my ideas. There's another benefit of having an input with a type of search. And that is, values can be automatically saved and re-used to allow auto-completion. This autocompletion and saving features, pretty much done, but all modern browsers today, in other words, they automatically store previously entered across domains, which then come up as auto-complete options when subsequent searches are formed. And it's obviously helps users who tend to do searches on the same or similar search queries over time. So bottom line is that it's pretty similar to the input of type text with a few subtle differences. And those subtle differences boil down to styling. You know what? Before we move on, I just want to have another lecture. We use the valid and invalid pseudo process. So with a lot of these different input types, we do get these pseudo forces by default, the browser gives it to us. And we can target these valid and invalid process to style our widgets differently depending on whether it's valid or invalid. So why did we code up an input with title search? We can make this field look quiet. So if it's length, I want to show a little cross. And when it's bedded, I want the process to change to 10. How can we do that? Hence, I am going to be using the off the pseudo elements. We've done this a few times in the course. And so give it a think. And in the next lecture, That's coat, get a causeway. See you now. 6. Using CSS with the search type: So I want to show you the input of type search quickly. Firstly, I want to show you the input type text. Okay, let's go to the end and input of type search. And you'll see if we save this and we just refresh the browser. Visually, they look exactly the same. Initially. If we are inside the TextField, you know that this is what it looks like. But if we go into the search input box, look what happens. We start typing. We get that little x that cross Chrome automatically puts us in for us. And of course, if the user clicks, it, clears the search box altogether. So that's one visual difference between two. Now let's just get rid of that text box and just have the search box. Just like that. And many of the attributes we can use are the same as other form widgets. Bear in mind. We have to have a name attributes, otherwise nothing will be submitted to the server. You have to CGD name-value pairs to serve as the name here can be q. Why did I use the letter q? It's just convention. A lot of developers when it comes to search terms define a variable and they defined it as q. So it's just something that's done in the development industry, but you don't have to do it. Okay. It's not like it's mandatory or anything, but you do have to have a name attribute. The next thing we can put on, yeah, is a placeholder attributes. I'm just showing you that we can use many of the same attributes you've seen before. And we can hit Search. We save this, refresh the page. These are search placeholder costs. When the user clicks on the box, it stalled until you start typing. So very, very handy. Now what's really cool is we can easily, easily style this input type. It's not difficult. You know what, let me just set up this document a bit better to the HTML within here, body. And let's put the input in the body. And of course before the body, we can have a head section with the style section. And you'll see how easy it is for us to style this input type search. Firstly, you've seen this before. We can talk about inputs and with CSS we can define its type. And of course the yes search. And we can apply any styling we want. It's very easy in this instance, you'll see later on in the course, I dedicate an entire section talking about styling and some widgets are easy to style, somewhat difficult. The search is very, very easy. In fact. And I'll show you now. We can change font size, 18 pixels, background, tomato. Refresh your browser. There we go. You can already see we starting to add some funky styles. What else? You'll notice if the user starts typing, it's black. We can make that white color, white houses. Yeah, that's better. You know what's actually don't even like a place holder of search. So what we can do as well, which is pretty neat. Here's another thing we can do with CSS. We can target it type of search again. But what we can do is we can actually specifically style the placeholder. How awesome is that? And yeah, we can make its color white, for example, much better. And we can even add some padding. Let's add some padding to the left, just a little bit to pixels. There we go. Just pushes it slightly, makes it look very cool. That's our place holder. And it's continued to style the actual input text itself and change the font family. Georgia, I'll say it. Eight, starting to look cool. I don't like that border. Change a border, two pixels, solid black for example. I mean, you can see how easy this is to style, right? We doing nothing fancy and yet it's starting to come together nicely. What about adding slack text shadow? They could look cool. Let's see what that looks like. 000 two pixels black under that look. Having that looks kinda cool, man. And let's just have spacing between words, like word spacing. 55 pixels. Just type on, yeah, Ross warthogs. See really nice spacing between those words. I think it looks cool and we can change its width, say a 100%. And if we expand this, you can see the width is stretched a 100 percent across the viewport. Anyway, I'll stop here because I can actually keep going on. But you can see how nice you can create these search boxes and you can really customize it to be very intuitive and very user-friendly. 7. Pseudo classes and pseudo elements with the search input type: Welcome back to yet another lecture. And now we're going to be looking at the inputs. We'll type search. But like I mentioned, I want to add a cool, funky design. I want to have a cross when nothing is entered into that box. And then I want to have a checkmark when they're starting to be entered. And I'm going to be using the CSS pseudo element selector after. So it's going to be very simple. But I want to do more and more of these examples with you becoming very aware of how it's done. And you'll see it's very, very intuitive. First thing I wanna do, of course, is create an HTML document. And it's just even see better thing here we can have a head style because we are going to be adding the styles to our search box. But for now, let's just start on the actual format cells. We don't need an action. And yeah, let's have our input of type search. We can have a name of q, that's just convention. An ID we can have is my search. For example. We can have a placeholder. Placeholder. We can assign it the value of search. We can make this a required input type. Let's just look what it looks like on the browser. There we go, Very straightforward. And then let's add a button with the type of submit. Submits. And of course, if the user tries to submit the form with our type anything, we get an error state we can actually instead of the word submitted its hips, search makes one should have seen. And then under the button, remember I said I want to have now a cross when nothing is entered and then when it's valid on 12, that checkmark to be displayed. How can we do that? Well, I'm going to create an empty div here, and then we're going to style it. Okay, so thirsty. And just have its display property is set to inline because by default it's a block element and I wanted in line, okay, so I wanted to display an x and a checkmark to the right of the search box indicating whether it's valid or invalid. And you've already seen many examples in this course of as targeting the valid and invalid pseudo-class. What's really cool is that they apply to many different widgets. And then it becomes very easy and intuitive to style these widgets. So it's very, very cool. So firstly, let's talk at the input when it's imbedded, okay, which is the default starting state. The user hasn't typed anything heavy. And then what I wanna do is I want to target all the div element, the sentence, and I'm going to target of the pseudo elements, right? And with this, we need to set its content. I'm going to get back to this in a second. Well, actually we could do it now. I want it to be an x. And how do we put an x in here? Well, one way is we can use a website images, open it up called Top towel.com. But I want to target the URL where we specifically looking at HTML heroes. And it's a really cool website because it gives us all the symbol codes in HTML that we can use for our website design. We just expand this. There we go. I want the data to a checkmark first quarter like this middle one. Let's click on that. And we want the CSE is good, okay, that's what we want. The other option, you can either write the CSS code. You know what, I just realized, we're not doing the check marks, doing the cross onto it. So let's talk about the cross. But like the first one is just use the first one. What we could do is copy this cross itself. Or we could use this CSS code entity. Remember, we can't use the decimal value. We have to use the hexadecimal value, which is why we have to use 29 to be. So we can copy this and we can put that in its contents. Okay, and if we save this, and we go here, we can see we've got that, right. How awesome is that? Yeah. And you know what you mean, just get rid of this button for now. We don't actually need a button here. I'm just showing you a style cool search box. So there's the cross. Very, very cool. It's a bit close to the close. Let me give some padding lift. Seven pixels. That's a bitter. But you'll notice now if the user starts typing, the x disappears, but I actually want it to be replaced with a checkmark. So all we need to do now is we're not targeting the invalidate pseudo-class. Now we're going to be targeting the valid pseudo-class. Same thing. We're going to be looking at all the div and we're going to target, it's often pseudo elements. Very simple, but now we're going to talk it. We're going to change its contents, right? We want it to be now a check-mark called lacked the first one. And we could just copy this as well, which is quite nice. So we can go into our code and just copy that checkmark. Let's do the same thing with padding left. So it's just consistent seven pixels. And here we go. If we look at our site, we start typing, we get a checkbox mission completed. No ways how awesome was this? You can just see how easy and intuitive and starts becoming to style your own form widgets. And trust me, a lot of designers, a lot of developers don't take the time to do these little, these little things that just make a big difference to user experience. And you can see a lot of the techniques we are applying targeting the valid pseudo-class, invalid pseudo-class using the author's pseudo elements. Lot of these techniques we use over and over again for different form widgets. So don't be intimidated. I hope it's going to become more intuitive to you. But enough said, let's move on to the next lecture. 8. Tel type: I now want to talk about the input type tool. And as you guessed it, the type of input is used for entering telephone numbers. And because this is one of the newer types, if browsers do not support the TTL attributes, it's going to fall back to the standard text input type, okay, but most browsers today all know, and except the TTL types, I wouldn't even worry about it. We'll client, how useful is this type of TTL? Will remember when we were discussing type of email, I mentioned that in terms of logic, it doesn't complete the process for us, the user can still type in N valid email. And it's very similar when it comes to the TTL type. We know that internationally phone numbers take on very different formats for both technical and localization reasons. And due to this, the TTL input does not attempt to validate the format of a phone number. It would be very difficult for it to do so, right? But no fear because we can make use of the pattern attribute or we can even use the set custom validity Javascript method to enforce a format if required. In terms of that Javascript method set validity. We're going to be looking at that later on in the course. So why don't I quickly show you an example of using the pattern attribute or once again, but this time with the TTL type. Let's have a look. As always, a blank Visual Studio code file is open and all I want to do is I want to add an input. But this time with type. Let's give it a name of tell. Let's give it an ID of tell the browser. There we go. It just looks like an input of type text, right? I can even type text in there. What I wanna do now, well, I wasn't asked to add some logic. Remember what I just said? That browsers don't implement any validation logic. So why don't we do it again with the patent attributes. And let's say, for example, well before the patent that's at a place holder. And let's say we want our format to be something like this. 1, 2, 3, 4, 5, 6, 7, 8, 9. Okay. Just giving an example, say we wanted the number to be in that format. We know the browser won't do anything to help us enforce that rule. So we have to create our own role and what do we do when it comes to creating rules? When we're dealing with strings and numbers. That's right. We can use regex and we do that by using the pattern attribute. We enclose it within speech tags. And here we can define our own pattern. Firstly, the user has to type numbers, any number between 0 and 9, but we only want three of them. We're going to limit it to three numbers at a time. Then we have a dash. And we literally repeat this three times, 0 to nine. And we only requiring three numbers again and 0 to 93 numbers again. How awesome is that? Very, very easy, very, very intuitive. Now, if the user wants to submit a SDF, the browser will not let the user. Do, you know what? Let me wrap this in a form and then I'll actually show you is take this input and put it all inside the form. And the other thing I wanna do is I want to have a button year of type, submit three Fisher page and it's transmit an empty field. We haven't put the required attribute on yeah, required. Submit the field. Weren't did us do sir? Okay. Because we have that required attribute that makes sense. If we try and just do liters, it's not going to let us do it. Please match the requested format. Okay. And the requested format of forces 123456789. We can even do our own custom error message, and you already know this. We use the title attributes custom error message. Sorry, I need to refresh. Let's try and submit this. There is our custom error message. But if we type 1, 2, 3, 4, 5, 6, 7, 8, 9, and we try and submit this. It will work. So that's just a quick, quick example to show you a, how we can use input of type towel and B how we can use a regex to really specify the formatting that we require on. With that, let's jump back into the lecture. I hope it's becoming more intuitive. And we've already seen this attribute used on the password type. We've seen it used on the search type 1, the e-mail type, I should add. And now we've seen it used on the teletype, pretty cool rights and don't take all this information for granted. You really, really have come a long way. In way. Something else I want to mention with the tile type is that it's pretty limited in terms of usefulness on a desktop, right? Real benefit comes when you're using a phone or tablet, because numbers pop up on the screen rather than characters. And over and above this, the devices auto complete mechanisms often kick in and suggest phone numbers that can be altered fold with a single tap. And that's it folks. That's the input where its type is set to tell. Can you now tell them I'm ready for the next lecture. 9. URL type: We are cruising through all these types. Next, I want to talk about the input with the type set to URL. I hadn't really design that URL logo nicely done. I mean, anyway, that's not what's important. And why would you want an input type of euro? I don't know. Maybe you want to ask the user if they have a website of their own and you ask them to type it in, maybe you're asking him for the favorite engine. I don't know, but let's say you want to include an input with type Euro. How does it work? Well, honestly, it's use is to capture URLs, that it's got a huge downside and that is it only takes full absolute URLs. And that, in my opinion, restricts its usefulness. It's just annoying. There's no option to be able to capture just a domain name or just a path, for example, note this means is that the browser will display an error if no protocol is entered, such as HTTP, for example, of the URL is otherwise malformed. Okay, client, give me an example. Okay? Okay. This as an example, suppose this makes sense, so URL, but what about if the user types, one of these two, do you think they would pass? Now? This will result in an era being shown by the browser and it won't submit your form. How irritating. And over and above this, right? Even if we take the top example of HTTPS Twitter.com, just because a URL is well-formed, doesn't mean that it refers to location that actually exist. You'd have to have server-side code that checks for you. And because of all these restrictions at kind of feels like a missed opportunity for me, the different parts of a URL cannot be specified, but it is what we have at the moment and is not only downside with URLs, the other benefit we have, as with most other widgets, is the UI components. Phones usually customized keyboard pop-ups when a URL input type is used. For example, I O S customizes it's keyboards with what they're trying to symbols. Whenever it sees the type sit to a URL and over and above the period comma and forward slash. They also include common top-level domains such as.com. So it just means you as a user don't have to type dot. You just see the text displayed. So it does help from that aspect. And if you're anything like me, you love visual examples. So here you go, right? That's kind of what the keyboard will look like. And it does help. Anyway, I don't want to hop on too much on this type. I don't particularly find it that useful. So let's move on. 10. Number type: Very briefly, I want to talk about now another time, this time of number. And you guessed it. It captures numbers. No surprise there. But what you may not know is that it's got three very useful attributes. And those attributes common x. And let's quickly hop over to the coding editor and have a look at these in action. Firstly, how does this input with type number look like? Well, it's very, very simple. Let's just create a HTML file. In here. We can have our body and within our body, this is create a very simple form. I want to create a form by the way, because I want to submit the form and I want to show you the client side validation with this number type. It's pretty cool. But anyway, how does it look? Very, very simply. Let's just create an input with a type of city number. We don't even need a name or an ID. Let's save it and look at the browser. And there we go. On the face of it, it just looks like input of type text. But if we go now and focus over it, we can see that they are those arrows, the up-and-down error. Of course, we can use our keyboard up and down. I'm using my keyboard now as we speak. We can go negative and positive. A very simple and you'll notice that the increments or the step is set to one by default. So we could actually create a comment here saying by default, the step attribute set to one. Right? That's the same as us manually sitting step 2, 1, there is no difference. Okay, So that's the first cool thing I want to show you. Next, I want to show you something else. I want to now include all three attributes, min, max, and step. What do you think's going to happen? Well, let me put a comment here first. When min, max and step or S8, some browsers will show a narrower input box. Why did I show an arrow? A narrower and narrower input box? The reason it's a smaller input box is because the width, the width of the widest valid value is limited. That's the reason. Let me show you what I mean. Let's create another input, this type of number. But now we don't need a name, we don't need an ID. But now I want to sit say the minimum value of a 100, maximum value can be 999. And let's dip it up in increments of five. Look at that on the browser. Isn't that interesting? So we can see it's a smaller input box. Amazing. And if we try and well, let me actually put a submit button. Let's just break it up and then include a buttonwood type of submit. If we now try and submit a value of five, what do you think's going to happen? Well, that's right. The browser does front side validation for us. It's awesome. We've set the minimum of a 100. And the browser gives us feedback saying the value must be greater than or equal to a 100. How awesome is this Medea students? It's pretty, pretty cool. The other thing worth mentioning is that when we sit the type attribute to number, we cannot write text in here. So I'm trying on my keyboard now, it won't let me. The only thing we can type is numbers. Very, very interesting. So there we go. And obviously the step here is in increments of five because that's what we defined. Of course, if we go over 1000 and transmit that, we also get front side validation. Very, very cool, very, very intuitive. They talk back to the lecture. Diego, pretty intuitive, right? The first thing you would have noticed is that although it looks like a TextField, it does have subtle differences. And here it only allows floating-point numbers between the Min and max values that you specify. And browsers usually provides some UI components. A spinner, for example, to increase or decrease the value of the control. And just like all the other widgets we've been looking at the UI component specific to phones and tablets. Specifically when we use the number type, a number keyboard will show up. It'll look something like this. So it does have its place, right? And we've all seen these keyboards. But before we move on, I just want to talk about the stick in a little bit more detail. We know that you can use this tip attributed to sit, the increment increase or decrease of the number itself, right? And by default, the number type only validates if the number is an integer and by default is set to any. So Clyde, when should I use this type of number? Well, let me just say that it really only makes sense when the range of valid or a labile values is limited. For example, a person's age or height. If, on the other hand, the range is too large for incremental increases to make sense. For example, such as zip code, then another type might be more appropriate. For example, you may want to use the tool type because in that instance and numeric keypad will still be shown that the browser will forgo the number spinner UI feature. And that might be entirely a better option when the numbers start getting very large. Hope this has made sense and I'll see you in the next lecture. 11. Take a step back: Isn't she just beautiful? Ngt. So I'm just a bit jealous. I just wanted to take a break. I wanted to I don't want you to feel intimidated. I know we're going through a ton of different input types. And it can't seem quite daunting. But just take a step back and think about what it is the browsers trying to do? All the browser vendors, all they're trying to do is to improve the user experience. It's not to say that we have to use all of these input types. I mean, we can even go to the extreme and just stick with the input of type text. If you want to use it to upload an email, we can still use that input of type text if you want to use it to insert a number, we can still use input of type text. We don't have to change the type to tell. We don't have to change the type to email, even with that search type, we don't have to use it when it comes to searchers. In fact, we can even use the search type when asking for the user's email. I guess what I'm trying to say is that you need to get comfortable with your own style when developing forms. It's good to know about all these types. Because as we've seen, the biggest benefit comes down to you. I, on phones and tablets, you know, the proper screen comes up, but really it's not make or break. What really is important is knowing how forms work. Knowing how to stretch your form, knowing the attributes like required pattern, title. These are what's really important because these things and targeting the pseudo elements and pseudo classes like valid and invalid, this is what makes forms really, really easy to follow for users. And it's crazy how many forms and show you the same. How many websites you go onto these days. We it's not clear what needs to happen. The areas you don't know where the error is. This should not happen today seriously attack. As a developer, we should be skilled enough to create really easy and intuitive and custom forms. So I just wanted to reassure you that you don't have to memorize each one of these talks. You don't have to use all of the types. Really comes down to your personal Autistic Self. Metals. Awesome about coding. Anyway, that was just a quick break. It's a beautiful day out here today. And yeah, I can't wait to get back into some more lectures. So without further ado, let's continue. Hope you having fun. Medea students, thank you so much for supporting me. Honestly, honestly appreciate it, or could not do this without you. I have a lot of fun as well. I just want to keep going. And if you are enjoying the course, please ask you to just relieve me a good review. If you're not enjoying the course, let me know. I do want to improve. I'm a perfect, a 100 realized that. Anyway, I'll see you in the next lecture videos. 12. Range type: Or are let me hop into my Range Rover. No, not that kind of range. I'm talking about the type of range Range Rovers, the type of vehicle here. I'm not sure if you've got away, you are. But anyway, there was just a dad joke. Nothing more, nothing less. Anyways, now I'm talking about the input weights type, attribute a sit to range. What is this all about? Well, it's an alternative way to using input of type number, but it's mostly used when the user doesn't really care about the exact value. So really sliders are useful when the user doesn't really care about the accuracy or about the exact value of the number. In other words, usage wise, sliders are less accurate than text fields. And therefore they are used to pick a number whose precise value is not necessarily important. Just remember that they are a range. You see what I did there of useful scenarios where you'd want to use the range type. In other words, there are a number of cool uses you can do with it. For example, you often see these ranges on house buying sites where you want to set a maximum property price to filter by. For example, what is your budget for a house? Range fields might also be useful for those questions on forms like, How likely are you to recommend this product TO frame with lackey at one end and unlikely at the other, for example. Or another question, how do you rate this course? So you can see these precise values might not be that important. And in these cases, ranges can be very, very useful. But enough said, let's hop over to the console and see it in action. Let's look at a very, very quick slider example. As always, we start with HTML. We can have a head and then a style section. And of course, in our body, we want to create a form. Is no action required. And in our form, Let's create a label. For malicious habit. As price. I'm going to ask the user to choose a maximum house price, right? It's refresh your browser. And there we go. Of course now we need our input and this type of type range. First time we've used it, I'll call, and you can see a really visually, the browser has inserted a range widgets, Wow, very cool. The name can be priced. Its ID has to match up to the for attribute or the label, which is also price. Just in terms of styling, it seemed to this. So all I want to do is grab our body. Very quick ways we can mix with the body to 500 pixels in the, we can centric. Here we go. Just so you can see it better. We can actually zoom in slightly as well as what I wanna do on this input type rights are 12 seats, perimeters. And remember I said the three most important attributes for this minimum. Let's just say it's $50 thousand. The maximum can be 500 thousand dollars. The step can be and this is the increments, right? Every time you hit the right or left arrow on your keyboard, Let's step up by $1000 and let's have a value of 250 thousand. As a starting point. The first thing I want you to see is that visually nothing happens, right? We've got this maximum house price. We don't know what it is. And you can move the slider, but you can't see anything. That's the first hindrance. Secondly, there is no way to see the value in Italy submit the form. So if we got our coding editor here and we just add a button of type, submit, submit, right? If we move this now and we submit, vein, we see the price here, it's $402 thousand, but until you hit submit, you don't know what it is. And that's why I was telling you that if the value is not that important, you generally want to use this range widget. But when value is very important, you actually need to visually display that results to the screen somehow. But before we jump into that, I just wanted to show you how easy it was to code up a range. Pretty cool, right? So there we go. We sought an action. We saw how important it is to configure your slide property that is The min-max and step attributes. It's very, very important, but there was a major downside, wasn't there. And that is the range type doesn't provide any visual feedback to the user. We could only see its value when the submit event was fired on the form. But don't panic Medea students, there is a solution and that is we can grab the value, for example, using JavaScript and then we can display it to the user and an output element. What does trace don't stress. Let's hop over to the coding editor and let me show you this in action. 13. Using JavaScript with the range type: Okay, so here we are. This is where we left off. We've got this range, but we can't see what the user, what the range is. We can't see the value, and it's irritating because you can only see it when it's submitted to the server. So how do we create an output element and display it, or display the value to the screen? Well, like I mentioned, we can use an output elements. Let me show you how we can do this. The first thing we need to do is we need to use JavaScript. And in order to do that, we have to put JavaScript within the script tags. Now, what we have to do is we have to do a few things. Firstly, we want to get the price value right? So in order to do that, we need to grab that input of type range. So how do we do that? Well, we can just define a variable called price and we can get that input with the query selector. So we access the document on here. We've got a method called query selector. And you guessed it, we want to target that element that has an ID of price. Very, very simple. The next thing I wanna do is I want to create an output element within our HTML. You know what? Let's just remove the button for now. I'll put, and I want to give it a class. Let's give it a class of RNA, or let's say price output, output, as that's exactly what it is. Now, the second step in JavaScript is to grab that output. So again, let's define a variable called output, and it's get it again with the query selector, query selector. And this time we want to query select the element that has a class of price up. But if we leave it at this, nothing visually is happening to the browser and refresh nothing has happened. So let's set a default, default value to the output elements. Right? Because right now we can see the output element has nothing within its tags. It's empty. And in order to do this, all we have to do is grab our output variable we defined in JavaScript above. And we can sit, It's textContent property to what? That's right To the value of the input. And we know we have the input or the price input in that price variable we've defined in JavaScript. And on there we've got the value property rights, and initially we set that to 250 thousand. If we save this and we go back to the browser, we should see it. There we go. But obviously now what happens is when we move, nothing happens, okay, and we want that to be dynamic. We wanted to constantly change. And what I didn't mention in the lecture was that every time a change occurs on this range, the input event gets fired by the browser. So what we have to do in JavaScript is we have to listen for that input event. And every time that input event is triggered, we want to effectively update that output elements value. So let's quickly, quickly do that and then we'll be done. All we have to do is go back to our coding editor. And as I mentioned, on that input of price, we have to add an event listener. And the event we listening for here is impulse, right? And I'll just use arrow syntax to define our callback function. What happens when this input event is fired? Very, very easy. All we wanna do is we want to grab our output element we defined above and JavaScript. We want to change its text content property to what? That's right. We want to assign the value of that input of type range, right? So we can grab our price variable and it has a property of value. All we wanted to end this, my dear students should be enough. Let's go back here, refresh. And as we slide the range control, we can see the numbers and how awesome is this? So-called much, much better, much more user-friendly for the user to see the numbers as they're sliding along. Today you go, That's the code. Very, very simple. Javascript. Nothing, nothing crazy going on here. And I can't wait to continue on to the next lecture. See you now. 14. Date and time pickers: Who I'm super, super excited to get into this lecture because it can get quite complex when dealing with dates and times. In fact, gathering date and time values has traditionally been a nightmare for developers that you may be thinking. Over-exaggerate. Why is it so difficult? Well, how do you express the last minute of the previous millennium, for example? The different formats in different ways you can display it. And traditionally it's been really confusing because different operating systems display things in different ways. Users have different sittings and it can easily become a nightmare and dates can get muddled up. As I'm sure you can agree with me, it's important to have a good calendar selection UI that enables users to select dates without them having to switch over to a native calendar app, or potentially entering them in different formats that are hard for us as developers to pause. And this is exactly why HTML5 gave us different types, different type values for creating inputs, for dates and times will collide. What are they? Favor? The question, let's have a look. Html5 is introduced. These types us with dates, datetime, month datetime, local, and weak. And the promise here is that these new field types will enable the browser to provide a standardized, accessible, and consistent user interface to capture dates and times from the user with. This really is important. But students y, well, we know that date and time formats vary world over, right? Based on both language and location. So having the browser give us an unambiguous technical date format really is an ideal solution. Okay, or how do we set this up? How does that work? Very, very easy. We know that date and time controls or created using the input element, we just need to set an appropriate value for the type attribute, depending on whether you want to collect dates, times, or both. Okay, Well, let's look at some examples. Let's start by first looking at the input type set to date. Firstly, it lets the user enter a date either with a takes box that validates the input or a special date picker interface. And the resulting value includes a year, month, and day. But importantly, it does not include the time developers like the specific type generally because the date value a user enters will be mapped to the iso date format, which is used in most technical contexts. The last point there is very, very important. The displayed date format will differ from the actual value. The displayed data is formatted based on the locale of the user's browser. But the past and value, that value attribute will always be formatted year, year, year, month, month, day, just like you see below, on the 31st of December 20, 1909. Making sense? I hope so. Let's move on. Now. I want to look at the type of datetime local. What does that all about? Well, it's pretty cool. This creates a widget letting the user enter a date and a time. And that time, I just mean hours and minutes, seconds on not supported with this type. Something to bear in mind is that the controls UI does vary in general, from browser to browser. And at the moment support, it's kind of patchy that I mean, really browsers a very, very quick to implement the latest standard, sudden suspect that will be much of an issue much longer. What is the intention of this time? We'll edit call. The control is intended to simply represent a local date and time hello. In this situation, again, where the displayed date and time format to the user will differ or may differ from the actual value sent to the server. For example, if we look at that value on the screen here of 31st of December 2030, that might be what the user sees. And when they submit that to the server, it's going to be converted to the following format. Of course, it's submitted to the server name value pairs, let's say its name attribute is your date. It's value's going to be converted to the format year, year, year, month, month, day, day, then a capital T and the hours and the minutes. This is how it's going to look when it's into the server. And as you can see with this example, what's submitted to the server is different to what the user sees on the front end. So it's just something for you to bear in mind. All right, let's move on to another type. This time I want to look at type of man. What is this all about? Well, very intuitive. It just lists the user into a month and a year. And like the previous type, the UI varies from browser to browser and support as currently touching Gertz, a bit patchy. And the format submitted to the server is always in the format of year, year, year, month, month. So again, we're in the situation of what the user sees is not necessarily what's submitted to the server. Okey-dokey. Let's move on on a look now at the type of weak input where it's type are set to week, creates a widgets to display and pick a week number. And it's your, and just remember that week starts on Monday and run to Sunday. And another slight nuance is that the first week 1 of each year contains the first Thursday of that year, which may not include the first day of the year, or it may include the last few days of the previous year. Just bear that in mind, a slight nuance. And similarly to the other types we've been looking at, what the user sees may not be submitted to the server in the exact same format right here. It's always going to be submitted as year-to-year slash w and the week. Got it, Great. Finally, I want to look at input where its type is set to time. A widget is created that allows the user to display and pick a time value in support of this type is good across all modern browsers. And while time may display in a 12-hour format, the value returned is always going to be in a 24 hour format regardless of the operating system of the user's machine. If the time the user selects includes seconds, the format is always going to be submitted to the server as ours hours, colon minutes, minutes, colon seconds, seconds. That's one thing to bear in mind though, is when a form including a time input is submitted, the value has to be URL encoded before being sent to the server. So we know all those little colon's are going to be converted to a percentage 3. Remember, we went through all of that URL encoding stuff in previous sections. So here we go. We see it very practically. Who? I know we've done a lot seriously, and that's why sometimes you just gotta have some coffee, You just gotta get through it. I know it's a lot to take in. Just remember, traditionally, working with dates has been really hard for developers. And that's why we've got all these different types that the browsers have tried to implement to give us the ability to give the user the right for mental or a type of date to server. And a few other things I can mention. Well firstly, all date and time widgets can be constrained by using the Min and max attributes and further constraining using the stick attributes. We've already seen these in action, but I will show you an example quickly of how it works. And the final thing I want to mention is just kinda browser support. Where are we with debt? Well, the crux of it is that date and time, because don't have great support when it comes to browsers. At the moment, at the time of this video, Chrome, Edge and Oprah support these very well, but it's not really much support when it comes to Internet Explorer. Safari has some support, but not desktop support. And what about Firefox? Will Firefox only supports time and date. So as you can see, it's kind of patchy rights. And one solution to this is to use, say, a JavaScript library in order to custom design your own data bigger. But anyway, now at least you know all the different types when it comes to dates and times. Hope you have a lot of fun and I'll see you in the next lecture. 15. Date type example: Actions speak louder than words. So let's look at a very, very quick example, or wanna do is create an input type date. This is the first time I used it. How exciting a and the name attribute we can just sit to my date. And let's just fictitiously come up with an example. Let's say we flying to Mars, we've got a shuttle flight to Mars and we want to ask users, when are you available to fly to Mars? Okay, That's our question to users. We know the ID has to match the four attributes. That's my date and leads now say, well, let me show you what this looks like first on a brother. Okay, let's go to the browser, refresh. There you go. We know you're available to fly to Mars. This is the date widget that is displayed by Chrome. If I click on that, you know, there is no validation. Yeah, we can literally go back to belong we want and we can go forward. Okay, there's no Min, is no max. And the treatise that date calendar. So it kinda makes sense, right? But let's say we need time to build the shuttle so we know that the soonest someone can leave for Mars is in 2025, first of January 2020, five, let's say the shuttle can't be standard for events got to leave, right? Say it has to leave by 2030 and first of January. The other thing we can specify, what if I save this and go to the browser. Let me show you what this looks like. Right? If we now look at the widgets, we opened it up. And we look at years. We are limited to 25, and the max value is 2030. We conquer back further in time and we conquer forward more in time, right? So there we go. That's what that looks like. But now let's impute a few other things on here. The one thing I wanna do is what did we have a default value? So let's say that its value attributes to, I don't know, 2025, June the first This are the browser and there we go. We refresh and needs first of June 2025 as the default. The other thing we can do here is we can introduce another attribute called step. And just so you know, steep is expressed as days, a case. Or if we say, we don't want the user to be able to select every single day between 2025 and 2030, we might say, Hey, listen, every team that has just give us 10 day increments, maybe we should they receive and then we can just say it's every Monday, we reduce every week. But let's just assign here an example of tin, okay, just keep it simple. So we want the date to increment by ten days. So if we now go to our browser and we refresh, and we open this widget. You can see now that every teen days the user's allowed to select a value. I don't know, I just wanted to show you this. This is, I can use it. Min, max, step, value, etcetera, etcetera. This is the default styling applied by Chrome. It will differ across different browsers, but at least you know, kind of how it works now, right? Let's move on. 16. Color type: Stay motivated. Medea students stay motivated. Let's keep going. We're almost, almost done. Now we're looking at the input weights. Type attribute is set to color. I must say traditionally colors have been a little bit difficult to handle. And horizon is, is that there are many ways to express them. For example, collect can be expressed as RGB decimal, or hexadecimal Hs all values. Or you can even use keywords in HTML like red or blue or hot pink, as we've seen in previous lectures. So with that said, what does type color do? Type color captures colors in hex notation, such as BB, CC. The HTML specification, by the way, calls this a color well control within 10 that the browser should provide a user-friendly Color Picker of some sort to a user. But anyway, given that it expresses values in hex notation, this just means that the value attribute of the type color is always going to be a seven character string. And this string is going to specify an RGB color in yes, you guessed it, hexadecimal format. And even though the input can take uppercase or lowercase characters, it's always going to be stored in lowercase form. Okay, That makes sense, That makes sense. And just in case you wondering if no value specified, the default value is going to be black and sitting the value of this input type to anything other than a fully opaque RGB color in hex notation will result in a value being set to black. So just remember that the value has to be in seven character hex notation. Specifically, you cannot use CSS color names like red or tomato or hot pink or any CSS functions and texts to set the value. And this makes sense, right? When you keep in mind that HTML and CSS are separate languages and they both have separate specs. So the HTML spec that governs the input with type color tells us that it has to be in hex format or AAE Client. I've got it. But what happens now when a user selects a color? How do we keep tally on what color the user has selected? Well, that's a very, very good question. As is the case with other input types. There are actually two events that can be used to track color. That's right, two different events, the input event and the change event. And really you can use both of these different events just as a recap before I tell you the differences, remember what it is we doing here? We have to use JavaScript to listen for an event that's fired. Well, We can listen for the input event, all the change event when it comes to tracking color changes, the input event is going to be fired on the input element every time the color changes. So if the user selects blue, it's going to fire. Then the change event, on the other hand, is only going to be fired when the user dismisses the color picker, carry certain kind of very close to the input event, just with a slight differences, slight nuance, but no matter which one is used, you can always determine the new value of the element by looking at its value attributes. Just like other input types we've seen in this course, making sense. Great. 17. Common attributes: Welcome back. Students hope you're having fun at some of the toughest time. And thank you for supporting me, thank you for sticking with me. I know it can seem quite daunting. We literally are covering a ton of information, but trust me, it's going to help you in your web development career and you will be dealing with forms a lot that is something can avoid. So stick with me, continue to stick with me and we'll get through it together. Anyway. I just thought I'll take this lecture to discuss some of the common attributes that we'll see on most formed widgets. So most of the elements used to define a form controls have some of the own specific attributes. However, there is a set of attributes common to pretty much all formed elements. We've seen a lot of these already in the course. But for your reference, I just thought, let me have one lecture where I discussed the common attributes that you'll see. So we can see we've got disabled autofocus form, name, and value. Let me discuss each 1 first. Let's look at disabled, an attribute, and that's how it looks, right? We just put it within the input element. And why would we want to put this on Wall? Disabled inputs do not receive the click event, and disabled inputs are not submitted the form to the server. So it basically makes all inputs text areas and fills it with the syndicate of them, non editable and I'm clickable. Another thing I want to actually say here is that what's interesting is that a disabled field can't be modified. Tab to highlighted or habits contents copied, right? And obviously it's value's going to be ignored when the form goes through constraint validation. As you can see on the example on the screen at is a Boolean value. It's either there or it's not, so you don't need to sign it a value. What's interesting is as setting it to null does not remove it. It's still going to be there. And as I mentioned, the element will inherit this setting from its parent. So if you put the disabled attribute on a form, its elements within it will inherit that property. And of course the default value is false. Or another way of saying it is by default that disabled attribute is not there. Cool. So those are the main points about disabled. But do you have a few more? And I thought I'd put that in lab, but just to break things up, did you know setting the value of disabled to null does not remove the control? Yes, you do know that because I mentioned that a few seconds ago. The other interesting thing is we can target elements that are disabled with the disabled pseudo-class. Similarly, we can target elements that are enabled with the enabled pseudo-class, or we can even use the new CSS, not cured, so input not disabled. And we can use the disabled attribute on most form controls such as all input types, text area buttons, select field sets, and Qi Jin. So it's widely in use. That's exactly why I want you to know about it. Alright, so that's disabled. Next, I want to talk about the autofocus attributes. How does that look like? Yeah, I've just applied it to an input of type text. What does it do? At least you specify that the element should automatically have focused when the page loads. What about if you have it on more than one element, which one will get focus? Well, it depends originally in the specification, the last element with the autofocus attribute receive the focus. So far he still does this. But Internet Explorer, Firefox, Chrome, Opera, they all focus on the first occurrence of the attribute. And if you do want to use a fallback or a polyphenol, for example, just in case a browser doesn't support this, make sure to fired on the DOM ready event rather than on window load event because it's going to be jarring to have the page position jump off the user marry be interacting with the page, right? So try not to use on window load. So that's the autofocus. Should you use it? Well, I've got a bomb. Reason for the bomb is I want you to be aware when using the autofocus forces a page scroll and it can get quite annoying. It can also confuse visually impaired people and screen readers. And it can also cause dynamic keyboards to display on some touched devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label. And a sighted user on a small device will equally miss the context created by the preceding content. So to cut a long story short, it's probably good that mobile webkit doesn't support the autofocus attribute as the zooming keyboard opening would be far too much in your face in most circumstances. And even more than this MDM advises against using it altogether. So for those reasons, try and avoid it, please. Next, I want to talk about this form attributes. We've actually already seen the form attribute reviews that a few times in a few examples. And that's an example where you just put on an element. You use the form attribute and remember you have to match it to the actual main form ID you wanted to relate to. And previously, and by previously, I just mean HTML4. They will let speak insisted that all form witches were contained in one form block. But now we know by using the form attribute, we can associate a widget with a form even if it's not within the main form. But remember, the value of that form attribute in the widget must be equal to the form ID. Remember we looked at an example of this ages ago where we had the form split up between the top of the page and the bottom of the page. And we submitted the form and we can see that all the widgets daughter was submitted with that main form. So it can be quite useful. The next one is super, super important and that is this value attribute. Right here with type checkbox, we set its value to sit when specified in HTML. The value attribute specifies the initial value, but it doesn't have to stay like that. Because from then on, it can be altered or retrieved at anytime using JavaScript to access the respective HTML input element, objects, value property. We've seen examples of this numerous times. Is it compulsory? Yes and no. The value attribute is optional, though, should be considered mandatory for checkbox, radio and input of type hidden in those instances, the value is crucial. The next thing I want to mention here is that the value attribute is used differently for different types of elements. And I guess this is intuitive, right? For button receipt and submit for example, it defines the text on the button for the input element with the type of 60 text, password or hidden. It defines the initial or default value of the input field. For a checkbox, radio or image, for example, that defines the value associated with the input. This is also the value that it seemed on Submit, but as I mentioned, it's not always mandatory for the file type. For example, the value attribute is not valid. In fact, it's entirely ignored. So you go, That's very attribute. And last but not least, the name attribute is very, very important, right? And that's how we set it, for example, on an input weights type is set to text and as the name suggests, it specifies the name for the form control. And you can use the name attribute in many ways. You can use it to reference elements in JavaScript or to reference a form daughter of the former submitted to the server. And remember the name is submitted along with its value when the form is submitted. So in most instances you should consider the name attribute as a required one. It's very, very important, and I've got a few. Did you notice the name attribute is unique for radio buttons? What I mean by this is that only one radio button in a same named group of radio buttons can be checked at any given time. So by selecting any radio button in that group, automatically deselect any currently selected radio buttons in the same group. And the name of that one checked radio button is sent along with the name if the form is submitted. So just remember to create a group of radio buttons. We have the same name attribute. So it kinda plays a very unique role when it comes to radio buttons. This second thing I want to mention is that the name of an element becomes a property of the owning form elements. Html form element, elements property. What do you say? Well, that sounds strange. Slide. Now, let me quickly show you what do I mean by what I just said. Unearth other confusing. This is all that. I mean, let's set up a very quick HTML document here. And a body inside the body and its create an input of type text and it's name can be. How about that case? Okay. So there's one. Let's do another one now. Also taste it. Yeah, we can go, Mina. Okay, Let's say we've got these two. Now what I wanna do is I want to use JavaScript. I want to grab our form or you know what? Sorry. There we go. We can give it an ID of main form. Take these two inputs and put them in the form done. The first step is I want to grab the form. So let's define a JavaScript variable using the let keyword. We can call it form. And yeah, we can just document, get element by ID. And we can grab the no main form. Sorry. There we go. We've got the form in JavaScript. And now this is what I mean, right? This is what I mean when I said, when an input element is given a name, that name becomes a property of the owning form elements. Html form element elements, property. That is a proper tongue twister, but this is what I mean. We can say let guest name be assigned the value of R form. On our form, we can access the HTML form elements, elements property. So automatically the dom gives us this element's property. And we defined the name is casted. So we can talk. We can do the same with a member, so late member, but this time I want to do it differently. That's excess off form our element's property. And now I want to return an object. Kay, way, the name is MIMO. And what we can do here is why don't we console log this out. So we can console log. And we can console log, console log. Let's now open our browser into two inputs we just created with inspect the console. And there we go. The first console of course, is the guessed, right, alkyl. And the second one is the Mimbres, wholesome set. And we just did literally two ways to do exactly the same thing. If you really want to see something else as well, why don't we just console log quickly. Let me just go here. Console log the form elements property. Let's see what that does. Let's go here, right, delicious, clear reading up, refreshed the page and you can see you've got an HTML form controls collection. Again, if we open up that, you can see both of our inputs are included within this. That's exactly how this code works. That's why we were able to access our guest name. And so there you go. That's all domains by that very long tongue twister. So there you go, my students, these are common attributes that you'll find on just about every input element, David's. And it's why I listed these five. Because these five of very, very universal gates, they have slight nuances like name, for example, has a very specific meaning for radio buttons as opposed to its use on a checkbox, for example. So these are just very, very good ones for you to know about purpose making saints hope you're staying motivated and I'll see you soon. 18. Email Challenge - intro: All right, this, I'm going to admit is a very, very easy challenge because before we can run, we need to learn how to walk. Before you walk through it all, you need to open the door. So here we are. We're just opening the door to harder challenges. This is going to be a very simple example, like I said, all I want you to do is I want you to visually show the user when this email field is invalid. And when it's valid. You can see here that the email is a required field that the user has to fill in and they fall. The background colors rate, It's showing us that something's wrong. Scott validate. If the user, however types and email address, abc at abc.com. We can see now that it's changed appearance. It's telling us that this is good. We're good to go. Very simple challenge. All I want you to do is I want you to have an input type of email. And I want you to include CSS, specifically targeting the valid and invalid pseudo-classes. So what are you waiting for? Grab a coffee, give it a go, and I'll see you in the solution video. Good luck. 19. Email Challenge - solution: Dear students, welcome back to this awesome, awesome section. And we're going to be doing some challenges in this section, some really fun challenges, but they shouldn't take us very long. Nevertheless, I hope you've got some coffee. Keep MPT, and let's begin, Let's begin with this very first example of creating an email field. And all we wanna do is we want to visually show the user when it's invalid and when it's valid. And to do that, as you know, all we have to do is target neat CSS, pseudo classes, valid and invalid. And of course we want to make this a required field is very simple. Let's get into Visual Studio code here, but the browser, let's have coffee. Let's go. So good. And yeah, let's begin his create a very, very simple HTML document. Because India, we are going to have a head section. And in the head section we're going to have a style tag because that's what we're going to put all our CSS. But for now, let's ignore that it's greater body in the body is create a form. In this form, I want to be very simple, right? All we want is a label. And you can say for email, and of course the content within the tags. We can say email required. We save that. And there we go. Very, very simple. Nothing you haven't seen before. And of course we want to create our actual input type of email name attribute. We can leave blank and ID has to match the labels for attributes. Remember, which we say this email. So then we got pretty straightforward. Firstly, I want us to be defined as a required field. How do we do that? Let's write with the required attribute. It is really, really that simple. The next thing I wanna do is now affect the styling, because right now it is hideous and infect the user doesn't know whether it's valid or invalid. So let's start styling it up. There still is just add some padding everywhere. And padding in. Yeah, it's better. Let's add some padding as well in the actual input itself. Editing, when we don't go overboard, she said a bit of padding. All these little nuances, this little tweaks that really do make the form. The first thing I wanna do is I want to style the invalid pseudo-class. All we need to do is talk about input and we could even be more explicit with CSS selectors like saying it's type has to be email. And then we want to target, of course, the invalid pseudo-class. And all we want to change here is a background color. Let's just go light, cetera. Then we got very, very simple, right? But just FYI, because this is the only input we have on our form. We don't even need to be this explicit by sitting it's top e-mail. We can just target all the inputs on our Home tab and valid and nothing changes. How awesome mission comprehensive. A very cool because now if the user types abc, abc.com, we can see that the invalid pseudo-class does not apply. It switched off, and that's why the red background disappears. That's very simple. Oh, the other thing I wanted to show you, if we don't have the required attributes, what do you think will happen to the invalid pseudo-class? Let's get into it, save it, and it's gone. Now it's not required. So it's not invalid. Interesting. Finally, just to finish us off, we're going to target now the valid pseudo-class. And of course, we just want a background color to be like a light green using all types abc, abc.com. You go, My dear students, that's how easy this first example was. I'm just getting you used to targeting these pseudo classes because we work with forms, targeting these classes becomes crucial and it really does create a nice user experience. But anyway, if you want, if you're ready, I'll see you in the next challenge. 20. Toggle Challenge - intro: It's getting cold, it's getting cold where I am. And a lot of winter person, I love the summer. Anyway, this challenge, I'm going to warn you up front, it's an challenge. You it's going to be a little bit difficult, but the skills you learn are going to be tremendously helpful. Then you start building your own custom forms. All I wanna do is I want to create this toggle button on and off. How do you do that? Firstly, I want to just share a few things with you. This, you'll notice firstly that we've got an inner toggle switch, that little round circle, and that moves on its own. I wanted shifted to the right when it's off, shifts back to the original position, the background color, of course changes to green. The other thing that happens is the word changes to honor. And of course when it's off, the disappears and we see the word off. So how can you build this? Will, I'll give you a few hints on how I did it. But my way is not the only right way. And that's why I encourage you to give it a go by yourself, but it can be a little bit tricky. So here are a few pins. Firstly, I sit the input here with its type attributed seeks to check off. So we actually dealing with a checkbox. Secondly, what we have to do then is we have to remove the default styling of that checkbox because the browsers checkboxes, pretty ugly. Thing what I did was I created labeled, and within the label, I have to span takes one with the word on N1 with the word or, and apply unique clauses to both of those, which are told that later with CSS and CS is targeting is very simple. When the checkbox is checked, I want to target the claws of on and I want to show that. And when it's unchecked, I want to talk at the clause. Would that span of on, and I want to hide it. I want to set its opacity to 0. So that's how I'm toggling on and off word itself, Clyde. But how do you create that custom toggles? Well, very simply, once you've hidden the browser's default total of checkbox styling, you can literally just create your own styling. And I use a border to get that nice rectangular border, the border radius just to make it curved. And then how do I do that little black dot in the middle? Will I target CSS pseudo elements? Specifically, I told it the pseudo element. And with a net gain at define or create this little round circle. And yes, I'm using a bit of CSS here using the transition properties. Obviously when a user toggles that, that little round in a toggle switches, slides to the right. It doesn't just instantly appear on a, I don't want to lose you. But this is a little bit difficult. Give it a go, even if he can only get to the step we remove the browser's default styling, that's good enough. You don't have to know all the CSS we are going to be using the fixed model. But yeah, the most important thing is just try make a slotted at at least enjoy what you do. Put a big smile on your face, have fun, and I'll see you in the solutions video, audios. 21. Toggle Challenge - building the actual toggle: Did you give it a go? I hope so. But if you didn't or you weren't quite sure way to go, don't worry, I'm going to go through everything with you right now. It is quite a difficult one is a lot of kind of CSS you need to know. And if you're not experienced with CSS, it might be a bit tricky. But anyway, have some of your coffee. This is still the same one. I'm going to stick with that through all of these challenges. It's good, It's good. Let's begin. As always, I want to start with an HTML document. We're going to create a hidden style section because yes, we're going to need to plug in a lot of CSS. We could put it in an external CSS file, just one checkbox. So I don't want to do that. Then we can create a body section within the body, of course, a form. And within the form we want a checkbox. And I just want to stop here and I want to remind you that when it comes to developing something or designing something on many, many different ways to do something. So here what I wanna do is I want to wrap everything within a UL element. And specifically in a list item. I just drew this because when it comes to styling and my CSS, I can just target these elements very easily to make it look nice. But really it's not the only way to do this. And what do we want next? You guessed it. We want an input, but this time of type checkbox, we can just give it a name of power and an ID of power. We save this, refresh the browser. Save this refresh your browser. There we go. And yes, we've got that bullet point because this is an ally element. Don't worry, we're going to deal with styling shortly. And of course we've got the default checkbox at the browser provides us. Again, we're going to be changing this completely tax, so that's our input. And let's just make this editor but bigger, more clear. Remember in the intro to this challenge, we saw the word on an off, right when the power toggle button goes on and off. So how can we create that wall? Very simple. Why don't we put it in a label attribute or the label has to match the ID of the input, which we call the power. And now I actually want to wrap up. Why don't we read that word on an off in a span. Okay. So we've got a span and this one can be on. And let's create another span. Span. And this one can be off. If we save this and we got our browser. Look, there we go. We've got the on and off. And obviously we want to target only the Unwin, it's on and often it's off. In order to do that, we, let's put a class on each span. Let's go back to our editor here. And this span can have a class on in this next span class of right now this does nothing. Let me show you. There we go. It's done nothing. But in terms of our code, it's doing a lot, isn't it? Because now we can target these with CSS. Now how are we going to do? The CSAs will, let me start off by saying that we are going to be using Flexbox. Don't worry if you haven't done Flexbox before this course. You know it's not about CSS and detailed sees is I'm just showing you how you can go about doing it. But very, very basically, you can view Flexbox as an entire module and not a single property. And what I mean by that is that you've got a whole lot of properties you have to deal with when dealing with Flexbox. For example, some poppies you need to sit on the parent aka the flex container and other properties you need to sit on the children within that container, aka the flex items. But anyway, I'm gonna be showing you exactly how this works as I go on. But in order not to distract you, let me remove myself and let's concentrate on the CSS. Okay, so let's get into it. We've got our style section up here. Let's put our browser side-by-side. You can see what's going on as we style. It's always very helpful, especially when you just start out. I guess the first thing we wanna do is we want to deal with our list item element. Don't we? First thing I wanna do is let's just effect with a 100 pixels. And now remember I said I want to use Flexbox. Let's sit up flexbox. Okay. In order to debt, we set it to display property, to flicks. Doing that removes that bullet point, which is really, really cool. I want to just align items to the center. Let's justify content. Always a good thing. And you can see the how the browser has added space. So this justify content property at defines how the browser distributes space between and around content items along the main axis of a flex container. And when we sit this property to space around, it just evenly distributes each line with equal space between them. Okay, so that's all it does. Anyway, I don't want to hop on too much about that. An imposition. I want to set this to relative. What do I wanna do next? Let's work with that label. And let's size the label. And let's make the on and off pots sit on top of one another using positioning. Remember we put the on and off in that span. Let me just call it on. Yeah. And that's Ben. Well, I want us to use absolute positioning so they're not next to each other, they literally in the same place. So I'll show you how we can do that. Not 50, let's target, I'll label. Okay, Let's give it a width of say, 20 pixels, a height of 20 pixels, and a line-height of you guessed it 20 pixels. I'm just trying to make sure everything is uniform and incent, and that's all I'm trying to do. And you'll see how it all works and fits. And shortly. Then, as I mentioned, I want to talk at our label. And then a descendant of this label is a span. And that's the span I want to state its position property to. Absolutely. That's what I was meaning when I wanted them on top of each other. So now you can see that on and off or literally on top of each other, which is great because we only going to be showing one at a time. Who, okay, What is next? Well, the next step Medea students is to custom make our toggle. And in order to do that, remember what we have to do first, we have to remove the default styling of the checkbox that's given to us by the browser. So that ugly little squarely we want to remove entirely. And then what I wanna do is I want to target the before and after pseudo elements to create our custom toggle, right, so it's not that difficult. Let's give it a go. This just to a commentary. It's always good to comment your code by the way. So what I wanna do is I want to remove the default styling of the checkbox using the appearance property and create the altar toggle area. That's what we're going to do now, right? But how are we going to do this? Well, in order to start, we need to remove the default styling of the input of type of checkbox. So let's target the input where its type is set to checkbox. We being very explicit here and we want its appearance, appearance to be none. There we go. We've removed it. Okay, so there we go. We've removed the default styling. Very, very simple. But what I wanna do now is I want to create our own custom design of the outer toggle. I'm not talking about the inner Lauren circle. I'm talking about the container for I'll toggle. So let's create that now. And what's really cool is it's so, so easy and this is how much power we, as developers, it's really, really awesome. Let's just create a border, two pixels, solid black. How does that look? There you go. Just basically a black dot. And I don't want it to be square. And in order to change its kinda screeners to more round, we change the border-radius property, and that comes down to personal preference. I'll just set it at 12 pixels. How's that sits around circle. But of course we are designing the container rights, so that's way too small. So let's set its width to 44 pixels. And let's define its height. Let's make that 24 pixels. How cool is that? You can see it's coming along. Wow, It's so nice when, when things happen in an orderly fashion. Let's now change the background color. Okay, we can just change it to jubilee. How's it? Yeah, it's like a nice light gray. I think that's cool. And then we don't want things to just happen instantly. We want things to transition. That just looks cool when you actually see things move. So all the Cs is properties related to this. And that's why I'm using the word all. I want any change to transition in 0.4 seconds. Right now of course it doesn't do anything because when we click on this total, nothing happens. Predict is going to change shortly. Medea students. 22. Toggle Challenge - final solution: Are you following me? Are you following? Please don't get lost in the detail. Let me just expand this quickly. Let me just give you a summary of what we've done, okay? Well firstly, let me scroll to the bottom. Yeah, Alice, our HTML is very simple, right? We've just got an input and a label. Within the label we've got are on an off words and we're going to change the styling of the shortly. Right now we can see both on the screen. So we've got an input of type checkbox. And then at the top of our file, we are slowly starting to style this checkbox because we don't like the default styling provided by the browser. The first thing we did was we defined kinda this flicks layout just helps me seem to things add spacing just makes it look nice effect if he didn't have to even do this. The next line, the more important things that we did is we removed the default styling of the browsers checkbox, and then we've started to create our own styling. So what is the next step? You've got it. The next step is to create that little round circle within the toggle, right, because we want that circle to start at the left. And then when we toggle it on, we wanted to transition nicely to the right. And of course we want the background color to change. So that's what we wanna do. How can we do that? Well, why don't we target the perform pseudo elements and use that to put in this little round toggle button. Let me show you what I mean. So firstly, again, Let's have a commenter style the before content to look like the inner toggle switch. Right? And that's the bit that moves. That's what I mean by the inner toggle switch. All right, let's do side-by-side so you can see what's going on as we go. Firstly, we want to target the input weights type attribute is set to checkbox. We're being very explicit here. And then we want to target this P4 pseudo element, its contents property we can sit to nothing. What should we do? Background color is black, a width of 16 pixels, a height of 16 pixels. That border radius, because we want to drowned. Remember, border-radius of say, 16 pixels. Position can be absolute. I often do absolute. Should maybe done this earlier than you could have seen what I was doing often lack absolute because then we have a lot of control over where our design is taking place. And you can see now it's positioned absolute, so it's a top left of the container element or of the input type checkbox element. And then of course, what's nice with absolute as we can be very explicit, we can move a DOM and we can move it to the right. Maxine's ego, How does that look? I think that looks awesome. And then remember what we said. I want things to transition, okay? I want all CSS properties to transition 0.4 seconds. And of course now even when we toggle this in chicken, nothing happens because we haven't defined any CSS. So let's do that quickly. But you can see how quickly this happens, right? So, so fun. Hope you enjoying it. So now what we wanna do is we want to change the background color and move the inner toggle switch when the checkbox is checked. And we want to use transitions for animation. So that's a hint. So can you figure out how to do it? Firstly, what pseudo class should we target? What should we target? That's right, That checked pseudo-class. So let's target the input with the type attribute is set to checkbox. And we want to now affect the styling when it's checked. So we targeting the checked pseudo-class. What's the first thing we want to do? You've got it. We want to affect the background color, right? And we want this to be a nice, cool, green color, lime, lime or look nice. Let's see. It's a bit too green air. Maybe we do it. But it's lighter as it will run with that. We'll run with it. Let's again. But you'll notice now that of course, it's happening instantly ran. Remember I gave you another hint. I said, let's use the transition property so we can smoother animation. So let's do that transition. And I went to churches and all CSS properties to 0.4 seconds. Now when we toggle on and off, can you see how black? It's so cool, right? And a fades and yeah, and I love this stuff. More coffee. Get the brain juices, cranking. We're not quite done because when we toggle, this color changes, but the inner toggle switch doesn't move. So how can we make that move near the ACLU? Well, firstly, how did we define the in a toggle switch? It's right, we used to before pseudo elements. And remember how we've positioned it. Absolutely. And we shifted at slightly right by this lift property. And what's really cool is if we change the lift property to say 34 percent, we can see the toggle is in the right position, all the way pushed to the right. So somehow we need to change this lift property and define its value to be 34 percent. How do we do that? We'll vary the simple, right? All we need to do is we need to target our input element. We, it's type attribute is set to checkbox. And we only want this to apply right? Shift to the right. When we're almost, almost dropped my coffee. Who would've been horrible. We only want that in a toggle switch to shift to the right one when we are in the checked state. So we want to target the cheek to state, and we only want to affect the performance pseudo elements. So here you can see we kind of combining CSS, pseudo classes and elements. That really is neat. And we want to change the lift property on OCF 34 percent. Why don't we just did 35. It doesn't really matter. Now if I toggle this, look, what happens. How awesome is that? How awesome? Come on, my dear students, you've gotta love this. There's only one more thing to do now. And that is displayed on and off depending on whether we in the check state or unchecked states. How can we do that? Steve? Easy, Michelle, you all we have to do. Well, you know what? Let me have another comment. Okay. It's due another comment here. Let's call it calls the on and off parts of the label to be visible when the check box is checked. And I'm chained, respectively. We are going to use yes, your hint he Azure tip. We're going to use the general sibling CSS selector, which looks like that, to select all siblings of a specified element. Yes, that's your tip. If you want to give it a go before I show you the solution. Well, it's very simple. The first thing we wanna do, right? When the user logs on, as we know, it's in an off-state. So we want to target the span of class on and we want to set its opacity to 0. So input. And we don't need to specify the type because it is the only input. But obviously you're going to be dealing with more complex forms in the real world. So that's why I'm specifying this type. Could we could easily just have input, okay, but let's do more specific targeting with type set to checkbox. So now we've targeted the inputs and I want to target a sibling. And the sibling I want to target is the label. And within the label, we've got a descendant being net span element, where it's class is set to on. And that my dear students is what I want to target. Now there's something else we have to do, but let me first show you this. I want to sit, It's a PCT to 0. If we save this and look at the browser, how cold does that look? Okay, and it looks like we sit, but you'll see that there's something else we have to do as well. Because when the user toggles us and clicks the button, nothing happens. Right. And in fact, when this is checked, do you agree with me that we don't want to see the off so when it's checked, we don't want to see the word or. So. We also want to set its opacity to 0. So there are two scenarios we're targeting here. The first scenario is we it's not checked. We want to hide the on and when it is checked we want to hide off. So let's do that quickly so we can separate out different stylings by a command. And now what we wanna do, again, we want to target the input weights type of safety checkbox. But remember, when it comes to that offered, we want to target the state when it's checked. And then we can apply the same logic. We want to find the sibling of label, but this time with the span of class off, and we want to set the opacity to Sarah. So when we go to the browser, we told us that disappears. How awesome is that Medea students, pandas is cool. And then finally, we want to apply the same logic to show the, right. How do we do that? Well, let's target the input weights, typos, city to checkbox. You can see how intuitive this is, by the way, as you get more and more comfortable with coding, these things are very quick to implement. We want to target now the checked state. And of course, when it's checked, we want to target the label. But this time we targeting the span of class on. And here we went a PE city of drumroll. And the user toggles on and off. That works as expected. Come on, my dear students. Wow, isn't this so, so awesome. I mean, let's just expand this browser. How footers us. You've literally created your own custom toggle button and don't take this information for granted. What you're learning here, these little pieces of information you can literally apply to your own forms. You don't have to use the ugly default styling with the browser gives you. And in fact you shouldn't. And as you become more comfortable with coding, really it only takes you another 10 minutes of your time to create really intuitive and easy to use buttons on your fourth, hope you having a lot of fun, but we're not done with this challenge section. There's still a few more changes. I want to challenge you to see you in the next one. 23. Color Picker Challenge - intro: All right, I am super amped about this challenge. It is a little bit tricky that as you'll see as we go through it, it's not that difficult. So it's tricky, but not that difficult. What's cool about this example, again, is that, yes, this is a course of our forms. And because it's a course about forms, we learning about all these different kinds of, one of the widgets we already learned about is input with a type attribute to the Sit to color. But what's super cool is that once you understand how these widgets work, you don't have to use them with forms. Here is an example where we are using the color widget to allow the user to dynamically change the color of the page. In other words, a user can basically define the exact color theme that he or she desires. How awesome. And we're using color widgets. In fact, we're using two. You can see in this example, we've got our main page and we've got two colors, widgets, we've got a background widget. And you guessed it if the user clicks on it and drag the color and they can choose whatever color they want. How awesome. It said a user one's a nice blue color, that's the background. And then we've also got another color widget which are fixed the text color. We can click on that. Say the user one's bright red or maybe, maybe a bit of a green, green color. Here we go. That looks pretty cool. So it's a very cool example. The first part of the solution video, I'm going to write up the entire HTML and CSS with you in. I want you to pause and think about how we can write the JavaScript because we do need to listen for an event here. We need to listen for the input event on those widgets. When that happens, we need to take that value and we need to put that into the styling of the page. Don't worry if you don't know too much about JavaScript, I'll show you how it's done. What I'm really trying to show you in this challenge is that a lot of the information you learned about the widgets you can apply to any pot on your websites. It's so, so cool. So anyway, don't take what you learned for granted. And in the next lecture, Let's start building this solution together. I can't wait. 24. Color Picker Challenge - building the HTML: I told you I'm going to be sticking with this cup of coffee through these challenges. So, so fun. Anyway, it's a really fun challenge because as I mentioned in the intro to this challenge, what's really cool is skills you learned about forms you can apply even outside of the vehicle. But now, because we're gonna be dealing a lot with CSS, I do want an external CSS file in this example again. So firstly, let's just set up the HTML. You can see I've got an index empty in the Cloud, entered into styles.css, set up the basic structure, and then we'll start coding CSS to get a fun. As always, let's start off with our HTML. Let's have a head. Within the head. We can just do a title saying, hello, about bigger. Here we go. And then of course, as I mentioned, I don't want to write all our CSS inline is just gonna be a bit messy. Our CSS file called styles dot CSS. Here we go. What is the first thing I want to do? Well, the first thing I want to do is remember in our introduction, we had candidate banner at the top that had our background picker and our actual font color picker. So let's wrap that in a div with a class of wrapper, the resample. And let's now set up our background picker. And again, what I wanna do is I want to wrap this in another div with class began. And it's very useful to wrap things in containers because then when you apply CSS, that becomes so-so ED. And you'll see how in a second, within this div, I want us to have a label, okay, Very, very simple. And all I want to say is I want this to be clear that we dealing now with the background. And how do we create the actual picker? That's arrived, my dear students, it's input weights type is set to color. We don't need a name or 90. But what I do want to have is I want to have a clause, okay? Because we're going to be styling this UCCS and let's just call it input color picker. What else? I want to also have the Stata ID, okay? And you're gonna see how uses later. If you don't know, this word, daughter is just a data attribute in CSS and it's used to style elements using attribute selectors. What, what is the starter ideally, me just scroll up here. I think that's above my head while I'm pulling this data ID attribute inside our HTML. Well, you're going to see how we do this a bit later, but we are going to be using JavaScript. And in the CSS file, I went to sit some root variables, hello variables, and we're going to have to color pickers. Remember, we're going to have one for the background color, which here I'm calling bg color. And I have to use the same kind of setup, the same word in my CSS file, which I'm going to show you shortly. So we've got BG for background color. The second widget we're going to have as for the text color. So I'm going to have text color is the other daughter ID attribute. And later on what we're going to have to do with CSS is whenever the user, Let's say the user clicks on the background color widget. We're going to have to see what that color is in the widget. Tell JavaScript to change the color to whatever the user has selected. And that in turn will change the actual background color itself. So what I'm going to be doing as we sitting up two digits, right? One for the background and one for the text color. Here we're dealing with the background, which is why I've set the daughter attribute NCSS to BG color. And what I'm going to be doing later with JavaScript is I'm going to target the CSS group variable that I have defined, which I'll call BG color. And I'm going to then replace its value with whatever the user spectrum. You'll see how we use it Shorty. I'm going to be doing something very similar for the ticks. Color honored can seem quite daunting, but don't worry, we're gonna go through it together shortly. Let's get back into it. So there we go. Background picker. I want to do something very similar now, but now I want to do our color picker. Let me actually be more explicit. Text color picker, the one above here as our background color picker. Always good to label your code. Again, I'm going to wrap it in a div with the same clause of picker. And then we're going to have a label. This time. The labels going to be color, meaning text color. Then we're going to have an input, you guessed it of type color. We don't need a name, and we don't need an ID. What I do want to do though, is I want to give it a class of inputs. Color, pick up the same class as our background color picker. I want them styled the same. But remember what I just said. We're going to have this daughter attribute in CSS and it doesn't have to be ID, I'm just calling it ID. But when you see the word here with a dash, we are creating a CSS attribute and we can just target this later. It's pretty neat. And I don't want to call it BG color. Here. We're going to call it takes color, right? Pretty straightforward. Shoe, see what this looks like in the browser. There we go. We've got a background and color picker. We can already see it's starting to take shape. So that's kinda the Benner, we've dealt with the banner. Now what I wanna do is I want to deal with our content. Again, what I wanna do is I want to wrap everything within a div, this time with class of main. And then we have a few sections within this. We can create another wrapper, this time with claws of contents, because that's where content's gonna go. Let's wrap this in a element called main. Why nots? Just so you know, my dear students, this main elements, basically the pixel or demarcates the main dominant content on your page. It's just semantically providing meaning to whatever it is we're doing. So here I want an H1 tag. This is your main page. Then let's have a paragraph and we can say this is a great example of using. And here I want a code element. Okay? Now what I wanna do within this code elements, I want to type the input of type color, right? But I cannot use the less than and greater than signs directly lactose because HTML will interpret this as meaning it's an element. In other words, they are reserved characters, so we need to use a character reference entity, which we've learned about in this course ages ago. And the character reference entity for less than is LT, believe it or not. So there we go, least n. And then I want to type the words input of type color. Pretty straightforward. And in a can-do greater than. So we're using the N symbol and then GT for greater than. And this should work if we have a look at our browser. There we go. Let's put the proper syntax and how cools it. All right, let's continue with this. This is a great example of using input of type color outside of a form. And then I'll just emphasize. Cool, right? And then let's just have another paragraph element here. And in here we can just type, although this course is all about forms and hints. And hence, we're learning about form widgets. The skills you learn will give you the ability to use these widgets in many different locations is our paragraph. What else can we do? We can sit a footer and we can say a cool tiny project by me. Clyde. If we go to the browser, we can see it's starting to take shape, right? How cool is this? Then next step Medea students, is to style this nicely with CSS. And you'll see now surprisingly, the CSE is, is very simple, but kind of thought aspect of this comes when we write JavaScript. So first, let's jump over to our styles.css page. And it stopped now typing up the CSS together. Then we'll get on to the harder aspect of JavaScript is expand this and let's scroll to the top. What did we call it? We call it styles.css. So let's open this up and let's start styling CSS. What I'll do is I'll have the browser display it to the right so you can see the fixed as we go on. As I mentioned earlier, I wanted to find some root CSS variables, right? And again, there are many ways to do things when it comes to programming. This is just how I'm doing it. The first thing I wanna do is define our primary color. This BG color is very specific. It has to match what we sit on this daughter ID attribute, BG color. They have to be the same. Okay, you'll see shortly why, because I'm going to be using JavaScript. And let's just pick a very easy color, just like a gray. And then I want to do the same thing, but we're going to be doing our primary text color. And here we can just do 123456 thousand white and gray. Pretty straightforward. Okay, let's pick the styling of our body quickly. Font-size 20 pixels, padding. Always like removing padding on the body because then we can be more explicit. Margin 0, there we go. And the background of the entire body can be drumroll. You listed our primary BG color. And if we save this, there we go. It's kind of this gray looking color. The next thing I want to style is the wrapper. If we go to the index page, I want to style this wrapper. Kind of call it the banner. Very, very easy to style. All you need to do is target the class of wrapper. We can define its width as being a 100 percent. We can change its background color. So I don't want it to be the same dark gray to 24 to 22 to four. Here we go. It's like a light gray. It's looking nice. Let's give it some padding. There we go. And you can see now on the Bene the background picker and the color picker or below each other. The reason it's below each other is because they are displayed by Locke. Will they displayed as block by default? Let's just quickly change that and remember, we gave them the same class name. What was the day she that's good. Our index file should have a look here. We gave it a class of pika. We've wrapped him in a div with a class of Picker. So actually makes it very simple for us because all we have to do is target the picker clause. And we can seek its display property not to block, which is by default, but to inline. And now it's really cool. Now they're displaying next to each other. And what about the main contains obviously with the dark gray background, it doesn't look nice having a black. So we can target our main clause, which is the main content rot. And we can change. It takes color to, you guessed it, I'll variable, but this time I'll text color variable. There we go. Now Medea students, when the user clicks on this cooler color picker, for example, and they start picking rid. I want the text color to change to read, but I wanted to transition nicely. So let's add a transition property to this. And we can apply this transition to all CSS such changed on this element. I don't know, 0.16 seconds. And how about ease in and ease out to be reasonable? Obviously nothing happens now, wrath, because we haven't done any JavaScript. But you'll see how it's a nasty letter. Let's just give this some padding. Yeah, I think that looks nice. What else can we do? We can target the content plus, and here we can give a width of 50 percent and I think that'll look better. And then we can say int drift, margin 0 auto. How does it look? We expand the browser. I think this looks pretty neat. I really did. Who, who, so we're getting there, we're coming along very, very nicely. I'm super excited. We've seen everything up now, but we've got the hard. But Annette is writing JavaScript. Don't worry though. It is intuitive once you understand it that I'm going to pause the video here. Actually, I'm going to stop this lecture and I want you to just think about, Don't think about how to write the code, because, you know, you might not understand how to write JavaScript. But think about the steps that we need to create. We need to somehow get the CSS variables defined. Let me go to the file. Right? We need to somehow target the primary BG color. And we need to make that dynamic. So when they use it, toggles that widget opens at background widget, color widget and changes the color. We need to somehow change this, need to do it dynamically. So in the next lecture, you need wrapped up the JavaScript for you and show you. I'm super, super excited. 25. Color Picker Challenge - adding JavaScript: Okay, so here we are. We picking up from the previous lecture. It's going to be a little bit complicated, but not so much. And I'll walk you through exactly what I'm doing right now we've got our content, but if I want to change the background color, for example, to read, nothing happens. So how can we go about doing it? Well, the first thing is in our code, we need to add JavaScript. So we do that by wrapping everything within this script tag. The images remove myself so I don't hide any code from you audios. The very first thing I want to do is I want to grab all of our color pickers. How do we do that? Well, if we scroll up in our CSS, we can see we've given all of our inputs with type color, a class of input Color Picker. Can you see it? So it's very easy and if you've done my DOM courses, you'll know exactly what I'm doing here. But I want to define a variable called dynamic inputs, or dynamic color pixels, whatever you wanna call it. And in order to put it into this variable, I'm going to be using the document query selector all method. And we want to select all of what, all inputs, right? Way It's clause is input color, picker. And I'll prove this to you if we console log this out to the screen, I just want to go slowly so you understand what it is we doing? It's got our browser. Let's inspect this console, console. And there we go. We've got a node list. And if we open that up, They are our two inputs of type color. It's all we've done so far. Code and let's continue. We don't need this. And now this is where it gets interesting because what do we want to do? Well, on each color picker, remember we have a node list. If I go to the browser here, we've got the snow, just got that no list. It's a collection. So what we wanna do is on every single item in that list or in their collection, we want to attach an event listener. Again, I went into a lot of detail on this in my DOM courses. But just think about events as a browser, firing or for veins when certain things happen. And when we're dealing with input of type color, we've got a few events. The one we can use here is the input events. Every time that user changes at color widget, an input event gets fired within one to listen for that input event, we want to grab that color that the user's chosen. And we want to replace it in our HTML effectively. We want to change the CSS properties. Let me show you how to do that. Let's go back to our code. And this is the crux of it. We want to grab our variable. Remember it's at node list. And we want to use the for each method on this, you're not sure what the for each method is. Please check out my JavaScript grandmaster course. But basically it allows us to loop through that entire list not performed method the for each method. And I'm just going to be using the arrow syntax here. Each loop gives us access to each item in the loop, and I've just called that item, item for lack of a better word. And like I mentioned, we want to add an event listener. We want to listen for that input, right? So we're going to grab the item, in our case, the color widget. And we're going to add an event listener. The event we want to listen to is the input events. And then we want to now deal with the callback. What happens when that event of input is fired? The first thing you need to realize is that every time an event is fired, we get access to object that fire DVT. And that's just common practice for developers to put it into a variable called e. We could call this the event object, could be anything we want, but let's just call it E to stick with convention. And there's a few things we want to happen. Firstly, we want to know whether the user clicked on the skull in HTML here, we want to know whether the user clicked on the background color picker or the text color picker. How can we do that? We exactly my dear students, we can target that data ID attribute. This is why our header here. This is why I had become so important. So if we scroll down, what we can do is we can define a variable called property name. And I just want to show you something quickly before I give you the final solution. I just want to access the object that fired the wings, right, with that e variable on there, there's a target property. And that basically gives us the HTML element that triggered the event, which in our case is the input of type color. But on this, we want to access another method straight out of the box called get attribute. Attribute. And the attribute we want to get the data ID. And if I just console log this out, you'll see why we have this in our HTML. So, so important. All right, Let's go to the browser. It's clear everything, and let's change this color to read. How awesome is this? We know now that we are changing the text color property. Of course, if we go to the background and we change that, we know we are targeting the BG color. And this is exactly why my dear students. This is exactly exactly why I put these data attributes on each color picker. Because now we know what CSS property to effect but is a slight nuance. If we inspect this page, Let's just zoom out a little bit here. Can you see at the far right of the screen? Let me just scroll down here. And you see we've got these root CSS properties. And this is the syntax, primary BG color and primary text color. We need to affect those properties. So the first thing I wanna do is I want to grab our page and vein, I want to change the property of the primary BG color, all the primary ticks color to whatever the user's chosen. And a lot of words. Let me show you exactly what I mean. So the first thing I wanna do is get our roots. And by root I just mean the actual all of our entire page. So we can just document query select, but we don't need all. This is only one root, and I want to grab our roots. Now, the CSS prop name is not in the correct format. We need this to be in the format, remember lactose primary and in bg color, That's the format we are required to be in. But currently it's not. So let's just add some template literals here. Or we can do is let me just cut this out and we need it to be in this format primary. And then with the dollar sign and curly brackets, we can then put in our variable, really, really as easy as that. Now, that should be in the correct format. If we console log the salt console log prop name. Let's see what we get. Clear the console. Let's change the color. There we go. So that variable name, primary text color. If we get our elements that will match the CSS properties on our main route page. Can you see it? Primary text color? Primary text color. It's all I've done. Now finally, to finish this off, all we need to do, so we need to grab down Route document. We need to affect its style. And on this object we have a property called seed property. And which property do we want to say it fall? We want to affect the CSS prop name, right? If I go to the browser and we go to the elements, we want to set the property of the CSS. Primary text color name, or primary BG colony m. That's what we're doing here. And what value do we want to set it to? All? What's very cool is that we've got this object right, that's given to us. On that we've got the target property, which is the item that actually triggered the input event. And we've got a value property and that gives us the user selected. You can delete this console just providing more noise. And Medea students, I think this should work or the browser. And we start changing the color. Look at that. And you can see our transition property makes it really nice to transition. Let me just zoom out here so you can see nicely when we change the color, can you see that we are literally affecting on our route document that CSS property called primary text color, right? You can see it in real time. How awesome is this? And of course we can do exactly the same with the background. Let's say we want a dark blue and changing the primary background color on our roots document itself. Well done for sticking with me. I hope you have stuck with me through this. If anything is unclear, please ask on Q. Q. And a. You know, he had help you, but we're still not quite done. I want to do a few more challenges with you, which I'm super, super excited about. Siena. 26. Custom Range Picker Challenge - intro: Welcome back to yet another challenge. And I know this, you know, this course is full of challenges. I mean, we've done already a few challenges in previous sections. So it's not all in one place because sometimes it's more relevant to your challenge in other areas. But this is a fun little section. And I'm really, really having a lot of fun. I hope you are too. This is going to be a little bit tricky again when it comes to CSS. But this course isn't about CSS, is about teaching you the skills you need to old home widgets. And once you mostly see as 0s, you to manipulate these widgets will become second nature. So yeah, we are we dealing with the input of top range and we've custom design this. You can see it's a different palate. When a user focuses on this widget, do you notice the colors changed slightly darker? And when the user moves this range, we've got this output element with numbers and it follows the actual range button. How awesome, Pretty cool rock. So yes, Give it a go, give it a try. Just remember a few hints. What I did was obviously rapidly within a div so we can style things nicely. That's why I put this entire range in the center of the viewport. And remember when we're dealing with the range, we don't see the value of what a medically browser only shows us that value when the user submits the form. So it's pretty, pretty useless. Which is why I then created an output elements. And within that output elements, dynamically edit a span element to put that number. Right now it's showing us 318, put that number in, expand dynamically with JavaScript. And then I basically, can you see that little triangle on the three teen style that with CSS and are targeted for pseudo element in order to create and its mother Hinton. And obviously we need to think about how it can follow the actual budget itself. That was a bit tricky, It's a bit messy, but don't worry, I'll explain to you exactly how that give it a go CFO, I can go alone and then follow me along in the solution videos soon up. 27. Custom Range Picker Challenge - building the HTML: Whereas Medea students, I'm going to be going a little bit faster because I think you're getting used to this by now. Okay, here we've got a blank index file open, stopped at HTML. Yeah, we need a head section in here. Let's have a title. Custom range design is going to be really fun. Challenge counterweight, counterweight. And then let's link to our CSS file just because it's going to be quite large and I want to call it styles.css. It's what we need. And then let's define a body within our body. You know what? I won't even add a form here because it doesn't melt away. You put this on your app, could be anyway. But as you know, I always love wrapping things in a rep, when it comes to CAC, so much easier. So let's define a div and we can give it a class of wrapper. In here. I want to define our range in Pitot. First thing I'm gonna do, how do we do that? Let's write very, very easy. We define the input HTML element with its type attribute. To arrange the way simple we can, we actually don't need a name here. We are not submitting anything to a server. And let's give it an ID of range because that's what it is. If we save that, refresh the browser. You can see this is the standard default styling. The browser gives it pretty straightforward, but I want to give it a minimum value of maximum value of a 1000. And let's give it a default starting value of 500, right? So it starts in the center. Makes scenes. The next thing we're going to have to do is we're going to have to create an output element. Because remember, by default, the value of the range is not shown to the user until he or she submits the form and we don't want that. We want to show it dynamically. And as the introduction challenge video showed, we want to show that value in a cool little style widgets. You want to call it that. It's code up this entire kind of output. In the HTML output element. It can be empty for now. All right, It's going to be dynamic. Let's give it a class so we can style it in the class. Name can be anything. It's just call it a range value because we're going to be showing the value of the range attribute. Sorry, we are going to be showing the value of the range widget in this output element. And let's give it an ID. We can give it an ID of just in case we need it later. I'm not sure what we'll be doing in CSAC. It will just wing it as we go along. And I think Medea students, this is it for the HTML, right? Very straightforward. See, I told you there's not much to it, but we're not done because I want us to now start styling this up with some CSS. So let's go to our CSS file. Again, it's empty. So let's get cracking. First thing I like doing is alike, removing the default margins that the browser applies to your page. It's just irritating later on when you get more complicated, you can't figure out why things aren't quite aligned and normally it's because of the default styling. So let's target the body first. And let me just say here for your own knowledge, browsers add eight pixels of margin, default. Let's remove this. So let's give it a margin of error. Can see the browsers already affecting the styling. Now, I just want to set the minimum height of our entire page to a 100 vh. This actually will only affected later VH in case you're wondering, is just a property related to the actual view ports itself. So we want the height to be the entire viewport. So all I'm saying here, I want to align items to the center. Padding at the top and bottom padding to Sarah. And then what we can do is we can sit the left and right 13 percent of the viewport size. Yeah, I think that makes sense. I think that makes sense. And of course, you know me by now, I like the flicks layout and we can justify content to the center. There we go. So this is what our range widget has now become. How cool? All right, let's keep going. Let's keep going. What I wanna do now is I want to target the input with a type attribute to city range. What don't want to do here? Well, let's apply some margin to the top and bottom and then 0 to lift them, write more Modern. Okay, and then the width, we can give it a 100 percent. Okay, My dear students, how do we now target the actual range itself and apply CSS to it? Let me zoom in a bit. Let's inspect this widget. All right, if we inspect the actual range, which is itself, can you see in the shadow root, don't worry about what that means. But basically, we are given this by default by the browser. And the browser has applied a property called webkit slider runnable track. Can you see it? And if we open that up, it's with the styling comes from. So what we wanna do is we want to target that webkit slider runnable track pseudo element. And we want to affect the styling on that. So we can go to our file here. Let's just remove this for now, place it to the right. And we want to talk it out input with top of range. But this time we want to target the pseudo element, right? And we know it's called webkit, slider runnable track. And this is what's really cool. We can now apply custom styling to it. Let's just say the height of seven pixels. Let's say the cursor pointer. So the user knows it's kind of a Range Selector. We can change its background, give it to a CC hackles at looking students, you can see it's being applied in real-time vehicle. And then I don't like those square borders. And in order to round it, we just apply a border, radius, property and equity interests city 50 pixels. There we go. Nice and round. We can do exactly the same thing Medea students, but now we can target the webkit slider, thumb, a net will apply styling to that at all. Round thumb. Effectively this sram button, it moves up and down. So again, we want to target input with its type range. But this time you guessed it, we're going to target the pseudo element of width kit slider. And again, apply a border radius to this of a 100 percent is round. I guess we didn't really need to do that. It is round already. Let's give it a nice box. Shadow, shall we? Box-shadow, 05 pixels there. And one, yeah, I think it looks cool. I'm quite zoomed in here. Zoom out a bit. There we go. Again. We can do cursor pointer. What we can do. Look here, if I zoom in, can you see this slight white background? I don't want that day. If you want to remove that slack white background. So in order to get rid of that white background, Let's change this background property. He's, it doesn't really matter. Kilometers got blue. Yeah, there we go. And then I want to just push it up a little bit. Let's just say margin top minus five pixels. And we are HOCL, does that look? So we've already custom-designed part of the range bigger. How awesome. Now what's really cool Medea students is that you can target or you can use different CSS, selectors and pseudo elements in one. So for example, if we wanted to change the range sliders color when it's in focus, we can do so and it is super, super easy. All we have to do again as target the input with a type attribute to sit, to range. Yeah, we only want to change styling when it's in-focus. And we want to target the webkit. Dash with kids, slider, runnable track. And we want to change the background color here. And we can do it to one if 759. Now when it's in focus, can you see how it's darker? When the user chicks out of it and it's out of focus, it reverts back to its default background color. How awesome or I, it's the next thing I want to affect is the rapid forget our index page. We've got this wrapper class with everything in it. Why don't we just grab this rapid loss and define a width of, say, 500 pixels and change its position property to relative, easier, faster move things around a bit later, as you'll see shortly. So there we go, That's our wrapper. We've just made our widget a bit bigger. Okay, everything else still applies to all working, which is good. Now I want to get into the tricky bits and it is, say, tricky, it's not that tricky, it's just, we've got a plan mind a little bit. I want to define the styling of this output, right way It's clauses it a range value because right now when we scrolling us, we can't see the value in any way. So effectively I want to apply styling so we can't see the value. And how do we do this? That's right. We target the performer pseudo element. So let's start working on it. Okay, save this. And it stopped working on the actual range value. So let's make its position absolute. Because then we can be very specific where we want the output to be. Do you know what? I'm actually going to stop? Yeah. Yeah. I think I think the space let me stop here. What I wanna do, I know in our index file, we've got this output here. It's empty at the moment. I want us to use JavaScript. I want to add a dynamic span element. And I want us to put the value in that span elements. And that's why I want to stop. Yeah, even with the styling of the CSS, Let's first do the JavaScript together. Let's add that element and then you can style it and we can see how it works. Okay, so take a break, take a stretch, and I'll see you in next solution video, the final solution video for this challenge. 28. Custom Range Picker Challenge - adding JavaScript: Welcome back. Welcome back. I took a bit of a stretch of feeding and I'm ready to go. And let's get into it. Let's talk lots in the JavaScript together. So let's define yet edX Java scripts. And you know, by now all our JavaScript has to be inserted within the script tags. First thing I wanna do is I want to grab the input of type range. So let's define a variable called range. Let's assign this the value of that input. And we can do that by accessing the document object. And we can use a method called get element by ID, and we gave it an ID of range. Great, So now we've got that input, right? I also want to grab our output. So it's define a variable called range output. And of course, same logic applies. We can use get element by ID and we gave it an ID of range value. Let's grab our input and output elements. That's what we've just done. So far, so good, right? So far, so good. Next Medea students, I want to define a function and this function is going to display that are put onto the viewport. So let's call it function value. And what do we wanna do here will very, very easy. All we wanna do is we want to grab our range output variable we've defined above. We want to set its inner HTML value to what? Well, we could set it to the actual value of the range. But remember how I said I want to put it into a span element. I just want to show that the many different ways of doing things when it comes to coding, which is pretty cool. So yeah, we can actually define an HTML span element. And then we can include a variable by the dollar sign in to curly braces inside that span, I want to access our range, basically the input element. And on that input element is a property called value, which is the value of the range. And I want to insert that into the span. And of course we need a closing span. Take a very simple, So we'd find our function, but now we need to actually execute it. So I want to set the initial value when the page loads. And to do that we can access the document directly, add an event listener. Now when the page loads, certain events are fired and one of them is called the DOM content loaded event. This just happens by the browser when your page renders to the screen. And then when that have been fires, I want to execute a function. To execute a function, we just have to type it out. It's very, very simple. So that sets the initial value when the page loads and eager to the browser and show you, refresh the page. We can see that we've got the 500. Don't worry about the styling. We're gonna do that shortly. But at least and it's showing. But you'll notice as I drag, nothing happens because we've never call that function again heavy. You've only cooled at once when the page loads. So of course, we have to call the function every time an input event. And this is very, very easy. We grab our input, which we defined in a variable called range. We add an event listener. The event we want to listen to is the input event. And every time they fires, we want to execute our show value function. Let's go to the browser now. And it's moved. Sit next to 1000, and we sit the starting value to 500. This is the first step. There's a few things we gotta do here, but let's tackle one thing at a time. They say in Africa, how do you eat an elephant? And the answer is 14k at a time. So that's it. We've done the first step, but now I want to add some styling and it is a bit more JavaScript we're going to add here. But I'll show you shortly what I mean. So let's hop into our CSS file in its start, styling this bad boy. All right, let me display it side-by-side so you can see what we're doing as we go on. Let's go to our styles. Let's start styling this, our range value class. But in here we've got a span now, right? It's added dynamically. We can set its width to 40 pixels in order to make sure gonna do before I do this, let me add a background. And I want the background to actually be the same as one previously. See the IDE so useful. I don't have to remember what it all is. So there we go. We've edited background. I want the line heights be a bit more. 24 pixels, I'll say text-align center. I don't want the color being black either. Doesn't look that nice. So let's set the color to white. Split better. I want the position property to be absolute because we want to be very specific way this is shown. Don't lack the square borders either. So let's give it a border radius. 15%. Does it look nice? Yep. Now how many used the transform property? Let's just say you want the center of the element. I'm talking about the span element to line up with the center of its parent element. Right now it's not just watch shoved to the right. So I want to access the transform property. And on here, I want to translate this, right. I want to shift it, lift 50% line with its parent. We go starting to take shape. It's starting to take shape and we're not quite done. I want to add that little triangular kind of design to it. So it almost looks like a keynote speech bubble kind of thing. How do we do that? Well again, I want to target the class of range value, that output element we are targeting span. But now I want to target the before pseudo elements. The content can be nothing but I want the position, let me say a sit position, absolute to the output element. Said I want to do here is I want to change the position absolute. Starting it's time to get better with finer 0 right there. And now I want to kind of draw that little pointy piece at the bottom of this. How do we do it? One way is to use borders. Let me show you what I mean, right, let's define border top is 10 pixels solid, say blue. And let's duplicate this a few times. Courses not going to be bordered top only, it's going to be bordered left. Border rights. And border bottom. I'm just kinda want to show you, right, if we do this, we just get a square. But what's interesting here is if you lift and writers rate just so you can see how this works. And you see we get, lack those little triangular pieces. Pretty cool, right? So all I wanna do is I want to remove the bottom border entirely. Let's get rid of that, right. So now we've got only top, left and right. The top, I want the color to be consistent with what we've defined above. There we go. It's consistent with the actual output widget itself. The border lift, if we make it five pixels. And we do the same with the rights. You can see the blue, that's kinda the size I want, but I don't want to see the rate. So instead of read, all we need to do is make it parent. How awesome is this? And now they're triangular pieces just randomly at the top of that entire widget. So all we have to do is we push it down. Okay, there we go. So we've defined the top a 100 percent, so it push it all the way to the bottom. We can also push it into the center and then give it some margin leaf property, five pixels. We go, if we zoom out, this is what it looks like. But you'll notice my dear students that it's pushed too far down. So think we defined, yes, you see the range value. We've got position absolute. And the range value is this entire output element. Will I want to push that entire output element up so we can access its top property and push it up by 50 percent. And I think that'll do it. I think that looks cool, at least now it's the right height. But you'll notice as we move this widget, that output does not move. But how my students, how do we make it move? Well again, the many ways in programming, the way I want to do it here is I want to access the lift property and change it dynamically. Just remember, I want to access the live property and this needs to move in line with wherever this range widget. And whenever you hear the word dynamic, he must think JavaScript. So let's get our JavaScript here and let's start coding this in our function show value for even get to changing the inner HTML. Let's grab the value as a saint. And you'll see why we use the shortly. Okay, so let's define a new variable called new value. What should this be? Well, I wanted to be the current value of our range, right? And we've defined the range variable above. It's just that input type range. So whatever that value is, I went to the DAT, the minimum, which we know. Then what I wanna do is I want to mention I want this to be a percentage. So we need the entire range itself to get a percent. So we know it's going to be arranged mx minus arrangement. And of course, to get it into percentage terms, I want to multiply by a 100 is just console log this out. And you can see what I mean. Let's go to the browser since picked the console. And here you can see when the page loads, that's 50. And it's 50 because it's in the middle. If we go to 0, It's 0. If we go to a 100, it's going to be a 100 percent. So I'm just trying to get a percentage. Where are we in this whole thing? Then we have a simple refresh and we're back at 50. Okay, let's go back to our coding editor and let's continue. Because we have this range value as a percent. Why don't we just try off the cuff to assign the value of the lift property to their perceived him. See what happens. Let's give it a go. So here we're changing the output value and position of the output limit. That's what we're trying to do. So we've done the value. It's not try and change the position. In order to change the position, I want to grab that range output variable we defined above access at style property and we're going to change its lift property. And if we just go and assign it to new value, you'll see a problem with this image. First, show you. The other thing is let's put this in temperature literals. Dollar sign brackets, new value. Because I went a percentage sign afterwards. If we now look at this in the browser, bar magnet looks perfect. Light, it looks perfect. What are you talking about that we need to change anything. We'll just wait. Let me scroll. Look what happens. It's going off center, Hope Center. So we know it starts off correctly. But as we go along, it's off center. So we need to dynamically push this right when we're at the very left. And when we're at the very far right, we need to push this output element to the left. Okay, well, how do we know how much to push it? It's define a new variable here called adjust position, and let's define it as ten. Okay, we're just going to move it 10 pixels and see what happens. Then. All I want to do in this value here, I want to access the calc method, put that in brackets. And what do I wanna calc? Well, I want to use this lift position we've just calculated, but I want to add now, right? And what do I want to add? Let's put new brackets. Will I want to add the adjust position variable we've just created. But it's going to be in pixels. Like I said, I just want to push it right, but in pixels, it's now save this and go to the browser. And it's now scroll all the way to the left. It's not quite right. I think team pixels is to match. Can you see? So let's try seven. And that looks bang on. So when it's to the left, we 17, when it's to the center, we want nothing. And when it's to the right, we actually need to push it the other way. So our adjust position formula needs to be dynamic. Put it this way, when it's to the very left, it needs to be seven. So we know the new value will be 0 times a percentage and I'll show you why it's 14 percent. Now, think about why I've done this muddy students. The new value ranges from 0 to a 100. Remember? So when it's in the middle, we know new value is 50. 50 multiplied by 14 percent. 77 minus 7 will be 0. So when we start off the page, this is not going to be adjusted. The output element would be dead on the center. When we add the very far left of the range, that new value is going to be 0 and anything multiplied by 0 is 0. So we're going to adjust the position by seven pixels. When we're at the very far right, we know the new range value is a 100. A 100 times 14% is 14. 7 minus 14 is negative seven, which pushes the left by seven. And this is how it works. I know it's a bit messy, but I hope you can understand how we got to that number. So there we go. This is a custom range widgets. Hope you having a lot of fun. Medea students. Who, and the next challenge is also going to be quite fun because I want to create an entire four. It's going to be really, really fun to see now. 29. Form Challenge - intro: Welcome back to you. It's another cool challenge. And this challenge is super cool because we building a full, a very, very simple sign-up form I may add. And just a piece of advice when you are creating a sign-up form, keep it as simple possible. You don't want to scale uses away with OSC into too much detail at the beginning. So anyway, this is a very simple form and you should be able to actually do this now, I think, give it a go. What's really cool is we are not using any JavaScript yet. This is pure HTML and pure CSS. So how does this form work? Well, we have three widgets, username, email, address, password, they will all required. So you cannot submit the form of our filling Amendment and the browser gives us front end validation right out of the box. When the user correctly enters information like his name, we get a green background and we get a little checkmark. It's telling us, we all good to go this far with an email address. When the user starts typing an incorrect email address, tells the user, hey, your email needs to be valid. So of course, when an at symbol is included followed by text, we get a vetted email address according to the browser. Remember, from a front end point of view, we cannot verify that it's an accurate email address. Has to be done with server-side code. I'm talking about now front end validation. This is now regarded by the browser as a valid email address. And the password is also really cool here because the password we've defined or defined as having to meet certain quantity, it's got to be at least six characters, I think, at least one lowercase, uppercase, and one number. So when the user just taps random text and get an error message saying a password must contain at least six characters, one uppercase, one logos, one number. When the user does that, it's all sorted. And of course the user, they can submit the form and you can redirect them to the login batch cooking. So there we go. This is what I want you to create. It's going to be relatively simple. But we are using CSS, pseudo classes, and elements quite a bit. I can't wait. I'll see you in a mixed solutions video. 30. Form Challenge - solution: All right, You know the drill. We've got an empty index page and an empty styles.css file, we can create a simple HTML page, is going to have a head section. And in here we're going to just link to our CSS file called styles.css. Pretty simple. We've got a body within our body. I want to form. We don't even need an action. What we can do here is we can first set up the username input field. We can wrap it within a div. We can have input of top, taste and name. We can give us firstname, ID, we can give FirstName. We want this to be a required field. Let's just put a placeholder for now as an empty string or that save it, refresh the browser. And there we go. Plain boring old inputted text field. I do want to label for this the four has to match the ID of the inputs, which is first men. And the label can just say username. There we go. Pretty straightforward. Under this, we can have a span because later I want to add a checkmark. Remember in the introduction we saw when it's valid, we have the little checkmark on the right of each input. Well, I'm going to wrap that in this span so it can be empty for now. But all I wanna do is I want to give it a class of checkmark. Let's expand US. This is what it looks like. We've just done our username. Pretty straightforward, right? Let's just copy this, paste it, and now I want to do an email. So of course the type is not taste, It's e-mail. The name and ID and label can all be e-mail. Again, I want it to be required and we can leave the place holder is sip username and email address. And again, I want the span of the check mark, but there's something else I wanted to Ahmadiyya students and that is an error message when the user doesn't incorrectly type the e-mail, I want to show the user a message. Let's wrap that in a div. Why don't we, and we can give it a class of error message. Very simple. We can type anything we want here is just say, your email needs to be offset. If we go to the browser, there we go. Looks like a big mess at the moment. Don't worry, that's where CSS comes in handy. It's copy this email and you guessed it. It's do our final, final widget, which is a password, which leads to a password here, input type of courses password just change all of these. Password can also be required. The other thing I want to add here though, Medea students, I want to be a bit more funky. I want to add a pet, an attribute. And we've seen examples of this a lot. But this pattern, I want to be very specific. I want the password to contain at least six characters. Will, you know what? Let me actually write it out. The error message, your password must contain at least six characters, one uppercase or lowercase, and one number. And I want to do this with regex with a regular expression. And we know HTML except regular expressions in javascript format, which we just include within these quotation marks. Very simple. And I'm going to be very, very quick. Yeah. The first thing I want to define is I want to say that we need at least one number. And we can do that by using this backslash d, which is equivalent by the way, using 0 to nine. I don't know, just showing you different ways to do things, I guess. And then I also want to now define lowercase. We can have any number of lowercases, which is a. And then now obviously I want us to target at least one uppercase a. And then remember the last thing is it has to contain at least six characters as password. So we can just plug that in and within curly braces. And the first argument is the minimum, and the second argument is the maximum rock. We could define a very large number or just leave it blank. Let's just leave it blank. So they would go, My dear students, this is the HTML. And if we go to browse and expand, it, looks like a big, ugly. But this is what's really cool, CSS, right? Because we can transform this very, very quickly and very easily. So let's start. Let's go to our styles.css page. Now we can do it side-by-side so you can see the changes in real time. And let's start coding, right? Let's affect the body first. We can do the background. Triple three. How did this change the font family to address sensor? That's fun. Right, 20 pixels of padding. It's good. It's not all get our form. We know we've read this entire thing than a form. We can give it a max width of 100 pixels. And that centric. 0 and alter. The next thing I wanna do is I want to target our form, and then I want to target the div element, which is a descendant of the form. Let's change its position. Relative. We can change its background to white, and now it looks pretty hideous, but don't worry, we're going to get there. We can change or put a border bottom to demarcate each inputs, right? So one pixel, solid and you can just be off white. There we go. So we've got the username, the email, and the password. Oh, you know what, I haven't done? My students, I haven't put a submit button at the bottom. This just have input of types of bits can be signup. I just remembered now looking at it. Okay, cool. So that's the dove. The next thing I want to style is let's call that the form within that we've got the div is a descendant within that we've got the labels to each form widget. It's it the PCT to other no, 0.3, they were getting a bit better. Font weights. Let's pull that up. Position. We can set it to absolute because it's we can actually target its top property. Shutdown a butt, lift, 25 pixels. I don't know how it's looking pretty hideous now, but it's going to look better. It's going to look better. Let's target now, the input. Right? We're targeting the input. We want its width to be a 100 percent, right? So the entire container, and we don't want default borders. We want to remove those default porters. And then we want to put now padding. I want the left padding to be 50 pixels and all other padding to be 20 pixels, right? So that top, right, bottom, and left must be 50. And then we go starting to come on a little bit. And you can see we are showing all the error messages. You get a high debt shortly. We'll see when we focus with that horrible border, I want to just remove that. I want to be very explicit as to what styling we apply to this form. So let's target the input, but this time when it's in focus, so we targeting the CSS pseudo class of focus. And I don't want it to be an outlier. So when we focus it now there is no outline. Pretty neat, right? We can also change the background when it's in-focus. 231231. Does this look? There we go. It's taking shape. I love the stuff. The next thing I want to do is you can see the labels. They username, email address, password. User focuses on the widgets. I want that label to have 0 a pasty. How can we do that? Simple? You don't want to do. I want to grab our form inputs, just being explicitly. But this time, well, there are few ways we can do this. One, we can target all our inputs because we want the same logic to apply to every single input. But we could also be more explicit, but going like this and going of type text, right? And when it's in focus less. And that class just selects the first element in or let me write label here. Well, let me put a comment, right? Select the first label element, and we do that by using the plus sign after the input with a type with focus. That's all I'm doing here, right? And of course, I want to sick pay city of that label to 0. So when the user focuses on username, it's gone AACU. But the problem with this is then we would have to do exactly the same for each other input, right? By using a comma and it just takes space. So I could do this. But instead of text, we've got e-mail. E-mail disappears, username and password stolen. It's irritating, isn't it? So instead of doing this, we can just target all our inputs when they are in focus. And should work. E-mail, awesome, cool Medea students, how cool that there is a problem here because look, let's say the user's name tops Wally, and he or she then loses focus on that widget. Look what happens. Oh man, the label is back. No, no problem. All we have to do again is due pretty much the same. I'm saying it's all getting working down the chain performed in the div, then the input. But this time I want to target that input when it's valid and we're going to toggle that label. And exactly the same thing. We want to set its opacity to 0. So there we go, the user types of Ali and toes out. That label doesn't come back because it's valid. Pretty intuitive. We were working through this. The next thing I wanna do is I want to now target when it's valid. So let's work our way down the chain to the input. And this time we want to target the valid pseudo-class. And when it's valid, we want to change the background color. And it can be 19 for 250. Five to 14, how does Agile is just beautiful. Isn't that cool or odd? So that's the way it's input is valid. Same with email address. And it's cool. And password. Oh, why is password valid? It should not have been valid. One character, it's valid. So this is something wrong in my pattern. Wisely, another one shouldn't be there. Let's go back to our browser here and it's dragging. Okay, good. I'm typing characters, nothing's happening. Let me do one uppercase. Nothing happens, but if I type a number now it should go green. Would you agree with me? Push the number one? It's always nice when it works. So there we go. We know that our input type is set to password is working correctly. Our regex is working. Okay, Let's go back to our CSS file. Okay, now I want to work on that check mark. I want to put a checkmark there. How can we do that? Well, remember in our HTML, we've got this span with class checkmark. It's put it inside there. So we need to do is grab the span weights clause SAT, check mark. And I want to target the off the pseudo elements. We can see that it's content to nothing. Display inline. Position can be absolute because you'll see what I wanna do. Actually want to push it all the way to the right. That's why I wanted to use position of epsilon. In other words, I want to access the right property and assign it to the value of 0, the width, and make 35 pixels. I need to see this. Let's quickly do that now. It's first go to Google and try and find this tick mark here, total. So it's quite an OSAT. I showed you this one before. By the way, we can just copy this check mark and we can put it into our HTML. That's why I just wanted to go to that site specifically. So how do we put this check mark? And well, we only want it to apply when it's valid, right? So let's work our way down the chain. Input of type of valid. But then our 12 now target its sibling of span. We know it's a sibling. And I want to target the spans of the pseudo elements and I want to change the contents. Remember above, its default content is blank. I want the content to now be a check. So now if we type username and we type Wally, we've got a check, but you can see that it's shoved all the way to the top. So why don't we push it down much better? And what needs to be a bit, maybe bold, font, weight bowl, it's better. And of course, if we don't push us to the right, It's not going to look nice. You can see it's actually outside the widget entirely, which is why I set the position to absolute. I think that looks quite nice. You can see how easy this is as well. My dear students create a really nice intuitive looking form. Doesn't take long. Head. Other thing now I wanna do is I want, when it's invalid, I want us to show that big red box on the user to know it's invalid. So again, we can work our way down and we don't have to do this by the way, I'm just showing you, you know, because as you'll size become more complicated, you want to be very specific. We got we targeting the inputs with the class invalid. And I want to set its background pink. What I don't like about this as you don't a log onto page and see everything read. It's only when you start filling out the form and I'll show you a neat, neat trick. Did you notice when I wrote the HTML that are put a place holder and I put in the text. Because you and I know when a user toggles and input widget, that placeholder disappears. And what's really cool is that CSS, it's given us a place holder shown pseudo-class that we can target. And they've given us the not keyword. So I want to say Only show me an era of pink. And I'm going to use the word not when the placeholder is effectively not shown. That's what I'm trying to say here. It's what I'm trying to say. So I'm targeting the invalid pseudo-class, but only when the placeholder is not. So when the user clicks on username and top swale, that's fine. Email address when they start typing, an invalid one doesn't work, but as soon as it becomes valid, it goes green. Same with password. We know it's invalid now, soon as I do an advocate, a number, it goes green house. I think it's looking pretty good. Medea students, don't you? All right, Well, let's continue. The next thing I want to do is our 12. Let's target this error message form. We know it's in a div, right? And we gave it a class of error message. Padding, 30 pixels, 50 pixels. You know what? I think this label should be in line. Let me scroll up here. The label is 250. Would that look better? The stem, It's all in line, right? Okay, cool. So we couldn't padding to the error message. What else can we do to change its color? Just Aflac. Next, heights, starting to look better. And overflow hidden. Now we can't see anything, right? Don't worry, it's going to work. Just me. Transition. Let's make this animated because you'll see shortly that that actual widget will expand to show that takes out the error message 0.2825 seconds, How's it? And the error message can be a red color to make sure the user sees it. Can be. Here we go, we conjugate it. And why can't we see it? Well, it's because of this max height property, right? If we remove that, we can see that our error message or messages are displayed. So we've set the max height to 0, but what we want to do is we want to know not set it to 0 when there is an error. So access to form, work our way down the chain to the input. We targeting inputs where it's pseudo-class is set to invalid. Write if we just do this and we target the sibling, that's just a sibling or just means a sibling. And CSS, I want to find the sibling element where the class is error message, which is that. And now I want the max height to be 250 pixels. That might work. And let's write, let's give it some padding. 20 pixels, 20 pixels, 20 pixels, and 50, because we always giving 50 pixels to the left. It looks a lot better. It looks good, man. Bats, you'll notice now that it's displayed all the time. We don't want it to be displayed all the time. And again, all we have to do is we have to target CAC, not word. And we can access this place holder shown property again, right? Because when it's not shown, Dane, we wanted to apply. So when the user starts typing and invalid email address, we get an error. And of course, Password, same thing, starts typing it. Also it's invalid. When it becomes valid again, it disappear. How awesome, man, this is cool. All right, The final step is I just want to target that sign-up button. Very reasonable, intelligent the input type. Submit. We can display block and give it a width of a 100 percent. We can give it a margin of 20 pixels above and below. Background is just give it the color white border. Padding 20 pixels all around. And let's increase the font size. Font size, you can just do on point to run out of yourself. I mean, this is really cool form. And you've come a long way. I mean, we got the check mark from the sites, I guess I can close it down. But it's a very beautiful and you can see how easy it is to create cool poems. When the user starts typing, we get a check mark. When the user starts typing an incorrect email address. We're told so when it starts becoming correct, we get another chain. And the same with the password ikea students. This is what this course is all about. It's equipping you to be able to very quickly understand how to target the invalid or valid the before and after pseudo elements, putting in chicks like this, starting to understand that a Bolden now and it's really awesome. Aside from the bank, you've learned a lot already in this course, but we're not done. We still got a lot of other elements to learn about. In fact, up until this point, we've only really learns about the input element. Every crew, I know it can seem quite daunting, but you don't have a lot of fun along the way. We need to enjoy what we do end. Yeah, I've enjoyed these challenges and I'll see you in the next lecture. 31. Class outro: Well done my dear students for finishing this entire class, we really have come a long way, heaven when it really, really has been fascinating. In this class, we've been talking about the newer impotence. And by newer, I just mean those introduced to us by HTML5 and later. And as you already know now, they are a plethora of different input types that we can use to enhance our forms. Things like date pickers, color pickers, range pickers, the email input type, et cetera, et cetera. But I'm sick and tired of learning about the input type. I want to see other form which it's like yeah, you, and that's what we're going to discuss in the very next. Gloss. Super-excited. Follow along, and I'll see you hopefully soon. Hello.