Web Forms 2021 - Part 5: The original input types (introduced a long long time ago) | Clyde Matthew | Skillshare

Playback Speed


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

Web Forms 2021 - Part 5: The original input types (introduced a long long time ago)

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

26 Lessons (2h 39m)
    • 1. Class Introduction - original input types

      0:58
    • 2. The original input types

      5:02
    • 3. Passwords

      5:20
    • 4. Using the pattern, title and required attributes with passwords

      4:29
    • 5. Warning - the password type does nothing for security

      0:36
    • 6. What are regular expressions?

      10:08
    • 7. Hidden input type

      5:33
    • 8. Using URLSearchParams API

      6:06
    • 9. Using hidden for databases

      2:25
    • 10. Using hidden for timestamps

      10:01
    • 11. Buttons and attributes

      7:37
    • 12. Using buttons with new attributes

      7:28
    • 13. Different button types

      7:19
    • 14. Checkable items

      4:33
    • 15. More about the checkbox

      12:42
    • 16. Checked pseudo class

      8:36
    • 17. Radio buttons

      7:15
    • 18. Checkbox challenge - intro

      2:30
    • 19. Checkbox challenge - solution

      14:03
    • 20. Checkbox challenge - building the custom check box

      6:51
    • 21. Image type

      3:51
    • 22. Heat map - image type example

      5:23
    • 23. File type

      3:14
    • 24. Styling a file input

      7:13
    • 25. Adding JavaScript to a file input type

      8:10
    • 26. Class outro

      1:10
  • --
  • 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.

7

Students

--

Projects

About This Class

WELCOME TO THIS SKILLSHARE SERIES ON HOW TO BUILD AND UNDERSTAND WEB FORMS. THIS IS THE FIFTH CLASS ON WEB FORMS --> ORIGINAL INPUT TYPES. 

What we cover in this particular Class?

We will cover of ton of information in this entire series, but for Part 5 I'm going to show you just how powerful the <input> element really is. 

The <input> HTML element is used to create user friendly controls for web-based forms in order to accept data from the user. But what's great about the <input> element is the sheer number of types of input data and control widgets that HTML gives us. 

In this class I want to focus on the original input types. By "original" I just mean those types that have been with us for a very long time, since the early days of HTML. 

Specifically, I want to discuss input types such as: 

  • password
  • hidden
  • checkboxes
  • radio buttons
  • image
  • file
  • AND MORE!!!

Along the way, I'll also introduce you to regular expressions - a powerful tool to enhance front-side validation. 

So what are you waiting for? 

LET'S BEGIN

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

THE NITTY GRITTY OF WEB FORMS?

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

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

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

Why is this course so important?

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

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

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

Let me share my form building skills with you

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

WHAT THIS SERIES COVERS

This series is huge and comprehensive, from basics to advanced

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

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

Why should you learn so much about forms?

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

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

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

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

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

A unique approach

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

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

How is this Skillshare course different?

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

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

Practice makes perfect

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

Is this course for you?

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

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

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

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

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

WHY START NOW?

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

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

Lets get started.

See you in the lectures.

Meet Your Teacher

Teacher Profile Image

Clyde Matthew

!false | funny, because its true

Teacher

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

 

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

 

My experience and a few words:

 

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

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

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

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. Class Introduction - original input types: I cannot believe we are yet into another class. This is an entire series all about forms. My name slide, your instructor. And I have been having so much fun, but enough of that. What is this loss? What about in this class? We are going to be looking at the original input types available to us when building forms. And what I mean by original input types, I've just been those that have been with us for a very long time. Since the very early days of HTML types like password, checkboxes, radio buttons, the hidden input type, that's weird. The file cetra, et cetera. It's going to be a lot of fun this loss. It doesn't matter whether you are an experienced developer or just starting out because I cover everything I started the basics. We code together, we'll look at examples together. I have a lot of fun in these classes. I hope you are too. But enough said, let's get Crick. See you in the very first lecture. 2. The original input types: Welcome, welcome back. This is going to be such an exciting section because we know that the input is one of the most powerful HTML elements there is, and I've kept saying it. And the reason why it's so powerful is because there are so many different things we can do with the input element. It is going to blow your mind. And I have to high-level go through some of them because this course would just never end if I had to go into detail for every single type. And up until now we've seen the input type text attribute used many, many times. And that just allows the user to input text into a box. But as I keep alluding to, there are a ton of other input types. Satellite, what are they called? Mr? Yeah, they are. And this is a bit of a half-truth because these are only the original input types. Original meaning what came out in the old spec. We have new input types. Now I'm going to be talking about the newer ones later on in the course. But these original ones are still useful for a lot of input types. So let's do these first and then we can discuss the new ones. So let's start. Let's look at password. What does that all about? Well, let's what it looked like, right? It's a single line text field whose value is obscured. The browser will alert the user if the site is not secure. So that's the password type, the radio buttons. We've even seen examples of this so far in the course. What does that look like? Well, there we go. It's just a button and a radio button allows a single value, okay, one value to be selected out of multiple choices with the same name attribute in each control. We're going to be looking at this later. Don't worry if you don't know how to use them, a code them. But for now, just know that's what it looked like. And it allows one valley to be selected out of multiple choices. Pretty straightforward, pretty easy. Next we've got the input type, a button. What does that look like? Well, if there's no text inside, it just has kinda styling applied to it that makes it look like a button. It's basically a push button with no default behavior. And it's empty by default, if you want to put a value in it, you can by using the value attribute. But like I mentioned, it's in T by default. So that's the button type. And then we got checkboxes. Don't confuse this with a radio button or a checkbox allows a value to be selected or deselected. In fact, you can select multiple values as many as you like, all at once, or just one or nothing. So that's what a checkbox looks like. Then we've got a input type of file. What is that? Well, that's what it looks like. It will ask the user to select the file, and it's a control that lets the user, you should get it, select the file. And we can use the except attributes to define the types of files that the control can select. But again, we're going to be looking at this letter. Don't stress about it. Now, what's the next type? We can look at a type of hidden. And of course we can't see anything. There is no default. Look, because their control is hidden. But what's important is that its value is submitted to the server. Don't worry what this hidden is and why we would use it. We're going to be talking about it later. Okay. The next type is an image type, type, sit to image. It's basically a submit button, but with an image of your choice. In other words, it's a graphical Submit button. It displays an image defined by the source attribute and the alt attribute displays if the images, sources and missing, I don't typically like using images. I'll be honest with you, my students because it takes longer to render and display to the screen always like using CSS we possible. Anyway that is available to us. Then we've got this receipt. Is that it's very intuitive. It's a button at resets the content of the form to its default values. It's not really recommended to use this because the user can click upon a stake and then they've just lost all of their work. And then finally drum roll. And we've got the submits. Obviously this is very, very important because how else is a user going to submit a form? And what's interesting? And you may be asking me, Hey, Clyde, this is weird because we don't have to use an input to create a submit button. Why don't we just use the button HTML elements? Well, that's a very good question and we are, or I am going to be addressing that later on in the course. So I just wanted this to be a high level, but this is all related to the input types, the different type attributes we can sit for an input element in HTML, Kou, Hannah, and these are only the original ones. Remember, it's still newer ones, fun ones. We're going to have a look later. But now that you know the high level, let's start digging deeper into some of these. See you now. 3. Passwords: Let's start by looking at the input type of password. Firstly, the password attribute is also a text input field, and it's one of the original input types introduced by the HTML specification that's been around for a very, very long time. And it's very similar to using other input text fields. So don't fool yourself. They are no constraints and no security benefits by having the password attribute, what do I mean by no constraints? Well, it doesn't add any special constraints to the Internet. All it does is it obscures the value entered into the form with dots or Asterix. So it can't easily be read by others. Actually, it also does prevent users from copying the text to a clipboard. So net scenes maybe I shouldn't be saying no constraints. I should say not many constraints because the user can still type whatever they want into that password field. Secondly, it provides us with no edit security. Keep in mind, the password type is just a user interface. So unless you submit your form securely, it will get sent in plain text. And this is bad for security for obvious reasons, rights and malicious party could interpret your data. Still passwords, credit card details, or whatever else a user has submitted. But this doesn't render this type useless. We can use it and we do use it as developers. So I want to show you two examples. In example number 1, I want to make use of HTML5 placeholder attribute. And I want it to be the most simple use of the Password attribute. Let's have a look at example number 1, the most simple case. Let's create a very simple form. And we're going to use this password attributes form. We don't need an action. And the default method you already know sit to get. And let's rep, often what I do, I'll form controls within a paragraph. So username, and let's get an input of type text. The name user would, we could have said username doesn't really matter. And I want to place all the hair. Place holder can be login, username, pretty straightforward. We save this, got our browser. Refresh. There we go. Username, login, username. Let's go back to our text editor. And now I want to do the password again, password input. Now I want its type seat to password. This is the first time we've done this coup, the name submitting to the server and says password, we don't need an idea. Let's have a place holder. We can just say choose a strong password, right? And then finally, we just need a submit button. So let's have another paragraph input of type submit. This is another type rights. And we haven't spoken about a date in detail. So for now, just just take it on face value. There we go. Let's save this, got our browser, and they require k. We've got a username, password scene, but now let's type username of Wall-E. Choose a strong password. Image is a strong password. You'll never, never gets it. Okay, there we go. Now I'm going to submit it and you never gonna get my password. What can you see the GET requests? Can you see the URL? This is a cool course that will my password. No ways now I'm really, really exposed. So can you see that the password doesn't give us much security at all. It's just a UI feature. So there you go. I told you it's not that great, right? And it doesn't help with security. You can see the actual password in the URL bar itself. So then let's move on to example number two. And in example number 2, I want to look at SU, HTML5 attributes, pattern and required attributes. They normally work very well together and their importance becomes evident when the author needs to set rules about the format and type of data that can be inserted into an input control. So what are these two types? What does Patton and required mean? The pattern attribute allows us to use regular expressions to define what the user is supposed to enter into the field. And when we use the pet an attribute, we usually also use another one called title. The title attribute takes particular relevance when we use this, because it's responsibility is to provide an explanation about the rules that apply on the field. In other words, the browser's going to use the information in the title attribute to compose the error message shown to a user of the unsuccessful submission. The required attribute is pretty straightforward, pretty intuitive. Adjust disallows users to leave the field NT. So by using both attributes together means that the form submission will be prevented until the requirements have been met. All the requirements of that form control has been made super, super useful. Bat, I know words are just words. Let me hop over to the text editor and show you an example of using both of these. 4. Using the pattern, title and required attributes with passwords: Okey-dokey, Let's get on to example number two. I just want to spice things up. I want you to show you now that we can do a few different things. Firstly, why don't we set the target attributes? Remember what the target attribute does. It tells us where we want the response to be shown to us and here because maybe we don't want to keep refreshing the page or having to go back. Maybe we want it to be opened in a new page. So let's put target blank, just mixing things up. And as I mentioned, I want to use the two HTML5 attributes, right? I want to use pectin and I want to use required will. Firstly, actually there's another one I want to use and its title. So firstly, let's use pattern. This allows us to use regular expressions. I know, I know I haven't yet spoken about regular expressions, so let's just do this example. And in the next lecture, I'll give you a quick rundown of what regular expressions are. But this is not a course on RegEx, so this is just very high level leads say, in our password, we require the possibility to begin with a letter, and it needs to contain at least one digit. How can we do that? Well, we need a way to develop a pattern to tell the browser that we're looking for a pattern. And we do that using regular expressions. And the way the format of a regular expression is very peculiar or specific. So you have to follow certain rules. So firstly, we want to say that it has to begin with a character that has to begin with the letter. So that's what this first part is saying. And we can have as many characters or letters as we want. Then at some point it has to contain a digit, at least one digit, between 09 and after that. Of course, it can contain any characters. Doesn't have to even contain any fetal 12, but it should have at least one digit. That's the pattern attribute. And I'm going to be talking about regular expressions nix. So don't worry, if you don't understand this, then if an error message is shown to a user, R12 be in control of what the browser shows to user. So let's just say Please enter a valid password. The password must begin with a letter and contain at least one digit. So now we've used the pattern attribute, we've used the title attribute. Finally, I want the required attribute because the password is a required field. Let's save this good our browser. And firstly, I just want to mention, I don't like creating rules in passwords without showing the users. So normally I would make it very explicit, just like we saw. If, let me show you here, if we go to MailChimp, this just gone a website quickly and we go sign up free, right? They've done it in a very nice way because under the password they've given you a lot of hints as to what the password requires. One lowercase, uppercase one number one special character, and eight characters minimum. So this is a very cool example and as you start typing, you have a very clear visual representation of what's going on and what's required. So in our case, we don't have that, so I don't like it, but I just wanted to show you these attributes and what they can do. So if firstly, I just typed one later and I click submit our title, our enemies it right, Please enter a valid password. The password must begin with a letter and contain at least one digit. How cool is that? Right? So now let's begin with a letter and we use a number, is just say the letter a and the number seven. How's it? And Wally, It's now click Send. And there we go. It allows us to submit the form if we just have one knee and a later but no number, whole lot of just random characters and click Send. Prevented from doing site. How cool, how cool student. But as I mentioned, what exactly is a regular expression? Well, before I move on in the course name, you just take a moment to give you a high-level overview of a regular expression. 5. Warning - the password type does nothing for security: Something I want you to bear in mind with this password track attribute, is that a it's been around since powerful for us, just an expression saying it's been around for a very, very long time. And secondly, this does nothing for security. All it does is it blurs out. That takes characters on the front end. When the user submits it via a GET request, it's going to be appended to the URL. So just betas in mind, the password itself does not help you with security. We have to implement other methods in order to make it better. Hope that's making sense. Let's jump back into the lecture. 6. What are regular expressions?: Let me start off this regular expression discussion with a famous quote from Jamie Lewinsky. He's just a famous program. And by the way, he said some people when confronted with a problem, think, I know, I'll use regular expressions, but now they have two problems. I guess what this is trying to say is that regular expressions are both terribly awkward and extremely useful at exactly the same time. They all could because they syntax is kind of cryptic. And the programming interface JavaScript provides us as kind of a little bit clumsy, but they are useful. They are a powerful tool for inspecting and processing strings. So properly understanding regular expressions will make you a more effective programmer. And that's why this course wouldn't be complete if I didn't just mentioned that at least at a high level. So what are they and how do they work? Well, firstly, a regular expression is just a way to create a new patents at the crux. That's all regular expression is. And RegEx forms part of the standard library of many programming languages, including Java and Python. And it's built into the syntax of others including pole and Ekman script. But unfortunately regular expression syntax very slightly across languages. The good news though, is that the core details are the same. Now let's take a look at how each of these different languages match and extract data using regular expressions. In Java, the string class has a method called matches, and it'll return true if it does match. Java also has a few helper classes, namely that Java util regex pattern helper, which helps to create the patterns. I've got a match, a function which is a helper for navigating and keeping the state of various matches. Python provides regular expressions to through the module and provides a way to avoid the double escaping by prefixing your string with an R for Ruby allows you to create a regular expression object but surrounding a pattern with forward slashes. This is known as a regular expression literal. By the way, PHP has a function called Craig match. And despite what the name sounds like, it's not a paternity test result function. That's especially if you're anything like me, JavaScript as what we really, really care about. And in JavaScript, and regular expression is a type of object. And we can create a regular expression in a few ways. It can either be constructed with the reg ex constructor or it can be written as a literal value by enclosing a pattern in forward slash characters, the same as in Ruby that we just saw. But let's look at this in a bit more detail and see how it works. Okay, well let's see both of these methods in more detail that see them in action. There we go. The first variable we define here as RegEx one. We've used the constructor, the rig constructor. And of course in the second case, we've literally just used the literal approach. But very importantly, Medea students, both of these regular expression objects represent the same pattern and a character followed by a character followed by a C character. Here we are defining a pattern. Got it, Okay, cool. You might be thinking we've created a pattern, and this pattern is an object. It's a regular expression object, but why does it need to be in an object? What's the benefit of that? Well, the main benefit of having it as an object is they put objects, we get a number of useful methods. And the simplest, one of the most useful methods is taste. And the taste is a method on the object provided to us by JavaScript. It's not something we've written ourselves. And if you pass this method a string, it's going to return a Boolean telling you whether the string contains the match of the pattern in your regular expression. Okay? Okay, I know it's just words on a screen. Let me jump over to Visual Studio Code and show you an example. Actions speak louder than a thousand words. So here we are. I've just got a JavaScript file open. I just happen to call it app.js. Now, let me just write a commentary. Let's say the user inputs daughter that we're saving into a variable called daughter. Okay, so let's just pretend this is a real life scenario. And we get the data from the form, okay, here we're just going to have a whole lot of characters and an a, b, c, right? And then we can have a whole lot of excess following that. So there we go. That's data that the user has typed in whatever form widget we're dealing with. And now I want to show you regex. So let's start off with method one. And this can be using the constructor function. Very simple and we've seen already how to do this. We're just going to define a variable called rejects one. We're going to use the new keyword in JavaScript. And they have a constructor function called rig expert regular expression. And what is it that we're going to create? What patent we want to create? The pattern we want to create is the character a followed by the character b, followed by the character c. Now what I want to do is I want to test whether our pattern is matched within the dots variable, whatever the user typed in the form or the widget. How can we do that? We'll all we need to do is call it taste function. They are told you about in lecture and in console logged out. And I don't want to go to the browser. So I went to use Crocker. So I'm going to start co-occur. That's how you spell it, Coca, on the current file. And if you've done a JavaScript courses, you'll know a lot about blocker. It's basically just a runtime JavaScript interpreter. And the case we can see the results of JavaScript in real time, very heady, and saves a lot of time. So here we just want to console log out the result. And here we're going to call our variable. And remember how I said that there's lots of properties admitted. The one that we want as taste and we wanting to test whether our daughter matches the ABC pattern. And here you can see that we being logged out true. So it passes the test. If for example, we didn't have an a, it's going to be false. So you can see how easy it is to work with RegEx. And method 2 is just as easy. We're going to be using the literal approach. This define a new variable called regex too. Yeah, we just need to use forward slashes, right? We don't need that. Construct a function, just a shortcut if you will. And again, we're going to define the pattern as a, followed by the character b, followed by the character c. And we can do exactly the same thing with console log. We call our regular expression. We have a method called test, and we wanted to test the daughter. And there we go. We literally have true. It's passed the test. If we put the B in front of the a, of course it's all going to be false. It has to be a followed by B, followed by c. This is starting to make more sense. I hope so. But you may be thinking, why did we need to use a regex in this example, Clyde, couldn't. We have just used JavaScript's index of method, for example, let me show you what I mean. It's a method three, using index of what is index off. Don't stress it's just a prototype on the string object in JavaScript, what's important to us is that it will return a negative one if the value is not found within the object. Let me show you what I mean. So what I wanna do is console log. I went to grab our string, which is daughter with defined it above. On this string, we have a method called index of ethnicity is provided to us by JavaScript. And wanting to test the string a, b, c. Here we returned the number seven because it's telling us where in that sequence of characters that pattern starts at. In other words, we've got seven x's before the ABC. Of course, if we don't have a, everything is going to return false and index of methods can return negative 1. Who I know we've covered a lot in a very short space of time, but let's jump back to the lecture. Finding out whether a string contains abc could just as well have been done with a call to index of. But drumroll. Regular expressions allow us to express more complicated patterns than just the one we looked at. Now, we saw when we were looking at Mailchimp, we've got uppercase, lowercase, we've got numbers minimum of eight characters, et cetera, et cetera. So with regex, we can really, really define the exact requirements we need. And we're going to be seeing more examples of this throughout the course. But for now, I just wanted to stop and give you a high-level overview of what a regular expression is. Hopefully, it's helped you. And I'll see you in the next lecture. 7. Hidden input type: We've looked at passwords. Now, I want to look at one that's a little bit confusing at first, and that is input of type hidden. Firstly, the hidden type is regarded as a text input field. And it's been around for a very, very long time since Power fell off the bus. And what's it used for? Why do we have it? It's used to create a form control that's invisible to the user. But don't let this fool you. The information in the hidden text input field is still sent to the server along with the rest of the form data. In other words, while the value is not displayed to the user in the page's content, it is still visible and can be edited using any browsers, Developer Tools, or fuel source functionality. Let me show you what I mean. Let's start off by creating a form. The action can just be blank. The method I want to define, I know the default gate, but let's just be explicit here. And now I want to create an input rights. And let's just do an input of type text. Very, very simple. And this can be either uses first-name. There we go. Nothing unusual about that. The next thing I want to do though, is I want to create a input with the type hidden. This is the first time we've used this. It's very, very exciting. And remember how I said it needs a name and it needs a value attributes. So the name is the variable name. Let's just say secret message, and let's give it a value. And the value here can just be Boone. Remember I just want to prove to you that we can still see that value even though the user can't. And finally, in order to submit this form, Let's just have an input with a type of submit. We don't even need a value. So there we go. Let's now expand the browser. Let's open up DevTools. Let's fill in the name for that one. It's click Submit. And look what's going to happen. Let's go to the Network tab. Let's click on the index file and look at what we see, wow, in the query string parameters. Or Firstly, we know it's a query string parameter because it's a GET request. We see the secret message of BU, that information was sent to the server and you can even see it in the URL bar. My point is, don't let the fact that it's hidden for you, it can still be viewed. You just have to know how to get there. So there we go. We can still see the value of the hidden input type, right? And because of that, we do not use it as a form of security bowling client. Why do we even have this type? Why do we use it? Well that Medea students as a very good question, and I can think of three high-level reasons why we use the type of hidden. Firstly, database reasons. One of the most common uses for the hidden inputs is to keep track of what database record needs to be updated. For example, when an edit form is submitted. And I'm going to be talking a little bit more about this soon. So that's all I'll say about databases here. Another reason why you might want to use it is if you want to submit a timestamp to a server stating when an order was placed, for example, because it's hidden, the user cannot see nor intentionally edit the value. It will never receive focus and a screen reader will also not notice it or read it either. So it's quite a common thing to use it to send a timestamp. And finally, although we can't rely on it for security at sulfur, we can use it in conjunction with say, security tokens. For example, hidden inputs could be used to store and submit security tokens or secrets for the purposes of improving website security. The basic ideas kind of simple users falling in a sense that a form, such as a form on the banking website to transfer money from one account to another. The secret they would be provided with, we proved that they are who they say they are, and that they are using the correct form to submit the transfer request. So there you go. Those are three reasons why you might want to use the input type of hidden. That's not redundant, It's not a useless type. Or our Clyde, I know why we might want to use the input type of hidden, but how do we use it? Because it's not as trivial as just writing input type hidden. That won't do much. In fact, that would do nothing. If you create this hidden input type, there are a few things you need. You need a name attribute. And remember what the name attribute is. Think of the name attribute as the variable name that you're going to be submitting to the server. When you write server code, you need a way to extract data, so you need to know what the variable name is, and that's what you set in the name attribute. And the second attribute, a very important attribute is the value attribute. The value of this attribute can be dynamically set via JavaScript. For example, if you're wanting to send a timestamp along to the server when a form is submitted, you can use JavaScript to grab the current timestamp, put it in there, and then at centers server. And I just want to mention, because this is hidden, we don't use a label with this hidden input type. It just wouldn't make sense to, right? Okey-dokey. Let's move on. 8. Using URLSearchParams API: I want to show you something really cool now before we move on. In fact, you can even think of this as a complete bonus lecture. Because what I wanna do is I want to show you how we can extract data from the URL and then displayed on the page, how cool would that be? And of course, we do this only once the user clicks on Submit. It's just quite interesting to know and it's quite fun. But in order to do this, we're going to have to use an interface. You can think of an interface has kind of an object that has a whole lot of properties and methods that we can use. And it's given to us by the web itself, by the browser itself. And the one we're going to be using in order to deal with query strings is called URL search ramps. That's an interface that's like an object. And like I mentioned, it just defines methods to work with the query string of a URL. And if we implement URL search params, we get returned to us an object that we can directly use in a for of loop. Since he turned worry, I'm going to show you exactly how it works. So here we go. Here's our example we did previously in Visual Studio Code. And this is our index file. What I want to do then is just, you know, you can see my directory has blank up and you got one file, index.html, but I want to create another HTML file. Now, let's just call it results. And that's where we want to display all of our results. So let's create a very, very simple HTML template. Within there. We can have a body. Here, we can have a div with ID of results. Right now we can just leave that blank. We can style it however we want. That's why we can have an ID. We can target it with CSS, style it nicely. But inside this div, that's where I want to display all of our results. So that's another reason why I want the ID day, because I want to target it with JavaScript then just to make our lives easier, why don't we just have a anchor tag and the neck and just riff, index dot HTML file. Very simple. And we can say back to four. Okay, how's it? And that's all I want in our HTML. But we need JavaScript, right? We need JavaScript, we need to target that div within it to access the URL search params ending, we need to display all of our cells. So the first thing I wanna do is I want to define our results. List, the place we want to put all of our results. And like I mentioned, I want to target that div with JavaScript. Get elements by ID. And the ID, we had a target results. And now this is we were going to be using the URL search. In order to use it, we need to use JavaScript's new keyword and URL search params. We don't have to write this method ourselves. This is purely straight out of the box given to us by the browser. It takes one argument and Ed is the URL parameter itself because we know and we submit our form with a GET request, everything is going to be a painted in the URL. So how did we get to that entire query string? What is the king of everything on a webpage? If you've done my DOM courses, you'll know it is the window object. And on the window object, we've got another property called location and Annette, we want to get what's in the search bar, the parameters in that search bar. There we go. That's pretty much it. But now remember what I said. We usually use the for each method or the fourth method to iterate through each one. Here I'm just going to use for each. And it's very, very simple. We're going to take its value and name. And I'm going to be using an error syntax. And here we go, we can literally display the entire results. So I want to grab our results list that we defined above. And a 12 attained the values. And I'm going to use template literals. If you don't know what these are, please check out my JavaScript course. Riots and we've got variables in here. We've got the name variable. And you guessed it. We've got the value variable. The rigor. And other thing I want to do then is possessors going to display all in one line. I want to have a break. So let's get our results list append. And yeah, I'm going to access our document. And now I want to create an element. An element I want to create is a BR break. How cool is this? Now in our index file, all we need to do is define an action. And of course, we wanted to share the results. So it makes sense. Save this. Let's go to our browser. Let's type Bali. Submit. How awesome is this? I have a lot of fun doing this. I hope you do too. And don't take what you've learned for granted. You really are learning a lot. And your photos would just be a good place for us to stop. And for me to show you how to extract information from the query string and display it to screen. And as you've just seen, we used the URL search params interface. And it's a pretty simple interface that takes one argument and that argument is the URL search perimeter itself. Basically all the name-value pairs that are submitted along with the form. And then we just loop through each name value pair, right? Molly, It's submit. And then each name and value pair is displayed to the screen. We created an empty div tag, and then we just put all our content with the net of very simple, but very, very cool. Anyways, that's enough of this topic. So let's move on. 9. Using hidden for databases: Welcome back to another cool lecture. And to remind you, we talking about the input where it's set to heaven. And in the previous lectures, we've seen that the three main uses for this input type, right? The main use is to use it to help you when it comes to database lookups. Specifically, a popular use of using input type hidden is to keep track of what database record needs to be updated. Okay, client, I get it, but how does this work? What does a typical workflow? And I've broken it down into three very broad categories. Step number one is the starting point. And here the user generally decides to edit some content. They have control over, such as a blog posts or product entry or they profile. And of course the user starts this whole process by clicking on an edit button of some sort. So that's the first step, very intuitive. Step number two is we, the database comes into the picture because the content to be edited has to be taken from somewhere, right? Has to be fetched from the database and loaded into an HTML form to allow the user to make changes. And the final step is pretty intuitive as well. After editing, the data is updated and when the user submits the form, the updated data is sent back to the server to be updated in the database. So the idea here is pretty simple. During Step 2, the idea of the record being updated is kept in a hidden input, right, in its value attribute. So it may look like this, for example. Make sense. And then we get on to step three. When the form is submitted, the IP is automatically sent back to the server with of course, the form and record content. And the ID is so important. But students, because it relates the site server-side component, know exactly which record in the database needs to be updated with the submitted data. So I thought out spin just this lecture explaining why it's useful from a database perspective. And I hope it's starting to make sense. I hope you can kind of get an intuitive feel for how you would use this input type. See you in the next lecture. 10. Using hidden for timestamps: I'm really enjoying this cup of coffee. Anyway, we've been talking about the hidden input type and its usefulness rant and when you might want to use it. And I did mention that one of the reasons why you might want to use it is to Cmd, for example, a timestamp to the server. And I don't know why you want the timestep. Okay. Maybe you went to timestamp because the time a user signs up as a member is important. What about if you're giving a spacial to someone? What to users who sign up before at a node midnight on the 12th of April, for example. What about if you only allow users to login at a certain time on these circumstances, you might want to submit a timestamp. So what we want to do is we want to use JavaScript's, okay, we want to use JavaScript to prevent the form submission until we get timestamp. We then want to put it into that hidden input field. And only then do we want the data submitted to the server. How do we do that? Well, this is just going to be a very quick example, very rudimentary, but it should hit that nail in the coffin. Hit the nail in the coffin. I don't know that's the right expression, but it's going to drive the point time. There we go. So let's get going. Let's cut up this simple example. But of course, we in HTML documents, we need a body in the body. Let's create a form. Action can just stay blank. Method, let's just say is gate on notice that the default, but I'm just being explicit. And let's give this form an ID of Maine. For the reason I'm giving it an ID here is because I'm going to be targeting the phone with JavaScript and I don't want to worry about styling. So let's just ask for the user's name. Input type, text. Name attribute can be saved to firstname. And we don't even need an ID in this example to save this. And that's what it looks like on the browser. Now, I want to have, I'll hidden input field, right? So let's do that. And puts on top hidden. The name can be timestamp, its ID can be hidden, and the venue isn't so important for us. Not bronchi could put random taste, but it's not gonna Meta, why is it not going to matter? It will replace the value of that input of type hidden with a timestamp using JavaScript. And you'll see that in a second. And finally, we need the ability for the user to submit the form. So let's just said button of type, submit. Nothing too difficult. Next step is I wanted to use JavaScript. If you've done my JavaScript course, you'll know that JavaScript's has to be read within the script tag and don't stress it just as a visual, visual. It's just a pwd to the browser that within the script tags we'll type in JavaScript. So now the browser knows, hey, this is JavaScript and the JavaScript interpreter will kick and say, Yeah, we go the script tag. The first thing I wanna do is I want to grab our form. So let's define a variable called main form. And yeah, we can access the document. We can get element by ID and we gave that form an ID. I think it was painful. They we got let me just extend this lucky. See that beta. Grab our main form. Now my deal students, every single time a submit button is clicked or praised by user, what happens on that form? That's right. A submit event gets fired every single time the user hits Return on the keyboard, clicks on a button with the type submit. A submit event is fired. So what I wanna do is I want to add an event listener. I went to listen for the submit event. And then when it happens, I want to do something and you and I know we went to grab the time and then put it into debt hidden input field. So how do we do that? Whole lates add an event listener for the submit event. That's what we want to do and it's very, very easy. All we have to use X's, our main form variable. On this. Javascript gives us an add event listener method rot out of the boss. We didn't have to type this and we listening for the submit event. And then I'm just going to use arrows and ticks, right? I'll function or ALA, Code always develop a say and business logic till the same thing. What's the first table? The first is this grab Allah, input the top hidden rock because we're going to be putting the timestamp in it. So let's grab at first. So let's say, Oh, let's define a variable hold hidden inputs just to be explicit. So you know what's going on. Here. We can access all document object and on the we can get element by ID. Element by ID. Did we give it an ID? We did with HIV? So there we go. We've got our hidden input field. Now. Le'ts. Up timestamp. And I don't really want to get into detail on the date object in JavaScript. I had a whole section on net, my JavaScript course, but needless to say, to cut a long story short days and JavaScript start at a certain time, and that time is first of January 1970. We had but it is what it is. So when we get a timestamp and we use JavaScript's date object, it gives us milliseconds since the epoch time 1974 example. So what I wanna do is I actually want the years just to show you a fun example. So why don't we set it up so we can find out how many years since 1970 we're at, but are not limited to using yours. You can literally do it to the millisecond. So how do we do it? Very easy. Firstly, I want to sit up minutes and everything's done in milliseconds by the way. So let's just convert everything to a minute. And then we put ours Is minutes times 60. Just check my logic. I think I'm right thing we've got days which is how is times 24. And then we've got use, which is in days times 365. And now I went to excess JavaScript state object. So let's just call our date object d. And we're going to use the constructor function. In order to do the neck, we use the new keyword in JavaScript. It's a very specific words saying we instantiating a new object, in this instance, a date object. So now that D variable is an object, okay, specifically it's a date object. And on the date object we have many properties and methods. One of them is gate. And remember, let me just put a comment here. Gates time for returns, milliseconds, seconds since 1970. Okay, so it's just gonna be one long random number. Random number, but in milliseconds. So that's if we've gotten up and we put that into our time variable. So what I wanna do is I wanted to create our time stamp in yours, and that's going to be equal to, I want to use the JavaScript math object again, I know this is a bit confusing. Don't worry. This is not the purpose of the lecture so as to kind of show you how we can use that hidden input type. And on this mass object, I want to access a method called ground. I just wanted to ground it. And of course we getting milliseconds and we dividing it by, by what, by US, we could do by days, bile is by minutes, doesn't matter. But in our case, let's do it. Yes. I think that's its final state, is to place this timestamp into the value attribute, all of our hidden input, the snaking saints. And I hope so I know I'm going fast. Again, don't get lost in all the detail. All I'm trying to show you is how to use it in a hidden input field. All we have to do now is we need to grab our hidden input variable remain. But if I scroll up, we grabbed, I'll hit an input element in HTML. We want to access its value attribute, and we want that venue attribute to be the timestamp in unison. And I think that's it. Students. Let's, let's go to our browser. Refresh. That's a tough one. And let's hit submit. What, how cools us know ways? This has been blown my mind, How cool is that? We can see because it's a GET request, pull out delta is appended to the URL and we've got a timestamp. And I'll timestamps he's 51 because it's made 51 years since 1970. Wow, How cool was that? So just a quick example to show you how it works. Obviously, you can tweak it to your needs. Maybe you want the second time, maybe you want the exact day. It's all available to you. But that's just one example why we can use the hidden input field to submit extra daughter to serve a daughter that the user doesn't need to see, hope it's making saints. See you in the next lecture. 11. Buttons and attributes: I am super amped about this lecture because now we're going to be getting into relatively advanced concepts. It's not hard code, but it's just the concepts around why we use one element over another. Because having a form with lots of input boxes and checkboxes and radio boxes and the ranges. It's great. But how does the user submit all the information? Well, that's way we need some type of submit. And right, and this lecture involves four steps and I'm going to go through each step individually because each staple bold on from each other. So let's start off right at the beginning. Why does the input element needs to have the ability to create buttons? Well, the answer, I'm sure as obvious, how does the user summit All the form information without one, you might be thinking, well, client, if they are on a laptop, they can hit the Enter key. And you are 100% correct. Let me show you. Here we go. We've got a very simple HTML form. All I've done is I've got an input of type text. And that's it. I've got a heaven even got a submit button. And if we go to the browser, this is what it looks like. Yeah, we got a simple input box, and it's very simple. Let's type Wally. And now if I hit Enter on the keyboard because I'm on a PC, the form does submit. You can see the URL. We put our variable name and we've got the value of falling. So we don't even need a submit button. Why even have one? Who? Before I jump ahead of myself, Let's jump back into the lecture. So there you go. We can just use the Enter key. I'm sure you agree with me this is not enough. We need a more functional, more formal way for users to submit the forms. Let's step 1. Step 1 is we need to have the ability for users to submit a form other than just hitting Enter on the keyboard rights. We've established that. That's the most simple. Let's move on to the next step of this lecture. And that is, how do we then add a button 24? As developers, we have a lot of flexibility and is not just one way to add a button to form. We have two main ways. And the two main ways are using the button element. And the other way is to use an input element. And both of these types, whether we use button or inputs, they behave the same way and they exhibit three types of attributes. The submit attribute, the reset attribute, and the baton attributes. Now instead of coding each one up and showing you, I've put it here in the slides so we can go through them one by one. So let's first look at this submit button, a submit button. And by Submit button, I mean when its type attribute is set to submit, this is what we are talking about and the submit type is the default value for the button. And it seems the forms daughter to the URL specified by the action attribute in the form element itself, it makes sense. And how does this look? Let's first look at the button element. We said it's type attribute to submit it as an example of code. What do you notice with that? Well, I'm sure you might have picked up that we adding HTML Rich Content within the patent element itself. So we can do cool things like bold text. So the result of this button is going to look like this with the word cool. Being bold. Isn't that pretty cool? Wow, that's cooler. So that's the button where it's type a city Submit. And as I mentioned, this is the default. Well, what does the input look like? Again, we sitting it's type attribute to submit. But look at this. We've got a value attributes. And in there, we can't perform rich formatting. We can't insert HTML. So the button in this case is going to look like this. But it's not gonna be as cool because they're cool is not bolded. Got it. Let's move on. So that's the submit button, that's the default. But we've also got this reset button. And I've mentioned in previous lectures, this just resets all of the form widgets do the default values. And from a UX point of view, this is considered bad practice. Why will the user may click it by mistake, right? So we should avoid using this type of button unless you really have a good reason to include one. And if you really want to use a reset, but just make sure you style the button very carefully. And even give the user a modal pop-up asking if they are sure they want to reset the entire form. But enough said on that, how does it look like? Well, let's first look at the button element. We setting its type attribute to reset. It's not submit anymore. Let's reset. So we can do something like this. And again, you'll notice that we can perform rich formatting. We can bold the word unfortunate, for example. That's what it looks like. Nothing surprising there is the, if we look at the input element, we said it's time to reset. Again. We put its content inside the venue attribute. And here we cannot insert HTML, so we just get a boring old button. Very similar to what we saw previously, right? In terms of design. And now let's look at the final attribute. We can have a button attribute. What's This is weird. So we have a button with a baton attribute. What does it do? Well, a click on a button does nothing. Rah, rah, nothing at all. And this may sound silly Medea students, but it's actually amazingly useful for building custom buttons because you can define a chosen functionality with JavaScript. Anyway, let's see what it looks like Again. Button and he always sitting it's type 2 button. There we go. Similar examples on the others. And as you can see, we can add HTML within the button. We can perform rich formatting. If we look at now the input, we said it's time to button. It's pretty much the same as all the other examples we've seen. It's just a boring, plain old pattern. Here we go. Let's just take a step back. Remember there are two ways we can add buttons to our form. We can use the button element, all the input element. And both of these, except three types of attributes which we've just looked at, submit, receipts and button. So there you go. Two ways to create a button. And before we move on, I just want to drive the point home. Button elements. You use HTML in a content. Remember we added the strong element inputs. On the other hand, they are empty. We use the value attribute and we have to insert a string. But you already know this. So let's move on to step two of this lecture. Now, I want to move on to step three. 12. Using buttons with new attributes: In step three is all about attributes, because with the arrival of HTML5, several new attributes have been edited. Two buttons. What attributes specifically where we've got form, action, forming, coding type four method form, novalidate and tall it. And these attributes define an override certain parameters pertaining how the form must be submitted. So these new attributes can be used, for example, to provide more than one Submit button in a form and make each of them perform a different type of submission. How cool me actually stop and show you an example. I want to look at a very cool example of using one of the newer HTML5 attributes and that is formed no validate. We have discussed this in nothing one of the lectures awhile back, I can remember talking about it, but I wanted to show you how we can use different submit buttons in a form that perform different things. Let me show you. So yeah, let's just have a form. We don't need an action. This just do a target for fun because we know how they are used, right? And here we can set this to blank, meaning that a new blank window will open when the response is returned to us. Here we go, Let's start building our fall. And as you know, a lot of my examples are just wrap each form widgets in a paragraph. So here let's ask for username information. And all I want is a input type of tastes. Very, very simple. We can say it and we don't need an ID. But what I do want to do is I want to create a pattern here. And remember the value of the pattern. Attribute is a regular expression. We've done this before. And they look kind of funky, right? So here I just want to specify that the user has to start off with the character and the username. I want to have as a minimum three characters and maximum 15. We resample. And if there's an error, Let's just customize the error message. A proper username must begin with a liter and be between three and 15 Degas. And to finish it off, Let's make this a required attribute. So let's go to the browser. Let's open it up with lifesaver. There we go. If we just try and submit this by hitting the return or enter key, we weren't allowed to do so. If the user just types two characters, we won't be allowed to do so. But if we do three hit Enter, the form was submitted and open in a new blank page. Congratulations, pretty intuitive. Just clear this. Let's go back to our code and let's continue. So that's the username. The only other thing I want to do here is I want another form widget, but here let's do password. Input of type, you guessed it, password, name can be password. We don't need an ID. And let's just put another patent for the sake of it. Why not? Here, we can just say, well, okay, we need letters, big or small. And we can have numbers 0 to nine. Okay? And again, this was certainly sequences between three and 15 characters. Long. Very simple. We can have title here. I don't want to spend time on the password needs to be between three and 15 characters long. And of course, let's say it required on here. So there we go. We've got our username and password. The final thing I wanna do is I want to have submit buttons on here, paragraph. Let's do input of type. Submit. Its value can be seen, but I want another one. I want another one. Input type of submit value can be seen without validating username or password. And this is where I want to use the form validate attributes, right? And is another attribute we should use, yeah, and that is for method. I want this to be submitted as a GET request. Okay? So it's quite cool. We can literally specify how we want the form data to be submitted with different buttons. How, how awesome. Here we are defining. We went no validation and we're going to specify the type as good. So if we go here, refresh, there are buttons. And let's try do this, right? So if a username as two characters and we try and send will be blocked from doing so. Same with password, will be blocked from doing so. But if we now click the second button right without validating username or password, we click that and it allows us to do sir. So there was a really cool example is that you can have different functionality with different buttons in a form. By using these cool, funky, new. There we go, Cool, cool example, wasn't it? But as they say, all good things come to an end. And we are at the final step of this lecture. And that is to quickly summarize the difference between using the submit type for Patton and input. Because as developers we have a choice. So which should we use? Well, firstly, both cause the forms daughter to be submitted to the server, right? We've seen that. But they are very important differences. And in fact, developers prefer to use the baton in most cases. And he has why? Firstly, the button can have content, whereas the input cannot a null element. While the button takes an input can be specified. You cannot add markup to the text or insert a picture, for example. So a button has a wider array of display options. Makes sense. Secondly, the button is more explicit and it's more readable. Input suggests that the control is editable, right? So it's kind of we're using input for a button and a net scenes using button is far more explicit in terms of the purpose it serves. Third law, the baton is easier to style in CSS. In fact, Firefox has a bike. You can't sit the line height of an input based button. It doesn't match other buttons and Firefox. That's just one example, by the way. And fourthly, the button is mock-up fringy. We can nest items, for example, icons inside of a button. You cannot do this with an input. And for all these reasons, most people, including myself, prefer to use a baton when we go to submit a form, a lecture, I told you this was going to be an awesome, awesome nature. And it's quite interesting content isn't this e-learning or not? But anyway, let me not hop on this because I'm so excited about this. It's continuing with a lot more to learn. See you in the next lecture. 13. Different button types: This is just something I coded up that I think is pretty cool. Like it just drives the point home. It's like hitting the nail on the coffin. And it would be really cool if you try to do this yourself. But let me explain what I did first up for hitting, defining the type and buttons is important. That's the hitting at the top. And I've got kind of crucifixion. Two main sections to one is a form. And can you see I've used the field sit element to create a cool dotted pink border. And yes, I used the legend to give it a heading. This is so I've used fields setup, used legendary. He's all before. And I wrap this entire block within a form. And you can see I've got an input Bay. It's actually just of type text. And then I've included different buttons at the bottom, just with different stylings and more importantly, different types. I've got Submit, I've got button, I've got receipt. And then I just didn't define a type. I just left that blank. In other words, it's got no type, sets the one-block. Then I did the same buttons, but I did it outside of a form. I just wanted to prove to you that when it's outside of form, the types do nothing. They only work. They are only relevant when it comes to forms. And what do I want to show you here? Well, every time a submit event is fired on the form, I want to change the background color. Okay. For other purposes, I want nothing else to happen. So let's see this in action. If a user clicks a button with types of met in a form, what's going to happen? 100 percent correct. A submit event is going to get fired and every time the user clicks this, but in the background, color is going to change. How awesome. The next type is type button. And remember what this does. It's kind of silly in one way because it does nothing, right? If the user clicks it does nothing. And this means the background color won't change because no submit event has been fired. But just because it does, nothing doesn't mean it's useless. As I mentioned, we often use JavaScript to customize what action we want to take place. So it does have its place. Next, we've got type receipt, and if we just click type reset now we know submit event doesn't get fired. But that's why I wanted this input here. Because I wanted to show you if the user types in their name, Bali, for example, hits type receipt, all form widgets will get reset to the default values. So that's all the type reset does. It doesn't submit the form. And then finally, we've got nothing. If we don't specify any type, what happens. Well, if you've been paying attention, you will remember that the default type is submit. So if we specify nothing, we would expect a submit event to still be fired because it's the same as type being saved to submit. The user. Clicks that. There we go. We get different background colors. How cool. Okay, so that's the first thing I wanted to show you. Now if we have the exact same buttons, but outside of a form, nothing happens. These buttons are useless. They only work inside of a form. In fact, if we type Wall-E here and click on type reset out the form, nothing happens, it doesn't reset. So all these attributes only work inside of forms. That's an important point. But anyway, this was kind of a cool little example that I love coding up. I'll provide the code for you that you can download and go through it. But try do it yourself. You know, it's a lot of fun doing these things. You can see how much power you have just with plain CSS, HTML, and a bit of JavaScript. It really, really is cool. And just in case you're wondering how seeded up, I'll just briefly go over it in like 30 seconds. So here we go. Here's my file. We've got an HTML file, right? No HDR. And then adjust references, buttons dot CSS file and has just contains all my CSS. So I won't get into that. But it's pretty straightforward stuff. Then I've got our hitting in its own div wrapper. Okay, that's that top heading. Defining the type and buttons is important. This just refreshes is our default styling. First section is in a wrapper, and so on the bottom three sections of our code, we've got another div of cross-reference, another div class of wrapper. And yes, the final section is in its own div class of wrapper. And the reason I did that was we putting this cool little funky border with some box shadows day in each section. So it just makes it easy to stop. That's what I did. Of course, the first wrapper we put within this form elements, right, with all those buttons in a form elements. Then next set of buttons are not in a form element. We've got a field set, we've got a legend, but it's not wrapped within a form. And then finally we've got this paragraph at the bottom. But more importantly, we've got this JavaScript and it's a very, very simple script. All we do is we grab our forms and it's very easy to grab our form of only got one form on the page. So all we need to do is look at our DOM. In other words, we grab the document on the we can look for a property called forms, which returns a collection to us and we just want the first form. There is in fact the only form, the years, which is why we have 0. Okay? Then we want to add an event listener called submit. And the first thing we wanna do is we want to use the JavaScripts prevent default method because the default is for the browser to refresh the page. We don't want that to happen. Okay, So the first thing is we prevent the default and then we execute a function called change background or change BG. And that's very, very simple. All we do is we execute a function where we using math random numbers to generate a hexadecimal value, which HTML uses to determine a color. Very, very simple. In fact, I can even console the console, log this random picks Valley art and you can see it. So it's got our browser. Inspect the page, go to the console, click on submit, and there is the hex value. And each hex value is corresponding to an HTML color. So it's already doing a very, very simple nets, nets about it. Medea students, very high level, I will provide this code for you, play around with it. But before you do try and recreate it, you rarely will learn the most deadly. Hope you having fun, and I'll see you shortly. 14. Checkable items: Welcome back. Medea students who are motivated by having coffee or Ebola, whatever keeps you motivated. Because we have to keep marching on, is a lot to cover. And to remind you, we are discussing the original input types that have been around for a very long time. And the next sake of input types on Learn as checkable items will. Firstly, what are very good question? These are just controls whose state you can change by clicking on them. And they are two kinds of checkable items that checkbox and the radio button. We're going to be looking at examples shortly as to the differences between these. But importantly, both use the chick attributed to indicate whether the widget is checked by default or not. Let me quickly show you an example. Here we are. I want to show you a very quick example of checkable items by using both a checkbox and a radio button. That's going to be super, super quick. So let's just create a form. Action can just be blank. And now let's just deal with sweet. Now let's have an input here of type, checkbox, checkbox. Here we go. It's name can be item. Its default value can be changed. In that case, that's the one. And then we've got veggies. Yeah, let's just put a radio button. You know, we're not going to be submitting things to server solutions have type radio in and of course we need a submit button, don't worry. And its value can be submitted if we open this up of live server. Here you go, you can see that the default is checked for the sweets for the checkbox. If we take off the checkbox, we can put it on the radio. And there you go. So you can really see it as a visual difference between a checkbox and a radio button. And a few things with noting one, if we go and submit this form now, nothing is going to be submitted. Y will firstly, suites is not checked. And although the radio button is checked, we haven't defined a name or value attribute for the radio button heavy. If we go name and we define that as veggies. And its value can be. If we now submit it, it gets submitted to the server. If we toggle sweets or we check suites, submit that suites does get submitted to the server. But it's a weird thing. It's submitted to the servers item and its value is on rights because we've named this sweet item, item. But don't panic, I'm going to be explaining exactly why it's default values on and what these all mean. Shortly, I just wanted to give you a quick, quick intro into checkable items. Let's hop back into the lecture. Stego, we used that checked attribute and you saw very briefly anyway, the differences between type of radio and a type of checkbox. But we're going to be getting into more details shortly. For now. They just a few more things I want to say about checkable items in general. Firstly, it's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets. Once the form is submitted, all widgets that have a name attribute is sent to the server even if no value has been filled out. But in the case of checkable items, the values are only sent if they are checked. That's important. If they are not checked, nothing ascent, not even the name. That's when a form is submitted. What seemed isn't the check state because it doesn't matter, does it? But the name value pair. But anyways, the bottom line is that the state of the checkable items decides whether the controls value should be Saint with the form data. So just remember that control is submitted only if it's checked. So this is a huge distinguishing feature of checkable items. Well, let's move on. Let's checkable items. And remember how I said the two types. Let's write checkboxes and radio buttons. So these are the two I want to discuss next. 15. More about the checkbox: And firstly, I want to look at the checkboxes. And to remind you, we're looking at the input element. We sitting it's type attribute to check box. And what does a checkbox do? Well, very simply, it allows you to select single values for submission in a form. And because of the on-off nature of a checkbox, it's either on note off. The checkbox is considered a toggle button. This just means many developers, including muscles and designers, expand on the default checkbox styling to create buttons that look like toggle switches. And in fact, we're going to have a challenge coming up where I want to design our own toggle button. It's going to be really, really epic. And we've already seen that including the checked attribute makes it checked automatically when the page loads. Another thing to note is that any checkboxes and radio buttons, in fact, with the checked attribute on load will match the default pseudo-class even if they are later unchecked. And when an item gets checked, that item is going to match that kicked pseudo-class. And this is what's really cool with these type of widgets. We've got this checked class, the toggles on and off every time a user selects it, let me hop over to Visual Studio Code and show you. I want to show you a very quick example of chicks and how we can use this kind of attributes. It's really, really useful. This is going to be a very simple example. I'm not even going to put it in HTML takes on a very bad practice, but it's going to be super, super quick. Okay, we want to create an input, but this time with type of checkbox, name can just be named. Id can be named. And I want this to be checked by default. If we save this and open it up in the live server, this is what it looks like, right? And what I want to show you is actually want to look at this in the console. Let's grab it and console log its properties out to the console. And let's include a script tags because we're going to be writing JavaScript, we're going to define a variable and I want to grab that checkbox. And all we're gonna do is we're gonna grab that document object on the, we can use the method querySelector. And what are, what will I want the inputs and I want an input with a type attribute To checkbox. That's all I wanted to. Really, really simple. And then I'm going to console, which is different to console log. And wanting to do it out because that gives us kind of adjacent tree visual representation of the actual element and its console, the outer checkbox. So let's go back to our browser. Let's refresh the page. And there we go. We've literally got this in the console. And what's interesting here, k is we've got a whole lot of properties methods. And the first thing I want to show you is that when it's checked, remember I said the default pseudo-class acylated. Well there it is. Default checked is true. So that's the first thing I wanted to show you. The second thing I want to show you is this checked state and that it toggles on and off the heart cannot show you that wall. Let me write a comment here. Let's see the checked state being told. But the other thing I want to show you quickly, if I just go here, search for a checked. Hey, we scroll further down. We can see that the Chico State is also true. Energetic state is going to be toggling off and on. And that's what I want to show you now. I want to show you that in action. Okay, So let's go back to our code. In order to do this, I'm going to be using an EventListener, and I've discussed this at length in my dorm courses. Uh, please check it out if you're interested, that you don't have to. And if you know it, that's great. So all I want to do is grab our checkbox, add an event listener to it. And what is the event list now and listen to will every time a user toggles a checkbox, the change in faint is fired by the browser, by the DOM. And when that happens, I want to execute a function. All I wanna do right now is I want to console log out to the screen, the checkbox checked state. And this is all I wanna do. I want to listen for change event. When the change event is fired, I want us to see it's checked state. So if we go to the browser and we start toggling this, why is it not working? Why is this not working? Should work? Let me refresh the page. Earlier. I don't know why. I just needed to refresh. But every time we toggle this checkbox, we can see the check state. Chicks data is true and it's false when it's off. All I did was I grabbed this checkbox and I went into it's checked state and it's all added. Whereas the checkbox checked. There we go. That's all I did is I grabbed the checked property and I'm console logging net to the screen. How awesome, How awesome is that? That's all I wanted to show you about the default pseudo-class and net checked class. And it's really cool because we can target these things and install them in certain ways. But let's hop back to the lecture before I start juggling on for too long. How cool is that? So there we go. We're looking at input of type checkbox. And now I want to talk about submitting checkbox. What happens when you submit a checkbox? Well, we know that formed daughter is always sent to the server as name-value pairs make sense. So with a checkbox, if we have a name and a value, those will be sent to the server. This example here has a name of Accept and its value is T's and C's. And what about the value or the value is not so important. And in fact, it's optional because it's never seen client-side and its default value when the checkbox is checked is on. All that we care about is that it's on, not necessarily what the value is. For instance, let's say the user submits this form. We know its name attribute is except. So the server's gonna get a name value pair, Let's say values defined as T's and C's. It's going to be sent to the server like this as a name value pair. If we don't define value, that's going to be sent as except on. And in both of these instances, what's important to us is that it's been checked and the user has accepted. We've got T's and C's or on, doesn't really matter. And that's why the value attribute is optional and often ignored. Have you got? I hope so. You might be thinking, well what happens if nothing is actually checked? Well, if a checkboxes unchecked and the form is submitted, no value is going to be submitted to the server. If it was, it would kind of be like this name and change. And the server can't put a value to unchecked, and so the value is not even submitted to the server at all. All inclined, How do I submit a default validator server for one-to-one? If you want to do that, then you can always revert back to the hidden input type. Remember that we discussed that a while back. But anyway enough blubber, blubber. Let me hop over to Visual Studio Code and let's just look at this checkbox in more detail. That's just cut up a very simple checkbox. Man, I loved this coffee that is so delicious. I wish I could be having some of you. That's good anyway. Yes. Check boxes. Let me show you a quick example of building up some checkboxes. So yeah, we are in Visual Studio code, blank file. As usual. We can set up HTML. Within here. We can set up a body. In the body, you guessed it. We want to wrap everything with enough form. And we're gonna do a very quick example here. All I want to do is I want to create an input in this type. You guessed it with type checkbox. Let's save this. Let's just open Live Server. And let's put it side-by-side. So you can see what's going on. So you can see already in the browser it's visually displayed that square box. And visually we know that that is a checkbox versus a radio button. Let me just zoom in a bit more. They got better. And the browser automatically applies these default styling stewards when it's checked lunch, it's pretty straightforward, pretty intuitive. Now, normally with checkboxes you have more than one, right? So I don't know. Let's just have a paragraph saying, choose your favorite food. Save that. There we go. Now with checkboxes, as I mentioned, we don't need a value attribute, but the name attribute is extremely important. So let's have a food year of meat. Don't need an ID. We're not stealing anything now. We get a future boxes, ones meet one's sweet ones, veggies. And then of course we can have a button with typos. So if we look at this, there we go. We've got three check boxes, right? And what's different to radio button is we can select all three at once. This is put a Breakout button, and of course we usually one taste. So this will be meet, break it up. This can be sweets. And we can implement the break. You guessed it. How does it look? For another break? There? There we go. We've got capitalise sweets and we'll thing just to make a consistent the gut. You can see how quick and easy it is to great checkboxes, rats. And if we just select Meet and sweets and we click Submit. Look at the browser. This is what I wanted to prove to you that we don't need a value attribute. We know that meet and sweets were selected. And the mere fact that we've checked that checkbox tells us its own tells us it's selected. And you can see what's a painted in the URL is at MITS is assigned the value of on in suites is assigned the value of on debts enough. I mean, we could put a value attribute and yeah, but it really doesn't do much. We could say the value is seven. How's it as an example? And we could put this every way. I'm just gonna show you that really is meaningless. If we now refresh the page and we just like veggies and we click, we've got VGS and it's assigned the value of fair food, but it doesn't really matter. We could just excluded altogether. And of course, Yeah, if we click on the text itself, it does nothing. And that's because we haven't read these in a, that's right in a label. So what we could do if you want it to be sneaky and we could do an inline. We could just take the entire inputs. We could achieve. There we go. And I've just done it with meats and awfully thick meets obviously that chicken box toggles on and off. How cool. Anyway, very, very quick example to show you how easy it is to create a checkbox, how intuitive it is. Let's hop back into the lecture. Who accesses? So, so cool. Now there's one final comment I want to make. A net is checkboxes are similar to radio buttons, but they're not the same. Don't get confused. Okay. We've just been focusing on checkboxes, not radio buttons, which brings me to our next topic. And that is radio buttons. 16. Checked pseudo class: Yes, it back, back, back. I may use this fun, this is fun. Welcome back. Man had an elaborate a joseph getting really hot. And I've got a cup of coffee Thrun front of the initial yet I'm not playing games here. This is for real, for real. Look how good that looks. Senior hand Fauci put a heavy or biscuit with your coffee too. Eager. All right, how are we having fun? And this is what life is about 20 to enjoy what we do. So you know what I wanna do in this lecture? What I wanna do right now, as you know, we've been talking about the checkable items and I mentioned that there's this state. In fact, it's a cheat pseudo-class. And what that means is Econ visually really see it in the DOM. But it's the day and we allowed to target that with the CSS and sign up buttons or checkable buttons. Depending on their check status, really, really useful is something you really should know about. And I thought, you know, we couldn't move on. But I want to show you how that changes pseudo-class works. So let's cut a very recent looks awful. Man. That's going to address, alright, so let's create an HTML document. You know what's actually to switches musicals. Otherwise, I'm just going to keep going. I'm just gonna keep going. All right, Let's grades in HTML documents and all other stuff. And within HTML, in the head section where you learn intuit our CSS styles for now, let's just leave a blank course. We need a body and inner body. I want to create a form. And you know, in order to create a form, we use what X writes the form elements. We don't need an action here. We are not submitting this to server just yet. We'll see an example later in this course. And it was form, I want to create new guests. It's an input with the type of checkbox and it's name can just be through an ID, can just be example, doesn't really matter him. And then I want to have a label for this checkbox because I'm going to show you how we can target the pseudo-class to style it label. It's going to be really cool. So you know how labels work. The fall has to match the ID of the input we want to link it to. So here we gave the example to the input. And we can just say this is a pseudo-class. That's what we're doing. The other thing I want you to know is that this cheek to pseudo-class does not apply to all input types. For example, it's not relevant for an input of type text. So let me prove that two sets have two breaks here and here. Then let's have an input this time with type takes. Its name can be bought and its ID can be example 2. Again, I want to label its four has to match the ID of the input we want to link it to. In this case, it's Example 2. And all I want to say here is this is a text box. And then I want to just emphasize again that the text box will be ignored because it never received the state. Or I've, let's see what this looks like. Let's go to Live Server or permanent. Say I got nothing spatial and when we check this checkbox, nothing happens. Can you see that there's no visual difference? Police, we get the browser styles that box and tick. But other than that, nothing happens especially to their label or aren't and oversees the same with a text box, nothing happens. How can we target that checked pseudo-class in order to style this? So when a user toggles checkable item, he or she is made visually away that that's happening just adds a bit of zed to a form. So how did we do that? Well, let's go to coding editor and start styling this up. You know what, let me have it signed. Synthesized is always quite nice. Then you can see what's going on as we go. The first thing I want to style paragraph, flexibility and big. So let's just say or 0.7 m. It's better. And let's change the color. I never like black. Excuse me. Now sip of coffee. That's good. Okay. Let's keep going. So that's our paragraph done. Now, uh, don't wanna do what I wanted to target that label. There are many ways to do it. A cooling is we first target our input element, but now we can specify its type in CSS. And we know we want type of checkbox. We don't have to do this, but I just want to share a lemony ways to do something when it comes to coding. So now we've got the input type of checkbox. And then what I wanna do is immediately select the next element that is a label. That's what that means. And then we want to style it color. Let's try triple C. What does it look like? There you go, It's kind of grade outright. And the inlets have font-style. This is make it italic. Yeah, I think it's starting to come on. Now I want to target this pseudo-class and you'll see how easy it is. And we could target the input again with type equals checkbox for example. And in target the pseudo-class like this. But remember, I want to show you that the pseudo-class doesn't apply to add inputs. So actually what I wanna do is I want to grab all our inputs within the page and I want to target and Vi Sudo. That's what I'm wanting to do. And specifically, again, I'm wanting to style that label. That's exactly what I'm trying to do. Yeah. And how should we start with label on his cheek? We could do what ever you want. This is not a course on CSS, but I want you to understand how you can use it in order to style it according to your needs. So I'm just gonna do a quick amnesty. And on the topic of quick and nasty, Let's do hot pink house ads. Friday, and I'll even prove it to you if I toggle this checkable item, what's going to happen? Well, how cool is that? You can really see we're targeting the pseudo-class wow, camera. It's very easy. It's that easy. I'll just apply fuel styling, styling just so you can get a few ideas. You know, we see it above the font-style about teleco. Why did we sit the font style now just a normal will revert back to normal. We can see the box shadow property here. One, One. What color? Well, we're on the topic of hot pink on. So these are box-shadow. What else can we put? Maybe we want some padding. First, a bit of padding. Who knows? And let us see what this looks like. So I'm going to check it right now. It is so, so intuitive, it's so, so much fun. And he's just a few ideas. Really what I wanted to prove to you here is that a, it is super easy to target that chink pseudo class. And secondly, I wanted you to know that nothing's happening to this text box. We can still talk Wall-E here. Nothing happens. It doesn't get the cheek to state. It's not a button, right? It's not a checkable item. So it makes intuitive since it only applies to checkable items, radio buttons and checkboxes. Got it. Well, then what are we waiting for? This we wanted to make state Jeff told me having fun, but audios. 17. Radio buttons: What our radio button, well, of course, it's where we sit. The type of the input to radio. And radio buttons are similar to check boxes, but with an important distinction. Radio buttons are grouped into a set which only allows one radio button to be selected at any given time. This is different to checkboxes rights, because checkboxes allow us to turn single values on an off home, even many we want. Remember that that's a very big distinguishing difference. Cools. We know that radio buttons or generally defined in groups. But how do we define a group? That's easy. If they share the same value for the name attribute, they will be in the same group. Having the same value for the name attribute means that radio buttons will be tied together. They will be considered to be in the same group of buttons. And remember, the distinguishing feature of a radio button is that only one radio button in a group can be selected at any given time. And this means that when one of them is checked, all the others automatically get unchecked when the form is sent. Only the value of the checked radio button, ST. And what happens, Clyde, if none of them are Chet? Well, in that case, the whole pool of radio buttons is considered to be in an unknown state and no value is sync with the form. It's very intuitive. But once one of the radio buttons in the same named group of buttons is checked, then it's kinda weird because it's not possible for the user to revert back. In other words, it's not possible for the user to uncheck all of the buttons without resetting the four. Who? Anna, Anna, we're going through a lot. What else can I say about putting a radio button? Well, unlike a checkbox, the value attribute is very important for radio buttons. Remember with the checkbox, we're going to concern with the value attribute where we, we were more concerned whether it was toggled on or off radio buttons of very, very different. And it's different because the selected option is sent to the server who needs the value attribute to know which option was selected. Because remember the names. All the radio buttons in a group are the same. The only distinguishing feature is the value attribute and net wide, so important, right, so let's look at this example where we sit the type of radio and we've got a name here, and we've assigned the name to fav food. And if we emit the value attribute, the submitted form assigns the value of on to the entire group. So it's kind of weird and meaningless. Fair Food is going to be on. And if you have a few different radios within the group, that's not going to tell us anything as it, it's not going to tell us what the favorite food is. It's just going to say that one of them was selected. So this is exactly why the value attribute needs to be unique for each radio button within a group. This is different to the name attribute for a set of radio buttons that belong to the same group. All of them should have the same value in the name attribute. The next point I wanna make is that all radio buttons in a group must be in the same document and belong to the same form. All belong to no form at all. In other words, placing radio buttons in different forms of documents will break the grouping even if they do have the same name value. Let's quickly hop over to Visual Studio Code and have a quick look at coding up some radio buttons. We've seen an example of using checkboxes. Here's a quick one. Using a radio button. We don't need an action because we're not going to be submitting this to real server. And let's create our form. Let's wrap each widget within a paragraph tag. And here we're going to pretend we're doing a booking sites for a hotel maybe, who knows? So here we go, select the room. Let's just break it up here. Let's have a label and we all know what this label does. And I'm going to implicitly uses label, right, by wrapping in our input within it. So yeah, we've got an inputs and here I want a type of radio. It's name can be room type. We don't need an ID. I'm not going to be starting in a supper. Css. One can be budgets. And we can say, Yeah, we're trying to find a budget, one bedroom house. It let me just zoom out a bit. So it's on one line that's copy this label. Three more times. They regard we can have a budget type that the standard room type. And you guessed it, the executive room type. This can be a standard. Sweet. And this can be the pink house. Firstly, I want you to notice that the name attribute is the same and it has to be the same to group all these radio buttons. This is what's telling the browser that these are all part of the same group and not will only allow a user to select one. And for example, when the user comes onto a site, let's say we want one of these to be checked by default, the standard, sweet. The next thing I want you to notice the set, the value attributes have to be unique when it comes to radio buttons, they vitally important because it tells us when it's submitted to the server which item has been selected and that's why they have to be unique. Next, just to mix things up, let's have an input of type submit will what do the beta-1, and that is a button hole actually, before I even do that, let's wrap our Submit buttons in a paragraph in all the styling looks the same. Here we can have a button with type submit and there can be book now. And then we can have an inputs with type receipts. How's it starts again? Let's save this. Let's open it up with Live Server. And how cool is this? Yeah, we know what's actually want to break these up, but annoying having them write days so we can put a break and a break. There we go. We are selecting a room, budget, standard or penthouse. And what's cool is that these are group now the user can only toggle one at a time. So let's do paint house, click on book. Now, we can see that the room type has been set to executive synthase server. How awesome is that? Of course, if the user has done a whole lot in the foreman wants to start again. We've made it clear that he's going to be starting again, net defaults back to the original full suggest something different feeder look at, now you kinda know what radio buttons do, how they grouped. It's not that difficult or told you. Her height and her having lot of fun. So there we go. Medea students, we've done an incredible amount in a short space of time. We've spoken about checkable items, and in particular, we've spoken about checkboxes, which allow you to toggle something on and off however many you want. And radio buttons and radio buttons belonging to the same group only allow you to select one in the group, no more than one. And this concludes the lecture on checkable items. 18. Checkbox challenge - intro: Yeah, man, this stuff is so fun. Hope you enjoyed the course so far. If you apply easily, be a good review. I really appreciate it. Thanks for your support, Thanks for sticking with me. Now, I want to give you a little challenge. And later on in this course, I'm dedicating an entire section talking about at least at a high level anyway, Cc styling on ports. So it's difficult because in one part of me wants to do CSS styling in custom toggles and buttons when we get there. But the other part of me thinks we talking about checkboxes. So why not just dive into some CSS now and just show you how to customize checkboxes. And before I show you the solution, that's always good for you to try and figure it out on your own. So what do I want you to do? Well, it's just refresh this page. This is the default landing page that I want you to create. Firstly, I want us to have default checkboxes. The default looks pretty ugly as you can see. I've just got three check boxes, 1, 2, 3, and I want the first one checked by default. So what do you remember how to do that? That's an attribute. That's pretty easy. So that's a default checkboxes. Obviously, with checkboxes, we can select all three at once. We can do all three. Pretty intuitive. But often when it comes to forms, you want to customize pretty much everything right? You want to make it more intuitive to a user. And this is how I've designed the custom checkboxes. I've got four. You could have said three, but we've got four. Again. I want the first one chick by default, but you can see how cool and Judah, but as you know, it just feels nicer. Files the user much rather want to click these ones then these horrible default ones and give it a bash. I mean, just as a hint, when we have two style custom checkboxes, you have to remove the default line from browser. So you see those little browser, there's little squeeze. We have to actually hide that entirely. So you can display none. You can set its width and height to 0. And then we have to start from scratch. We just have to create our own little checkbox button. And here you can see I've just got a square and then we just apply a few styles to pseudo-classes like hover. And of course, when it's checked, we want to apply tick and an asterisk there. So give it a go. And then in the next lecture of percuss upwards, I'm looking forward to it. See enough. 19. Checkbox challenge - solution: All right, So here we are. Blank Visual Studio Code open after it's created a folder called taste and nothing's in here. Okay, so let's start by just creating our HTML. This is very, very easy, the easiest starting point. Okay, so what do we wanna do? Well, yes, we want an HTML template. Within our HTML, we want to hit section, in section. And within here, let's just link to our CSS file, right? Yeah, let's call it styles.css. We haven't created at it. The goat. We can just leave it empty for now. But we know it's there. Then I want to set up our body. And within our body, I want us to separate the default checkboxes to the custom checkboxes. So firstly, default check boxes styling applied by the browser, right? This is not as how do we do that? Well, let's just record an H1 tags. And we can call this default checkboxes. Pretty straightforward. These are H1. Now we can actually sit up our check boxes themselves. I want to wrap the labels in line, just click up when we don't need the four attributes. I do want to apply a class of default. And I'm doing this week and later style these. This can be our options. Routers can be option number one. And of course, we need an input of type checkbox. We've got me the name or ID because we are applying default styling. So let's just have a look at this with lifesaver Live Server. Then we go default checkboxes and is the one you toggle that off and on. But remember what I said, I wanted the first one to be checked by default. How do we do that? I gave you a clue. I said that there is an attribute. That's right, It's called the attributes. We do this back to the browser, refresh. We can see its shape. And this chick attribute, by the way, is a boolean attribute. It's either there or it's not certain. We could do this. That does the same thing, but we don't have to. And I'm always a fan of writing lists if we can get away with it. And here we can. So this is literally how I would set it up and we just want a few more degrees. Let's just copy this label with the checkbox. This one is number two. And you guessed it, that's number 3. It safe go to the browser. But of course, we don't want to check the attribute on all of them. There we go. Let's go to the browser. And here we go. Awesome is this. But you will notice in the assignment, I didn't have the chick items running horizontally that I, they were below each other. So how can we do that? Very, very simple, CSS, denoted as it comes down to the display property in CSS. We don't want these displayed in line next to each other. We want them displayed as a block, meaning each item, each element we want to take up an entire block on the patch. So all we have to do is go to our editor, go to the CSS file, target, the default clause. Remember, HTML. We've given each label a class of default. Wondering here, and we want to display block, we save this, go back to our browser now how it goes AS so this is the first part of the solution. Now I went to start styling our custom checkboxes. Let's get into it. In order to do that, let's go to our editor and it's time to style our custom checkboxes. Custom checkboxes. And the HTML is going to be very, very simple. What I want to do well firstly, let's set up a header called custom checkboxes. There we go. And now I want to, of course, include a label. And this time, instead of giving it a class of default, I want to give it a class of customer because we're going to apply custom CSS styling to this. Of course, in yeah, I want to include our input of type checkbox. We should have a name that you know what? For this example, we don't need a name because I'm not concerned about submitting a test server. And here we do want the default to be shaped rock because this is the very first one. And of course we need the number one before I copy and paste this block of code for the others, this one other element I want to put J and I'm going to be putting a span element. The reason I'm doing that is remember, I gave you a bit of a clue, an introduction to this kind of challenge. And it was in order to create our own custom checkboxes, we have to remove the styling that the browser automatically applies to a checkbox. And that means we have to create a new style. And I'm going to create that new style in a new element. We could have used a div element, we could have used any limit we wanted. I'm just using a span elements and you'll see how quick shortly, but I just wanted to give you the heads up. These are input and as I just mentioned on what to include. N elements. We don't have to have any content inside the span. We're going to be creating this content entirely with CSS. I just want to give it a clause so we can target the possesses and let's give it a class of check-mark. How's it? And this Medea students, there's a brilliant time to copy and paste, right? I think we did for the challenge video. And in practices would be option three options. And we don't need the checked attribute on these. Save this, go to the browser Rao and they, we go, you can see that we're getting them, okay, But now it's time to get our CSS file and spares this up. We're almost done. So please, please stick with me and can be quite daunting all of this. It can get quite confusing. But that's what I'm here for. Our HTML stuff. And all we have to do now is we have to get our styles.css file. And you know what, let me put them side-by-side and you can kind of see the effects as we go along. First thing I want to do is let's change this H1 color and to RGB 136. There we go. Nice maroon color. How's it? First tip is, is I want to hide the browsers ugly default checkboxes. Okay, so let's do that. We're going to target the custom class. And we want to target the input. And we want to see the type to 0 and its width. We save that and you can see those checkboxes, those little squares have disappeared. That's what we want. Let me put a comment yeah, to see, you know, what's going on. I the browsers, ugly. Default, checkbox. That's what we've done. And right now, it's pointless. You know, it's, it's useless. We can't use it, but that's okay. We're going to design our own one now, and let's start our custom checkbox styling. Okay, what do we want? Well, we want to target the custom class, right? And if I go to index file, you can see we've put that custom class on every single label. Okay, So that's what we're doing, we targeting their custom class now, firstly, display should be blocked. So they go the NYC each other to supply some padding. Padding left 35 pixels. The reason I'm giving padding lift is so that we can create our custom checkbox to the lift drag. And you can see that they are pretty much on top of each other. So let's apply a margin to the bottom of each item. Margin bottom, let's say 12 pixels. How's that? Yeah, that's better. And then I went, we went to hover the mouse over each checkbox. I want the mouse to become a pointer. Just a visual cue to the user that it is actually a clickable button. So let's talk about the cursor property and change it to points are very, very simple now in a hover over each one that changes to land. So all these little things that really make a big difference. Now what I wanna do is I want to change the font size. Let's make it slightly bigger. She was say 20 pixels. Yeah, that looks good. Okay. I think I think that's it for now. I think that's looking good. What's the next step? Well, the next step is going to be creating, creating our custom checkbox squared. So let's get cracking. How do we do that? Well, if we go to our index file, you can see that we've included all the spans. That's got a class of checkbox and nothing is in it. And this span is what I want to start styling. So let's do it. Let's target our checkmark and it start applying styling today. Let's give it firstly, a background color of RGB. Rgb 134. 134, 134. Just a light gray. And let's give it a width and a height. And the reason we can't see it as we need to apply a position of absolute to all of this. And there we go. They are our boxes. You know what I wanna do that I don't want them to the right. Do we want to actually push these or to the left and lift the 0? Then we got. But if I do this, can you see that those gray boxes on literally right at the lift of the entire viewport. I don't want that. I want it to be relative to its parent element, and that is this custom class. So in the custom class, and if we go to the index file, you can see here the label is the parent element with a class of custom. I want this to be what its relative to. So on this class, I want to add a position of relative and then it should push those squares to the right. There we go. How cool that says literally to the left of this entire parent element, not the entire viewport. That's important. So I'll call this. You can already see our checkboxes are starting to take shape. Okay, but let's start working with the Hadza. And in order to do that, we can target the CSS pseudo class of hover. So on mouseover, add a gray background color. How do we do that? Well, let's target our custom clause. And yes, we want to target as Hover states. And then we want to affect the checkmark, check mark when it happens. And we just want to change its background color. To see how does that look. To the second mouse. Let's hover over one, over, over 234. How cool is that? Easy, right? Very, very intuitive. What's next? Well, when the checkbox is, I want to add a blue background. You'll see how easy this is as well. All we need to do. We'll immediate comment first, when the state is on edX, a background. How do we do that? Can you try? Give it a go before I show you the solution? Or Apple, it's very easy. What we wanna do is talk about custom class because that's label our rep. And within nay, we want to target the input when it's shaped, state is on. But we don't want to target the actual input element itself when it's checked. Because remember we hit it, we sit at heightened width to Sarah. So what we wanna do is we want to select all the descendants that have a class of checkmark, right? That's what we wanna do. Those, all those spans for example. And then all we wanna do is change its background color to watch. So a funky, nice blue color. And 21, 96. How cool is this? Man? Have a lot of fun doing this. Let's refresh the page now. Okay, we could leave it yet, but you might be thinking slide, I really want to create a little chick checkmark inside that box. How do we do that? Well, in order to add that little checkbox or the chick item, I'm going to be using a CSS pseudo elements. Okay? 20. Checkbox challenge - building the custom check box: Now we could leave it here, but you might be thinking, slide, I really want to create a little chick checkmark inside that box. How do we do that? Well, in order to add that little checkbox or they check item, I'm going to be using a CSS pseudo elements called after all, clinical and often, don't worry too much what it is, it just allows us to add content immediately after the element itself. Say, it's kind of a cool, a cool way we can do these things. Let me show you how it works. So now I want to create the check mark indicates. And of course we wanted hidden when not. This is what we are going to be doing now. So I'm going to grab our checkbox, which is that span. Remember? And yeah, I'm going to target that after pseudo element in here, I want to set its display property to none by default. Because remember, we only want the shown when it's checked. The content can be nothing originally. And let's just apply position of absolute to this. So we've got a lot of control where we want that actual check item. Now, I want to show the checkmark when it's checked. So the checkmark when each checkbox, as the state, remember BAFF, we've set the display property to none. So now what I wanna do is I want to target our custom class. Yes, we're going to target the input when it's checked. But remember we've hidden the actual input itself. So we want to deal with the span with checkmark, check mark. And yeah, I went to fit. It's after pseudo elements. I know, I know. It's a bit daunting, but all we're doing is we're going to change the display property from above where we had it as none. Now block, that's all we wanna do. And we only want that to happen. Of course, when the input Celsius change, That's always done name. Now finally, my dear students, we can style the check mark indicator. We can create our cool. Check it now, it's very, very easy. We target the custom, again, the custom class of that label with a net. We want to deal with the checkmark, right? But of course, we dealing with the after pseudo elements. And this is where we can apply Qu stylings. We can put anything in here. Let's start off by giving it a border, solid RGB. And 255, 255, 255, how's that? And if you look, if I zoom in, you can actually see it and scroll down. Can you see it in a top-left corner? Top-left corner. That's the start of our chick item. Hocl. What I can do, Let's give it a border width. Border width, or three pixels, three pixels. And let's space this up by giving it a width of five pixels. And you see our checkbook, I'll check items are checked, are tic starting to take shape. But now we need to apply Hightower Dr. Let's do 11 pixels. There we go. That's our little check. And don't worry, we're going to walk into it now for you and show you what it, what it does this astronomy transformative, because all we need to do is we need to rotate this bad boy, let's say 50 degrees should do it. Degas. And you guessed it we need to move a drought. So let's move it to the right and let's move it slightly down. Zoom out of it. I think that's actually looking really, really cool. Maybe it's a two-photon. Yeah, I think that's better. And my dear students, this is it. We've literally done it. And you can see how easy it is like it can be very daunting when you first start out, but just tackle each small step one by one. And you can see it was pretty intuitive, right? And now we've got a really cool custom checkbox. And I really encourage you on your forms to move away from the default. I mean, don't go crazy by adding animations and all that. That's just irritating for users. But to create really nice custom field buttons is just so much nicer for user experience. And remember what it is we did, right? I'll just quickly run you through it in our index page. That was what can really be more simple. We've just got one link to the CSS style sheet. And then below that we've separated our anti page into two. The first is default checkbox styling. We didn't do anything. We just let the browser deal with the styling. All we did was we just displayed each one as a block element. So what we did, and that's why when we in our browser, it looks pretty hideous. Nothing special. The next section is we created our custom checkboxes. All we did was we wrapped each checkbox in a label wrapper. And we gave that a class name of customer within included a span element. And we did the span element because we knew going forward we're going to be targeting that span element with CSS to create a cool little square, a gray square. That thing goes blue whenever the pseudo-class. That's all we did, an internal style sheet. We literally just tackled each problem one by one. We change the default styling to block. Minton could be displayed after each other one by one, we change the hitting color within, started removing that browsers ugly default checkbox. Remember we said a tight and put it to 0. And then we started working on our custom checkboxes styling. We said it display to block. We gave it with a padding so we could move all those labels to the right. We then changed his background color. We gave each square, width and height. We then targeted at hover CSS class. Finally, we use this after pseudo elements in order to create a little checkbox. And all we did to create a little check is we used a border and then we gave it a border width, and then we just gave it a height and width, and then we rotate it. And that was literally are checked item. Very simple way to do it. But there we go. I hope you learned a ton, hope you having fun. And we've got a ton more color. We haven't even started on the meaty stuff yet. So I'm really looking forward to the next lectures in the next sections. Siena. 21. Image type: Welcome back My dear students. Yeah, we going to talk about another input type, this time of image. What is the school about? Firstly, the image button control is rendered exactly like an image element, excepted when a user clicks on it, it behaves more like a submit button. So in other words, it's like a graphical submit button. That's effectively all it is. And the cool thing is, is that this famine supports exactly the same set of attributes and as an image element plus all of the other attributes supported by other form buttons. So for example, we could write out an input of type image like this. And I'm sure you've already noticed that a lot of these attributes you will be used to in using the image element itself. And we can use them here. Fruity intuitive, right? But now you might be thinking, wow, Firstly, I don't see a value attribute. And what happens then when I submit the form? Specifically when I submit the form using this input type of image. Well, I want to start off the bat by saying the control does not. Value was an array of strings right? There. Value attributes should not be used with this input type. And it's one of the very few elements that does not have a value attribute. So then Clyde, what it doesn't submit. Good question. The mouse coordinates or Saint with the request. Okay. So the coordinates will sync with that request. What do you mean by coordinates? All I mean is that the x and y-coordinates click on the image, are submitted. So this means two values are seeing with each request, the x coordinates and the y coordinates. These coordinates are relative to the actual image. And this just means that the APA left corner of the image represents the coordinates 0 is 0. So if you are one pixel to the right, it's going to submit as 10 if you want to the right and one down, that's going to submit 11. Pretty intuitive. The other thing I want to mention here is that if the image input has a name, attributes, deemed, the specified name is prefixed on every attribute. So if the name is paused for position, for example, then the returned coordinates would be formatted in the URL as post-doc stakes and pause dot y. But we'll kind of look similar to this. But of course, if we use the name attribute of pause, it will apply to all other attributes as well. On that element is making scenes, clips on. Let me just give you a quick example. If the user clicks on the image at coordinates 8450, what will be seen as part of the request? Well, that's right. Pause aches is going to be 18, pause y's going to be for 50. Pretty straightforward. And he might be thinking, man, when would I ever want to do this? Well, for a sample, what if you once a heatmap rocky when it seemed coordinates two, uh, we, the users clicked. What about if it's a location on a map, for example, the server-side code can work out what location was clipped on and return information about places nearby, for example. But they are other examples as well. In fact, why don't I code up a few? Now, who with you? And I really do encourage you to code along with me had obviously doing as much, much better than just listening. They way I wanted to just thank you for your support. I really love you guys so much. I couldn't do this without you. I hope you're having a little fun in this course. And I'll see you in the next lecture when we encode up some cool examples of using this input of type image contour sienna. 22. Heat map - image type example: Alright, let's get into an example, because examples speak louder than a 1000 words. Here we go. Let's start an HTML file within here. Let's have a Head Style section that I'm not going to style anything from now. First, let's just look at this input of type connection. How can we do it? Well, firstly, let's just ask for a username and we'll have an input of type. You guessed it, text. It's name can be user, form. Don't need an ID. So there we go. That's our first input. We save that, we'll look at the browser. There we go, and let's move on to the next widgets. I mean, usually have with a login page, you're going to need a password as well. We've looked at all these types, which is really, really cool. Password. There we go. It's named in the password, we don't need an ID. Then we go to widgets already, and now we use, we could go button of type submit, okay, and submit, we could do this. But say it's important to ask a then we want an image. In that instance. I would even argue that it's not even that useful because within the button you can include an image. Okay, so Let's get rid of the button. Let's just say it's important for you to seem to x and y coordinates. Well, it's really easy to do that natively by using this input top right of type image. The source is the source of my file and I've got in the same directory or file hold a submit button one. It takes an alt attribute just in case it can't be displayed to the screen. And at least they'll see the text or a screen reader when we read it. Submit form. We can define the width. Width. Let's just make that a 100 pixels and the height that is 19. Let's save it. And D is our cool. So now instead of a boring old submit button, we've got an image. But when I just Sam close to the top left corner of this image, if I click that, look what ST. how awesome the x and y coordinates. You have three pixels to the right and three pixels down. Because I wasn't quite on the corner, but I was almost, almost in the corner. And here it's just submitted. The attributes is x and y are MY basket if you include a name attribute that will be appended to that name. So for example, let's have a name attribute on care of. Pause the page, just click on the middle. Now the button. There we go. Now we've got x and y coordinates with the word pause appended to it. How awesome is that? My dear students, I'd be thinking Bible. Okay, Cool, but I could have just put that image in the button lucky said, and a 100 percent dry. So often, you know, you want to use these things when you start creating a heatmap. So let me just give you a quick example while I'm here. I know I'm naughty, I'm giving you too many examples, but it's also interesting and it's so good for you. So choose your favorite food. Okay, let's have that as a heading. And under this heading, okay, let's have a dove. We wrap everything within a DevOps is good for styling purposes, even though I'm not really going to style it now. It's just habit. Yeah, I want to input type in the hay, you know, the draw. And yeah, I've got in the same directory an image called the Food Icon. That is too, too big. It's too alternative to the image of the food types. Let's give our name again of pause. Anyway, this, this image is two biggest lists in our styles here. Let's target ID, we haven't given out and put an idea. We said let's just give it an ID of imagery. Held it. So now we can target the input with ID of image and we can style it the way we want. Let's just give it a width of 300 pixels and a height of 300 pixels. It's better, manage much better. Okay, so now we can go to our browser. Okay? What we can do is you'll notice when we click on the hamburger, we getting x and y-coordinates of say yeah, 4949. If we click on the sandwich, we're getting coordinates of 257255. If we click in the middle to 147, 147. What's really cool in this example is you could write server-side code that works out what food was clicked on by the coordinates submitted. That can keep a tally of the favorite foods people voted for, right to see, show them an image that click on the image, whichever one they loved the most. You know, you've sent those coordinates and you can work out which food they like. And I know that has flaws. If they click on the border of one and not quite the ADA. But that's why you want a lot of space between the foods and you hope they click on the actual Food Icon itself. Anyway, this is just a very fun example. Very high level example is to why this might be useful in your circumstance. But enough said on the image input type, we've got a ton more to cover. See you in the next lecture. 23. File type: Welcome to yet another lecture. But you beginning to see how powerful as input element is and why I said it's perhaps one of the most complex and HTML because they are so many different types and it completely transforms the functionality of an input when you use different times. And now I want to talk about a very useful one. You are going to be using this a lot in your career. And that is when you allow the user to upload files. And HTML gives us a very convenient type called file. So I'm going to say above File. Well, obviously it allows the user to attach files to the file picker widget can be used to choose one or more files to send and to create this file bigger widget, all we need is the input element with its type of set too far, you know this already. What's interesting though is that we as developers can restrict, will constrain the type of files that we will accept. Say we don't want the video file. We can specify, let's say we don't want a PNG, we only want JPGs. We can specify that. Well, how do we do that? He's had the types of files that are accepted can be constrained using the attributes. Big saved attributes, if you will recall when discussing forms earlier in this course, we mentioned the except attribute was removed by HTML5. But remember my students, this was in the context of using it on the form element itself. You can and should use the attribute on inputs with the type file. And I've just given you an example below here we have defined the except attributes as accepting all audio files, video files, and image files. So just remember that although we shouldn't use it on the form rep itself, we should be using it on the input of type file. And before we finish up, I just want to mention two more things. One, I want to mention that if you want to let the user pick more than one file, you can. And you do so by adding the multiple attributed to your input, just like you see on the screen in front of you. So that's the first thing I wanted to mention. Last thing I want to mention is that for a file to be promptly seemed to assert it, don't forget to include the multi-part form, a daughter attribute to the form element itself, and UNODC hymns like a decade ago, but we did go through the multi-part form data in a lot of detail. But to remind you, on the actual form rapid self, we set its encoding type to multipart form delta. If you don't do that, the issue you'll have is that the filename will be seen to the server, but not the actual contents of the file itself. Today we have it That's pretty much alone to say on the input to tunnel fall into very intuitive widgets. And keep going with the a students grab a coffee, grab a Red Bull, stay motivated. You gotta keep going through this course and known as a liquid covering, but it's a really, really going to help you in your career. See, you know. 24. Styling a file input: Okay, welcome back. I hope we am terribly having a lot of fun. And it's quite difficult for me sometimes because later on I've dedicated an entire section to talking about CSAs and styling of forms and widgets. And as you'll notice, it's, it's, it's difficult because some widgets of very, very easy to style, like the input of type text, very, very easy to customize. Either form widgets are quite difficult to stop. And one of these widgets is, you guessed it is the input of type file. It's not easy to style this widget. And I could've done this example in the styling section. And I decided to put a two here because we are talking about the file type that and I just thought, you know, this rather have all the file type that link just kind of in one place. So later on, I am going to be talking about CSAs at high labeling weights on the course and CSS. But in this input of type file isn't tricky one to style. And for that reason I just thought, let me show you kinda pro tip if you will, or a nice way to drop. So let me first show you that it is difficult to stop. As always, let's talk with an HTML file. The head. We are going to apply some CSS, nothing either. Body. Let's have a form. Action. You don't need an action. You know, typically with files we're going to be using a post request. Remember I said you must seek its encoding type 2 multi-part form data. Don't forget to do that when dealing with files. And let's just have a div with a class of container. So it's just habit. So it's good to read things and containers when it comes to styling things later. But I'm not too concerned about styling in this course. Then we want to input of type file. We can give it a name, a file, name a file. So I don't name the ID we can give as file. Let's give it a Upload File. Upload file. And remember I said if you want the users to be able to select multiple files, you can use the multiple attribute ends up Boolean attribute, meaning it's either there or it's not. So we don't have to assign it a value, it just needs to be present and it's open this up in Live Server. Then we go, right, so it's just a file picker widget, and this is displayed by the browser that what's difficult for ARDS if we try and target this input, for example, and we try and change its background and its background color to red. Can you see that we actually Khan style that actual choose file box? And this is annoying thing. And it just becomes very difficult to style this widget. And I've seen quite a few different techniques on how people try and solve this problem. I mean, one technique is trying to wrap the input of elements into a container that mimics that button. And then the input had to kinda follow the cursor. And then when the cursor clicks on the button, It's actually clicking on an input of type file. That gets really messy. One quick, quick way that you can get around all of this is why don't we style a label and just hide the actual input itself? Remember, because remember, if we do the label and we attach it to an input, a user can click there, label, and it automatically toggles at input that we assign it to. And then we can easily, easily apply styling to label. That's kind of approach. It's kind of a cool way around. Let me show you, let me show you exactly what I mean. What can we do first? So let me include a label. So yeah, we go label for, we've got to match the ID that we gave to the input, which is file. And here we can ask the user to choose the file. Choose a file or files. Okay, we save this. We'll just get rid of the S. They choose a file. Okay, so we've got that and we know as the label, if I click on choose a file with my mouse, Yeah, that's what I'm going to click on. I'm not clicking on the actual input, I'm clicking on the label. It's going to open up that input of type of file. This is exactly what we wanted. And if we look on documents I can attach let's attach a text file. How's that? There we go. So I've just attached a text file called file one by the way, but it looks nice and we can't style it nicely when we were using with the default form widget provided by the browser. So what do we do? Let's keep the label and let's hide everything else. And it's going to be super, super easy. The input for now. We gave the inputs at clause of upload file, right? So upload, upload file. And why don't we just hide it. Display none. There we go. We've literally hidden it. But again, if I click on the label, it works exactly the same because we've associated with the input of type file for your vehicle, right? And there's a lot we can do here. Firstly, let's style it labels. So let's grab the actual main element upload file. And we want to style that's labeled, I don't know what you want to do. Maybe we want to font font weight and make it a bit more. And, and yeah, of course we can have a cool background color locker. That radio, I don't my Create, I wanted to be a bit more. But Docker is try that. Too dark. That's okay. Cool. We can make it white color. How's that? We can add some padding, 10 pixels. Now the thing is if I hover my mouse over this Choose File, nothing happens. I mean, let's say the cursor property to point a handsome Boolean, you hover over it and display. And we don't really need to do this, I guess, inline-block and there we go, margin to the top. And these are cool file bigger. So you can really see how intuitive it is and what a cool little trick we've done, grant. So they we go. Another thing though, you'll notice though, if I do sitting the file and I can hold the Control key and select a few. Front is no visual cue. There is no visual cue of what's happening. And an ordered index. Maybe I should do today. We're going to need to use JavaScript stand the state, just getting long. So let me stop it here. If you are interested or not, it's going to be a bit advanced because we're gonna be using JavaScript. We can make it more visually appealing. Can just improve these experience. If we have the file name, if we even include how many files have been uploaded, so the user knows. And so if you are interested in Chicago, the next picture, If you're not, skip the next lecture, and I'll see you in two lectures on by. 25. Adding JavaScript to a file input type: Welcome back. And you wanted to do this lecture, even though it is a little tricky. But if JavaScripts and false. But anyway, how can we make this better for use? How can we display the file name and their box? And if the user chooses to files or three files, how can we display that number inside that label? That's a good question. Let's do it together. As I mentioned, we going to need JavaScript and JavaScript test for erect within the script tags. So how are we going to do this? Well, if last JavaScript gives us access or the browser gives us access to the file API. So whenever you have an input of type of file is a property on that called Files. And that is almost like a big object with a lot of properties and methods on it. Like the length property to tell us how many files have been uploaded, the names of the files, et cetera, et cetera. So we're going to use this file API. We're going to grab the information. And then we're going to put that information in the value attribute of that label or not the venue attribute dot say that in HTML we're going to change the wording of the label from choose a file to whatever we want. So it's gonna be really cool. So the first step is a slit is grab all our main elements. Grab main elements. Firstly, I'm going to grab the input rats the input with the type of file. And I'm going to XML documents on me. I want to use the machinery use querySelector maybe. Yeah, let's use a querySelector as many ways to do things. And I want to grab all elements with a class of upload file. That's pretty cool to try. And we've only got one input little this class on end, this query selector, all method, by the way, returns a collision. So we want the first item in the collection. If you're confused, PDC got my DOM course, but if you follow along, great. There we go. We've got our input file. The next thing I want to grab is our label. And we can do this in many different ways. I just want to show you different ways to do it. So let's define a variable called level and how we can use our input file. And we can ask for the next element. Because we know straight off of that input is the label. So there we go. We've got our input, we've got our label. We need the label because we want to be changing its text. Actually, which means we should probably set up a variable, let's call it labeled text. And that's going to be our label. And it's going to be what is the text inside of the inner HTML property? Right now it is. Choose a file, read, we're going to change it. Let's just make this bigger houses. It's looking good right? Now. The next thing I wanna do is I want to add an event listener on the input file. So if we look at the browser, okay, every time a user uploads a file, for example, this just go to file one dot text. If the user clicks open. A change event, fired. This automatically happens in the browser. We don't have to code this up. These are veins are automatically linked to the input of type file. So whenever a file is submitted, just remember the change event has been fired. So I want to listen for that change event. And when they're changing been happens. I want to grab information from the file, put it inside the text of that level. And that's what I want to happen quickly. So let's do that. Let's grab our input file on. Yeah, I want to add an event listener and we're listening for the change event. And again, not talk about the some other courses. But what happens with the event listener is that what's returned to us as an object? It's almost like the event object itself. So let's grab that event object and put it in a variable called e. This is just kind of standard practice in the development industry. Okay, so what do we want to happen when that change event is submitted? Well, firstly, I want to eventually get the filename. So let's define a file name variable and right now it's empty. This just save it as an empty variable. Later on we're going to get it and you'll see how we do it now. The next thing I wanna do is I want to use the File API. Use the File API to get the file name and number of files. And rhombus say this with an input of type file is an automatic property which is a big object called files. This is the file API. So will then need to do is I want to grab that file input. I'm just going to call it file. I want to grab that input, right, get element by ID, we call that file. And on here there's a property called files. So now we've got, call it the file API, and I've just put it in a variable called file. Now what do I wanna do? Well, my dear students, I'm almost thinking that based approach, right, is if there's more than one file selected, I just want to display on net label the amount of files like two files have been predictable. I don't want all the filenames to be in that level because they label could eventually get very vague. It's just want to look visually appealing. But if there's only one file, I wouldn't mind just bring that file name in that label. Why would we do that? So this just set up an if statement and we can say if the length of the file, right? And this is where I've saved the file APIs a lot of properties and methods. One is called link, and it just defines the amount of files that have been uploaded on the button. If that is greater than one, then what do we want to happen? Well, first thing I want to figure out how many have been updated. So let's just call that file number for lack of a better word. And that's going to be that file API variable we got. And it's got a property called length. Length. And in remember how we got that label element low and grab that label element, I want to change its inner HTML, and I want to assign it to a value and been used template literals, Yeah, because it's so much easier. And let's just say uploaded file number files. And if you're not sure what w little literals odds actually just an easier way for us to include JavaScript variables inside taste, you know, yeah, we've got that takes uploaded and files and we put in that variable file number within it. And in order to put a variable inside tip literals, you just have to use a dollar sign and curly brackets. It's all that is. Then we've got our strokes and now we know the file length is equal to one That's not greater than one. In that case, I just want to grab the file name, filename, file, variable. And we know there's only one item with EMEA. And we want to get its name, value, what we wanna do. And then we went to access our label again, we want to change its inner HTML of this time to the file. Then Bob's your uncle. Just hope it works not. So let's go to the browser. Let's choose a file. Let's go one fall, fall, one, come on. Calculators that I will subject the knowledge shows 2 thousand seeds that works. So if you found one, okay, I've been uploaded too fast. No haze, lacteals chance because of this paulson, how gloving as much fun as I am. I know this is plotting data. We use the File API we use in JavaScript. But you can see that the input of type file is a difficult widget to work with. You can indeed work with that. And we should, you know, when you ask him, you know, in building forms and asking users to upload files, we shouldn't make it as intuitive as possible and as easy as possible for the user to know what's going on. Anyway, I know we've covered a lot and we've still got a long way to go. See you in the next lecture. 26. Class outro: Well done, well done. We've just finished another class together. And in this clause, so we discussed the original input types. By original, I just mean those that have been with us since the early days of HTML. And I hope you can start to appreciate how powerful the inputs elemental is when it comes to building forms. It is so powerful because as you can already see from this class, feel so many different things we can do with the input element. It really is amazing, isn't it? We had a look at the password inputs. And by the way, the password input doesn't really help us security as we discussed. But anyway, it is they, it, it does at least provide some visual feedback to the user that they typing in a password. We also looked at the hidden input type and why that might be useful. We looked at the submit input type, the file input type, checkboxes, radio buttons. They really, really is a lot. But this is only the beginning Medea student because in the next loss, we're going to be now discussing the new input types. So please follow me along. Really are doing so well. So grab a coffee yourself on the back, and then I'll see you in the very next clock. Adios.