Web Forms 2021 - Part 4: The 3 most important form elements (fieldset, input and label) | Clyde Matthew | Skillshare

Playback Speed


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

Web Forms 2021 - Part 4: The 3 most important form elements (fieldset, input and label)

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

16 Lessons (1h 24m)
    • 1. Class Introduction - 3 Most Important Elements

      1:34
    • 2. Structure of a form

      6:26
    • 3. What is the fieldset element

      2:21
    • 4. Fieldset examples

      6:57
    • 5. Attributes on the fieldset

      5:09
    • 6. Attribute examples on the fieldset

      10:38
    • 7. Using the Form attribute to style all form widgets

      4:41
    • 8. The input is like a lime

      3:41
    • 9. Where does the element come from?

      3:31
    • 10. Input type of text - intro

      9:44
    • 11. Input type of text - spellcheck and value

      3:31
    • 12. Assignment - intro

      1:55
    • 13. Assignment - solution

      4:44
    • 14. Assignment - solution including CSS

      9:34
    • 15. What is the label

      8:25
    • 16. Class Outro

      1:03
  • --
  • 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 FOURTH CLASS ON WEB FORMS --> THE 3 MOST IMPORTANT FORM ELEMENTS. 

What we cover in this particular Class?

We will cover of ton of information in this entire series, but for Part 4 I'm going to teach you about what I consider to be the 3 most important form HTML elements there are when you create web forms.

Taking a step back, remember that a <form> is just HTML. And this means that you have the power to use your "inner flare" to use all of HTML's markup to style and structure your form the way you wish.

But there are rules we should follow.

For example, we know that all of your form controls should be wrapped within <form> tags, and we know that the type attribute should be set for every <input> element. But for the most part, you have tremendous power to let the inner 'creative' you shine by designing forms the way you wish.

With that out of the way, I want to dedicate this entire class to discussing the 3 most important form elements you're likely to work with. 

I will discuss: 

  1. the <fieldset> element
  2. the <input type="text"> element; and
  3. the <label> element

Usually you use the <fieldset> element to group related elements in a form. It is handy to use because with a little CSS you can customize the look and feel for all related groups on a form.

In this class I will also talk about the most common <input> type there is, being the "text" type.The <input type="text"> defines a single-line text field.Text controls are useful to gather short runs of text like titles, names, surnames, short descriptions, keywords, tags, etc. Sounds simple enough, but there is a lot to be said about this type which we'll get into in this class. 

I'll finish off by showing you how to use the <label> element to improve UI. The label element represents a label which can be associated to a form control, and is supposed to provide a short description for it. Browsers may link both elements by allowing users to set the focus to the control by clicking on its label.

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 - 3 Most Important Elements: Welcome, welcome, welcome to yet another class. To remind you, my name's Clyde. I'm going to be your instructor. And this is an entire series all about forms. The previous class we spoke about URL encoding. In this class, we are going to discuss arguably the three most common form of widgets. You're going to see, or should rather say the three most common form elements. You're going to see that take a step back and just remember that an HTML form is really just HTML markup. And that means as a developer, you can use your inner flight to create your forms, how either you wish, Yes, The are certain rules. You know that a web form controls and widgets should be rapid in the form elements. But outside of these certain rules, a lot of flexibility. So in this class I'm going to be talking about the three most common elements you're going to see in dealing the force. That is the field sit element, the input element where it's type attribute, a sacred text, and the label element. And you need to bold solid foundations in order to master with voice. And that's why I'm spending an entire class talking about only these three elements we're going to be coding together. We're going to be laughing together, hopefully not crying together. So join me. And it doesn't matter what level of experience you have if you're an experienced developer, I guarantee you're going to learn something new if you're just starting out. Great. I started the complete basics and our walk through absolutely everything. Conway, Conway's, what are you waiting for? Enroll in this class? And I'll see you in the very first ninja. 2. Structure of a form: Before we talk about widgets, the input tags, field sets, et cetera, et cetera. I want to first clarify something from the very, very beginning. I want us to look at generally the form, structure and perform structure. I just mean Hannah, look at the way you design a fall beyond the structure specific to web forms. It's just good to remember that from mockup is just HTML. That's all it is. Forms are just HTML markup. Nothing more to it. And this means that you have all the power of HTML to structure and design your own forms. There are few rules though. We know that we have to wrap our form with in a form tag. But from there you can pretty much go wild. Wild. But they're kinda wild. What I mean is you just have a lot of flexibility. As we've already seen in some of our examples, it's common practice to wrap a label or certain widgets within a div tag to define sections. But it's also common to see you OLS and LI tags within forms. What's the difference between using an ordered list tags and list items versus doves? What's the difference? Well, very little. Don't believe me. That's fine. Let me hop over to the console and let me show you very quickly. Here is a blank index.html file. And I want to prove the fact that it doesn't really matter how we structure form. It doesn't affect the visual appearance in any way. They can in many cases. So here we go, Here's HTML. What I wanna do is create a form. We don't need an action. I'm not even going to do anything with this form. I just want to show you the styling. The first thing I wanna do is I want a rep or immediate coming here. Let's use a div tag to create a name and email input for, right? As I just said that wrap everything within a div. Let's do a label for name, name. And you can see how quickly it is to create a form once you know the general flow and what to do, it's very, very easy. Input type. We can have texts and the name we can have is name, the ID name. Now instance, we don't even need to define a name attribute because we are not even submitting this. And I just wanna show you what it looks like. So there we go. That's the name. That's just copy this entire block, paste another one, and let's do email. Email. Here we go. I guess the top of this input will be email, this address. And of course, this openness up on Live Server and zoom in, they would go name and email. I don't even have a submit button, but who cares? I just want to show you this is how it looks when we wrap it in a div tag. Now, let's go here and you guessed it. Let's use a UL and LI tag style form. These all commonly used. But remember, we have to remove default styling because with lists and old equity default styling. So I just wanted to remove the default. Eileen, just remind me. Just remind me we must must not forget before we, before we do this. As I mentioned, instead of using this, let's use the Altaic now. And let's wrap each kind of section of a forming ally takes a very straightforward same thing, label for name. And then input type can be text. We don't need a name attributes. The ID can be named that because we have to match the name value for that, for attribute rat, we've said the four attributes, behaviours, name, and it has to match the ideal variables. You know what's I can just copy it. Let me just copy and paste these two above. Thanks to chat. And before long, pretty simple. If we look at this now, right in our browser, they should be exactly the same. Man. I asked you to remind me we have to remove this default styling. So let's go here to the top. And four, we get to the body. Let's just create a head elements within the head style elements. And here we can just grab the UL and LI and we can remove styling, list-style, none. Padding left. Save this, go to our browser and shackled aka the ego proof that it does not matter how we style a form. It's up to us as developers if you feeling more comfortable using the hera unordered lists and list items approach 0 for it. If you're more comfortable using devs, go for it at the pains, what you enjoy and what you like. It's like art. But as you can see, it makes no difference to the visual representation to the user. So there we go. We've just seen is very little difference if actually the 0 difference between using UL and allies versus using div tags. Just FYI I often ally elements are used, especially if you have multiple checkboxes and radio buttons. But again, you don't have to depend on what your style of coding is. And because we have the power of HTML and our disposal, we don't have to limit ourselves to using divs either. In other words, d'oeuvres and UL tags on it, the only options available to you. It's also common practice to use the field set elements, H1, H2 tags, and even sections. Too. Complex forms. We even saw when we were looking at male chimps form that they had a whole lot of field sets in it, didn't there? So what I'm trying to say is that there's not only one right way to structure and design a form that's like art. It's up to you to find a comfortable coding style that suits you. But as we'll see, there are certain nuances, this certain kind of conventions in the development industry that kind of veer us to stick with conventions. And I'm going to be talking about those as we go through some of these elements. So I guess this would be a good place to stop. But before we start talking about widgets in more detail, I want to quickly talk about the field set elements in some more detail. 3. What is the fieldset element: Before we get into widgets, I wanted to talk about the field set elements in lot more detail because a lot of complex forms, even the one that we looked at on Mailchimp going to be seeing this element a lot. Well firstly, what is the field to element? It's very simple. It's just a nice way to create groups of widgets that same purpose. So in other words, it's useful for styling and semantic purposes. And because it's used to kind of give you structure your farm, it helps you and others understand your entire form. And that's why usually it's very useful when we're dealing with very large complex forms because it adds structure. But this is not all folks. Legend element is usually used with the fields in elements. And all it does is it really adds a caption for the fields at element ends, a label, it adds a heading. So from my point of view, the field set and legend or one good pay. And the base part is that any content will fit well within this dana. You don't only have to use it for widgets. So just remember by using the field sets along with the legend element, you can make your forms more readable and easier to comprehend. And this can especially be useful on long forms containing many sections. Okay, Clyde, I've got it, But how does it work? Very, very simple. The basic tag is written like this. You've got your opening field set and your closing tag and the legend tag, remember, is used with the field set. Very often you don't have to, it's only optional, but if we want to use it, how do we or the legend should be placed next? And of course, after the legend, you can place your other HTML elements. In our case, our form elements, form widgets, steps generally how it looks pretty simple, but what super-duper interesting and a lot of people don't know is that field set does not have to be used only with forms. It's highly think of different places. You can use it. You can use it to wrap content, you can use it to wrap images. And you can use it, of course, to rep on widgets. So there we go, very high level. And let me hop over to the editor. And let's see this in action. So you can kind of see what the field set look like. 4. Fieldset examples: Here we are in Visual Studio Code are put into a folder open called fields it. And I've just got one image in this fall that PNG that I just created. Forms are awesome. Ndas, I really do hope you enjoy this course and you'll see how we use that in a second. So Fields sit, elements can be used on things other than just forms. And they commonly are, they very, very powerful. So let me show you an example firstly, that can be used to read any HTML content. Let's just call our first file. You'll see one. See how we are. We've got an HTML file, Brookfield one. And I want it to be very, very simple. Let's just create HTML within. Yeah, let's have a body. And you guessed it. Let's use our field and just have a paragraph and then just some Lorem Ipsum. Very, very simple. Let's go live. See this on the browser. Can you see what it's done? It's giving everything a cool looking border straight out of the bus. How cool is that? Let's go back here. What I wanna do is just provide a bit of styling. Let's reduce the whole width that I want to go and across the whole screen. Again is just some module. So back, here we go. Let's all fields, it works. But you may be thinking, what about diligent? Well, that's a great question. Let's add the legend back to the browser. And that's how it looks. That adds that cool caption, that title, two fields it. Okay, great slide that contains, but now the next thing, it can wrap our images. Okay, so how would we go about wrapping an image within a field States all 50. Let's copy and save this file that now let's all its fields. And we got, so for a legend, for the title of our image, let's just say a very simple now we don't want the paragraph doing. We want an image. The source of the image is in the same directory and it's called forms are awesome. Dot PNG, say we're going to have a bit of a problem. Yeah, let me just get rid of that with the body styling. Let's go to the browser. We unfiltered one and just change it to feel it. And it's just massive. So let's just quickly stylus and you can see the field sit in a third more detail. Often a Create Group variables. It's almost like using variables. We'll see a very, very good thing to do because it just saves you a ton of time on it, especially when sites dot becoming really, really complex. So I only want this image to be 700 pixels. I don't want to go crazy with this thing. What I want to start next, let's style the field sake itself. I want to ticks the line everything to the centre. And I want the width to be the width we defined. And then I want everything seem to think that's it fulfilled state. And then lastly, I just want to fit the image. And I want the image to be a certain way, and I want the width to be one. We define this a little bit and so the product Much better is this. We can see we centered the legend, a cool looking form image. And you start to see how useful is, feels it is, it just really creates a nice feel. Any ways, the moment you've all been waiting for drumroll. How do we use the field sit and legend with forms all very, very easily. So let's go to Visual Studio Code. Once again, copy paste, and it's called a field. Let's get rid of all the styling. Is going to keep it yet because it probably you are going to have to style something related to delete the fields it and it's boulder fall. We don't need an action not sending it anyway. And let's say in your form, you asking the user to pick the favorite color. So this would be a good opportune moment to think about the field because we're in a group, all the radio controls within one section, within one heating, right? So it's a good, good opportunity for field. Ligand comes next as you know. And we're asking the user for the favorite. Now we can start building off for Medea students because a form is effectively just HTML mockup, we have a lot of parallel of flexibility as to how we want to pull the poll. So yeah, just to show you something different, I don't have paragraph elements. And within the paragraph, each paragraph elements, we can insert our input. I want this to be of type radio, and I know we haven't gone through this yet, but don't worry. We're going to get into a lot more detail later in the course about what this means and how it works. But for now, sit back and just see how the fields and legend and label everything. So let's do a label because it's good practice. This has to be the same as the ID of the input and ideas and input ID. And let's say this is going to be blue. And this can be the color blue that the user chooses. Very simple. And all I want to do is copy this entire section and paste it. But is there ever being blue? Is just naked. How's it? And we can do even one more set of making a green wire. We make it. I'm not even going to put a submit button only thing I just want to show you what it looks like. And in styling, the only thing I wanna do is I don't want the field sick stretched across the entire screen. And that's will happen by default. So all I want to do is target the fields that element and honest with 50% of the screen. Very simple. And then of course, our waistline and centering things. Let's go to the browser. We are unfilled state in under three now. And how cool is that vision component? And you can click on blue, green, and that's good. So there you go. Proof is in the pudding. We've just seen fields. It has wide ranging uses. A very, very useful element for you to know in your career. But we're not quite done with that. They just a few more things I want to discuss about the field sit elements. 5. Attributes on the fieldset: Welcome back, and let's continue talking about the field set elements. Remember, it's an easy way to create groups of widgets that share the same purpose. And this is useful for styling and semantic purposes. And we've seen how versatile the fields it in nature and can be. It doesn't only have to be used the forms we prepped images in it, we prepped other HTML inside of it. And often it's used by developers in many different scenarios. And we just saw that often we use the legend element with the field sit elements. And it's not just useful for visual reasons. Legend helps for semantic purposes as well. For example, some screen readers, such as jaws or NVDA, for example, they speak the legions content before speaking the label of each control. And this is useful, right? Because it's basically telling in a visually impaired user what the group of controls is all about. Every useful. They are just two important attributes for the field set that I want to quickly mention. The first is disabled and a second for disabled in form. What are they all about? Firstly, disabled is very intuitive. It just turns off all the elements inside of the field. Element and disabled controls are rendered grayed out, is visible and they blocked from US interaction. And even more importantly, the values, if any, on Saint, when the form is submitted, let me show you how this works or writes How does this disabled attribute work? Ladder wanna keep typing up a new files with you? I think it's just going to waste a lot of time. So yeah, I've already coded something very simple. I've called it feels it for. And it's very, very simple. I've just got two sections. And the fourth one is delivery information, and the other one is subscription information to separate topics. They for each I put into its own fields hit Tab. Actually, no, I before I put this table, let's just have a look at what this looks like. Okay, It's very simple form. And then at the very bottom, I've just got a submit, very, very simple. Let's look what it looks like on the browser. See how we go. We've got delivery information, subscription information, and we've got our submit button. Straightforward. And right now you can type in your email. Okay, very simple. You can toggle that on and off. Yeah, don't worry about these types. You can see here this is an input type of checkbox, but we're going to be getting into this later in the course. I don't want you to stress are now what these all mean. It's right now to try and ignore all the detail and look at the bigger picture. And that is what the disabled attribute does. Okay, So how does the disabled attribute work? That's a great question. Let's say, for example, you might want an entire section to be disabled until something else happens, until there's a trigger. And in with JavaScript, we can toggle the attribute of disabled on an off, right? So for now, let's just disable the entire subscription section. So that's this field sit here. On this field set elements itself. We just have to type the keyword disabled. Now, disabled is a boolean attribute. This just means it's either they ought not. We don't have to assign it a value. It's not like input type. For example, the type attribute, that type attribute is not a Boolean value. We have to assign it a value. You can see for email we've assigned it the value of email. When it comes to disable, we just have to put it there and it should work. You can see on the browser already, it's worked. That's all disabled. You can't type a email in here, you can't toggle the checkbox. There's nothing you can do but the top field set is enabled. So it's a very simple attribute, an intake, there's much more to it than that. So let's jump back to the lecture. Don't you just love looking at examples? I do. I do. So, so interesting. So we've seen the disabled attribute. Now I just wanted to talk about the form attribute. What is that all about? Well, the form attribute gets the values of the id attributes of a form element. And that will then be part of the field set in HTML. It sounds very, very confusing. Think of it like this. Sometimes when you build a form, you don't want it to be all in one place on your page. Sometimes if you want, you can split a form into different sections on your entire page. And you want to associate some controls with the main form. And in order to do so, you have to use the form attribute. But one very important point to note is that the association of a field set with a form, right? When we use it for attribute, it doesn't imply that the controls inside of that field set will be associated. So it just means that for each form control that we want to be associated with the main form that we have to use this form attribute. And enough, bla, bla, bla. I know it can seem very confusing. So let me hop over to Visual Studio Code and let me show you. 6. Attribute examples on the fieldset: Awesome, welcome back. And now I do want to code the subtlety because I think it's just important to drive home a scenario where you split up your form across your entire HTML page. I know you might be thinking, gee, when would you ever wanna do this? Trust me, every single website, every single client you have will have different needs. And that's why as developers, we have to have so much flexibility when it comes to code. Okay, let's start. So HTML, I'm going to have a head and style section here because I'm going to have to style something later. And then let's start. So let's wrap everything that our body, Christie, let's have a hitting. And in here, this just hitting needs attribute. Pretty straightforward. Let's see what it looks like. I'll actually put it. Yes, you can see it as we go on. How's it? Now what I wanna do is I want to create a full create. Always good to have comments in your code. Actually doesn't matter, but I just want to be explicit. Yeah, I do want to use a get request. I know this is the default that we didn't have to do it, but I want to be explicit and I want to get too close because I want to see what fields are being submitted in this for. Now. I just wanted to label because it's good, good practice. And we can either label and quality animal. And we can ask the user, what's your favorite animal. We can then have an input of type text. The name can be fed animal ID has to match what's on negative All attribute and renamed it anymore. Remember, and then of course we need to be able to submit the form. So this is two input type of submit. And we need a value. Or I thought I was starting to take shape. And obviously now, What's your favorite animal? We can call it a workbook. Let's face it, it's a cool animal. When we submit, we can see that what's submitted to the server via GET requests is fav, animal, water rights. Nothing untoward, nothing we wouldn't expect. So that's our full Medea students. That's our full. But let's now leave the form. So now we are outside of the form. Let's say we have a paragraph Lorem Ipsum, and then break it up with a line. Okay, let's say we put a div, say there's nothing in the div. Give it an ID of line, save this. Look like. Okay, So that's what it looks like on the browser. We can see a line and I want to line, I just want to kind of show you that we can put a lot of HTML. Just view the line is a lot of HTML. So what I wanna do is style let lines. We can actually see it on the screen. That's going to be very simple. I just want a border top one pixel solid. How does it look with this syndrome? Yeah, I think that's fine. I think that's what they've got here. So that's our site so far. And we need to to come into the website designs and sections. Now, what I wanna do is now create a HTML elements, but it's outside of our remainder. But we still wanted to be part of the full. And what I mean by this is that when we submit button at the top, you know, what's your favorite animal submit? If the users folder and information below, I want that to be submitted alongside with it. And we could have actually reverse this. We could have asked her favorite animal and only put the submit button at the bottom, which would make more intuitive scenes. But this is just an example. I just want you to understand how it works, okay? So I'm not too worried about the UI experience. So let's include another field sit element here. This is how it looks like on the browser as we bold it. Yep, I want a legend. You guessed it. Tell us more about your favorite minimal rot because we continuing on from the top question, what is your favorite animal? So we could have a label for what does it eat? And of course it needs an associated input. Doesn't mean it's name can be said food. Id has to be estimated for value. And then I just want to break it up, break it up. And should we do one more? Let's do one more. Label, full name. What is the name of the old animal? And of course, even inflaton takes the name, can be name, the ID has to match. For which we're given name. And let's save this. Who are we doing a lot, a lot. But this is what I want to show you now is look at our browser. Firstly, if we say here the Watergate grass and the name of the waterfall is one. And what's your favorite animal? Water? What is the default approach if the user clicks, submit, what do you think would happen? Well, a 100 percent correct, It's not going to submit the below information because as far as the browser's concerned, this bottom field seat has nothing to do with the full, right. Another way to prove this to you is if we inspect this page source, if we inspect this element console, and let's grab our field sit elements and its define it in a variable called field, right? If you've done my DOM course, you'll exactly how this works and what the DOM is. Perhaps want to use a method called getElementsByTagName. Get elements by tag name. We know that the tag name is sealed and returns an HTMLCollection. And we want the first item in the collection because we only have one field to it right? Now, all I wanna do is I want to console the field variable. This is what I want to show you. If we open it up and we scroll down, I want to show you what the form attribute is. Wasteful. Paris, in his yes. It says it's null, right? It's not associated with any form. We haven't used the form attribute on fields it in any way. That's the first thing I wanted to show you. The other thing, yeah, just while we're on this on a JSON representation formats, you look at the disabled attribute. Remember we looked at the disabled example. We'll hear the disabled attribute is not set and that's why it's false. So pretty cool, right? Yeah, so let's close this. Let's go back to Visual Studio Code, and let's now on this field set, Let's now put the form attribute. And this form had to be tested equal the idea of the main form we wanted to relate to. So let's call it main, main form. And if we go to the main, we haven't put an ID, headway. Id. Save this. Let's now inspect this and do exactly the same. The final field console dirt out. And here we go. Let's find that form attribute now on, I'm just going to pretty quick, we foster the ego. How cool is that? We've found the form. And now it's formed attribute is set to the main form. And if you open that up, obviously it's got the input types. And it's got the field typically talking about in this scenario. So it's a really, really useful, really, really cool. But remember what I said that even though, you know, for, for HTML, CSS DOM access point of view, we may want this on the actual field set itself, bats, but still won't allow us to use the inputs and associate them with the form. So if we got what does it eat? Grass, what does the name Wally? If we submit, even though we put the form attribute on the field set at still does not submit all the information you can see in the GET request, only one variable has been submitted. So what we have to do is we have to put that form attribute on each individual widgets. Let's scroll down here. You can see here we've got this form attribute on the field set, but that doesn't allow us to send each input widget, does it? Not? So we have to go inside the field Satan on each end, but on each input that you want to relate to the form and send it along with the form. We have to include the attribute. So I've just done it on both inputs. This now Medea students should work. What's your favorite animal? Water? What does it eat? Grass, what is a name? Let's submit this. And how cool is that you go. This is just one example where you have a complicated site, maybe you're not going on. You ask the user one question at the top, you continue. You form later on, like I said, we could have shuffled things around and put the foam at the bottom of the page and associated controls a bath. It doesn't matter how you shuffle it all up. The point that I'm trying to make is that this form attributes. We can put it on the skills it, but it doesn't do much. It doesn't do much. When you come to submit the form. If you want to have dynamic styling, if you want to access that field seats in an easy way, then sometimes putting this form attribute on it does help the most of the time what you're going to want to do is you're going to want to put this form attribute on the individual widgets that you want to relate to the fork. Okay, does that make sense? Cool. I know we're going through a lot and sometimes I'm rushing. I am sorry for going too quick. If you have any questions, please post them on Q&A. But enough said we've got a lot to cover. So let's move on. 7. Using the Form attribute to style all form widgets: Before we move on, it may be quite confusing because I said that one of the benefits of using the form attribute on field set is that you can associated with a form and it may help you with styling purposes. Well, yes, I could have just stopped there, moved on. But if you're anything like me, you quite curious and you want to know exactly what that means. So I know this is going to be quite a bad example, but at least it will show you how you could use it. Should you want to. So here we go. Here's the form we coded up together. And what if we wanted to style everything a certain color, but only those things that related to our form we'll use. We could go into our file and put IDs on everything and targeted within. But that's a real nuisance and it's very tedious. So how can we go about doing this in a more efficient way? Well, we can use the form attribute. So yeah, you can see with the form attribute on the field seat element and the value of that form attribute needs to match the idea of the forms of we scroll up. We've got our form is the ID main form. Okay, So we've done that. And as you saw in the lecture, we've also put that form attribute on each input widgets. So now we've associated all these with the main form. How can we go about styling it very quickly? Well, It's super, super easy. All we need to do this writer, but if JavaScript, if you've done my JavaScript course, you know, JavaScript's always within script tags. And all I wanna do now is I want to use the elements method. And the elements method or property comes from the HTML form element API. Okay, don't worry about what that is. Just something the browser gives us every time you write a form. Okay, so let me show you what I mean. Let me just write a comment. The elements, method, returns and HTML Form Controls connection, listing. All of the form controls contained in the form elements. And this is important as well. It only lists the form controls the widgets that input types in our code here. So it's important that first label under the form will not be selected. But anyway, let's keep going. These are description. How does this work? Well, it's very, very simple. All I wanna do is I want to grab all widgets in our fall. In order to do so, let's grab our form. Let's define a variable called form elements. And I'm just using JavaScripts keyword. And I'm going to assign that the value of document get element by ID. And we know our form has an ID of main form. And this is what I mean by using the elements method. We know if we get the form like this, what's going to be returned to us is the form element rack, which is of type HTML form element and is a method on that or a property called elements. And to prove what this is, Let's just console log this out to the screen. Form elements. Right? Let's save this. Let's go to our browser. Okay, let's inspect this guy to the console. And there we go. We've got an HTML form controls collection, and it consists of five items. How cool is that? So if you wanted to style all of these, let's say we want to make the color red. All we need to do is loop through it, right? And is just use a quick form of a. We can just say item or we can even call it denote, let's call it a form widget of form elements. And here we can just grab the form widget. We can sit at style color to read. This is just what I wanted to show you. Let's go back to the browser. And how awesome is this? This is just an example, right? And everything's red. And this is what I wanted to show you by using that form attribute. A kind of gives you more control in terms of styling, especially when we use it on the field set elements. And the usage of that form attribute is a little bit confusing, I'll be honest with you because if you want each input element inside the fields it to be associated with the form, you have to use that form attribute directly on those filaments as well. So there we go, hope this makes sense. Hope you can kind of see a scenario in which you may use it one day. But enough said, let's move on. 8. The input is like a lime: We are just about to get into the input element in HTML. And the input element is one of the most powerful and complex types of elements in HTML. And the reason is it has so many type attributes that change its functionality completely. That kind of reminds me of a line, y line. Let me show you. So there we go. Pretty easy, pretty simple. But we can apply a recipe to this line. And depending on what recipe we apply to this line, we can get a plethora of different produce. For example, lines can be used as disinfectants. They do that a lot in Cuba, by the way, lines can be also used to make good, to make sources. Do you make even cough syrup? And actually, my mouth is watering so much. I think it's time to make some lime juice. We have literally just made our very own lime juice, fresh fish, fish straight off the tree. And this is what it looks like. This is the concentrate. If I actually just told us. Have a look at that. Hey, come on, doesn't get much better than that. And of course, we have to do is put a button outlast, put the lid back on, and you get the mass cold water. Cheers. Not bad, not bad at all. But let's get back to coding. What was the point of all this? The point I was trying to make as we started off with a boring old line. And we've turned it into something very, very awesome. And I could have done other things with the line. That's the point I'm trying to make. This was a recipe for lime juice, but we could have made other things. And the same applies to this input tag. It may seem very vanilla, very boring on the face of it. And you probably think, like most of us, and input box is just kind of text. What's your first name? What's your email, what's your password, et cetera, et cetera. But with different type attributes applied to that in budget, we can transform it to other things other than text. For example, we can have radio buttons, we can have checkboxes, we can have color pickers. We can have a plethora of other types of buttons. It's really, really as powerful. So stay and stay motivated. And I'll see you in the next lecture videos. It's just so good. Let's get back to coding. 9. Where does the element come from?: Who I'm super, super excited because now we're getting into inputs. And this Medea students is one of the most, if not the most powerful HTML element. That is, just because of the plethora of different things we can do with it. To put it simply how an input works. Dupain's on the value of its type attribute paints. We're going to be discussing the plethora of different types and a lot of detail in this course, what about if the type is not specified within the default type of taste is adopted. Now because this is such a powerful element, a one to discuss. It's from me, show you now quickly. All right, very quickly. Let me show you where the input is from. Firstly, let's define a variable called input. And all I'm gonna do here is I want to create an element, not great attributes, elements. And the elements I want to create is an input element and just share in a normal browser console. By the way, I've created an input and all I wanna do now is I don't want to console dirt out. If I do this directly and we open up this input is going to be a ton of properties and methods. Actually, you know what, I could just do this and scroll all the way to the bottom. But it's that proton that I'm interested in. I want to know where it's from. So instead of doing all of this and scrolling down and seeing all the properties and methods. I could just console out the input. But I want to look specifically at printer. I want to see where it's inherited all its properties and methods from. And its immediate prototype is this HTML input elements. And don't panic, the HTML input element is just an interface that provides special properties and methods for manipulating the options, layouts, and presentation of you guessed it, input elements. And in case you haven't done my DOM causes, what is this HTML input element? Don't panic. It's just a web API. So what actually happens is there are large number of web APIs available to us, provided by the browser. And one of these is called the HTML input elements. And it's just loaded with a whole lot of properties and methods that we can use. And you typically use web APIs with JavaScript. Although you don't have to. Anyway, that's enough of a side tangent. Let's hop back into the lecture. Cool. Have you got it? Nice. So we've seen that every input element is based on the HTML input element interface. And since every input element, regardless of type, is based on this HTML input element interface, technically, they should share the exact same set of attributes. However, in reality, most attributes have any effect, only a specific subset of input types. In addition, the way some attributes impacted input depends on the input type impacting a different input types in different ways. I just wanted to give you a quick, quick intro to the input eliminated self. Right now, I want us to discuss the most important type, and that is takes the input of type text. So let's pick up in the next lecture. 10. Input type of text - intro: Welcome to an awesome lecture on one of the most important input types and neck is the text input type. It's very, very common you're going to be using this times. Firstly, is it, well, as you can see on the screen, It's just an HTML element where it's type attribute has been set to text. Type equals text. It's that simple. And what does it look like? It's default look as like this. Very plain, very simple. But before we move on, let me quickly show you this in action. Here we are. I just want to show you a very, very quick example. Here we are. We've got a form. And inside the form, let's just create our first input. Here it is input type text. And let's go to our live server within us up so we can see what's happening. There we go. And it's all an input text field is nothing sinister about it. There's nothing complicated about it. And what's cool is we can style this as well. We can have a default value of the inputs, let's say I and I am text input has it. These are default type, these can click in it. Yeah, browser goals, the border to indicate that it's selected. And that's always little things that just helped make your experience better. As you are going to be seeing shortly. We don't even need to type input type of text. That is the default. Okay, if we put an ID on, yeah, you can obviously start styling certain elements of it. Style. That's grab that comments and let's change it a little bit. You got the colors now blue using touch input at all blue. What else can we do the carrots color, That's a colon. Carrot, kinda. Today's read. So they, we go, can you see the carrot colors, red now? How cool font color? Font color, font size. You can also pair on font size. You can make it bigger. So yeah, I mean, there's just this a lot we can do. I just wanted to show you that it's very, very quick to sit up and input. Let's her back into the lecture. I told you it's not so difficult. It's very, very straightforward, isn't it? All right, let's move on and let me say a few more things about this. Input takes time. Firstly, I want to say that the text input fields are the most basic effect. It gives you simple texts controls. And this just means you can't really use these controls to perform rich editing, bold, italic, etcetera, etcetera. And we've already seen that the single line text field is created using an input element whose type attribute is set to text. But text is the default type, meaning you could omit the type attribute altogether because text will be the default even more than this. Text is also the fallback value if the value specified for the type attribute is known by the browser. For example, if you specify type equals color or type equals emoji or type equals baboons. And the browser doesn't understand it, doesn't have emoji pickers or native color pickers, or it doesn't understand, boom, boom. Then it's going to default back to the text type. Got it. Pretty straightforward, right? I know I've mentioned this before, but I just want to mention that again. In HTML5. Our different values for the type attribute, write tons of them. That's why the inputs element is so powerful and depending on the type, HTML will force specific characters. For example, e-mails. Html is going to require an at symbol to be preserved. For numbers. It's going to require numbers, et cetera, et cetera. But we're gonna get onto more of that later. Now let's continue. Okay, we've seen an input type of text what it is. But now I want to turn our attention to some behaviors of all or most widgets that have text. I'm including this input of type text. Once my papers we can talk about, well, all input text controls share common behaviors. What are they? Firstly, they can be marked as handily, and this just means that the user can't modify the input value, but the daughter still sync with the rest of the form. Remember that this is different from disable. Remember we looked at that example when we use disabled, the information was never seemed with the rest of the form data. So read-only and disabled are different. Why would you ever want to use this read-only property? Well, for example, you may want to prevent a user from changing the value until some other conditions have been met. Selecting a checkbox for example. And last but not least, it is a Boolean value. It's either there or it's not, so we don't have to assign it a value. So in other words, it will look like this if you want the read-only property on your input type, pretty straightforward, pretty easy. Secondly, you can always use the placeholder attribute. As I'm sure you know, a placeholders just takes that appears inside the text input box that should be used to briefly describe the purpose of the box. But in the end, do not like us using placeholders. It's not semantically useful as other methods to explain your form, like the label element, for example. Just say avoid using the placeholder attributes. If you. Next, I want to talk about size and the size are just mean the physical size of the actual widgets of the form control input text controls can be constrained in size in two ways. Firstly, you can actually define the physical size of the box. And 2, we can define the character count that should fit inside the input box. And this is governed by the size. Attribute is just a numeric value indicating how many characters wide the input field should be. So the value has to be greater than 0. But 0, we've got a box non-visible and the default value is 20. But you might be confused now because character widths very right. And this just means that this value may or may not be exact and it should not be relied upon to be exact because character widths do vary, just means the resulting input baby narrower or wider than a specified number of carriages depending on the characters that you're using and the font. So just remember, this doesn't sit a limit on how many characters the user can enter into the field at only specifies approximately how many characters can be seen at any given time. But to actually sit an upper limit on the length of an input data, we can use the max length attribute or oxide enough group of labor. Let me jump over to the text editor and let's look at an example of using the size attribute has a form. In the form, I want us to first start off with a label because it's just good for user experience and want to ask for a name, bats. I want a constraint on what the name to consist of two to four characters. So that's our label. And now I want to have an input of type text. You guessed it, we don't need an anion. Excellent. We're not even submitting it anyway. And the ID has to match the four attributes name, which we called this name. And that's pretty much it. I just want to style quickly the label and I want it to be displayed as block, display, block. And it's just good margin. Margin top. Let's do margin bottom of widening. How's it? Yeah, that's better. Now if we click on the actual name hitting the label that highlights the text input box. And that's why we use labels is just so much more intuitive for a user. The first thing I want to show you is if we scroll now, let me just zoom out slightly and we do this. How's that? How's that? Okay, so the first thing I want to show you is that the default attribute is set to 20, because if now we change this to 20, it doesn't do anything to the input box itself, right? If we have it to team, it goes smaller. But as I mentioned, it does. This does not limit the amount of characters a user can type. It's only how much you can see at any point. So all those characters that are just typed in that input text field. Okay, so that's the size attributes. If you want to control how many characters are user is allowed to type into the form widget. Then we use a minimum length, right? Inequity it to make it too. And of course the other one was maxlength. And maxlength we, it would be four. If we do this now. And we try and type next, we are good. But what about if we continue? It won't lead us and if we just type one, it will prevent us and buy it. I'm talking about the browser. The browser will prevent us from submitting the form. And less than men LinkedIn, maxlength attributes have been adhered to God, It's cool. Let's jump back to the lecture. 11. Input type of text - spellcheck and value: Don't you just love examples there? So circle. Moving on, I want to look at the spellcheck attribute. And using this attribute takes controls can benefit from, you guessed it, spell checking. Of course only if the browser supports it. Spellcheck is a global attributes. And what I mean by that is that it's an attribute that's common to all HTML elements, though they may not have the same effect on all elements. And what fairly static, we can take one of two values, either true or false. When the spellcheck attribute is not included, right? When we do nothing, the default value depends on both elements, and it depends on the browser. Remember that browsers are just fingers. They just companies, and they all competing with each other to create the best user experience. And they can decide what to do. In some situations. Yes, they have to speak. Okay. So there's a lot of rules that have to follow, but they've also got a lot of leniency. And spellcheck is one of them. So generally, right, this is not cost and stone, but generally I can say that elements such as content, editable, and text areas, they behave as if the spellcheck attribute we seek to true, but inputs generally behave as if spellcheck was set to false. Makes sense. Good. Let me show you a quick example of us using spellcheck. It's pretty cool. A very, very quick example of seeing the skull check in action. Now we are form dot-dot-dot and action. Yeah, and we want an input of type text and it's just get rid of everything. Let's just keep this super, super clean. We've got the two inputs, and there it is on our browser, right? Two inputs. Very, very straightforward. We can just say live demo. We can just break it up. Here we go. These are two inputs on the one, Let's sit all ci equals true. And on the second one, we could leave it bats for the sake of just being extra, extra clear, Let's put it in. Let me just zoom out on one line, the ego, so the one input, spell checker city true, the other one false. What happens if I try and type grass, but I spell it wrong, like debt, will it come up? The C gives us a visual warning that we've got incorrect spelling. You right-click and it gives us some suggestions. Really cool. Of course, on the next one. Nothing happens because spellcheck is set to false. Don't you just love the stuff? And I have a lot of fun. Have a lot of fun. Thanks for following along and thanks for sticking with me. I know it's going through a lot. So we've looked at what it is. We've looked at the similar behaviors across all texts, widgets, which may be thinking how do we extract the value of an input type text when a user types it into the box. Well, this course isn't so much about JavaScript, but just remember that the value property contains the information of the text entered. It contains the data. And we can just use JavaScript, grab the value out of the input field. So there's nothing really difficult about the detrital. But anyway, I want to move on now. What are they so much watercolor, super, super excited. And I want to now talk about the label element because we use that very, very commonly with inputs. 12. Assignment - intro: Welcome to this very, very quick assignment. I just want to recap before we move on. And sometimes we'll often having to think about it. Just salt and code something up yourself really, really helps. So here we go, a very, very simple assignment. What do I want you to do? I want you to wrap a form section in a field sit element. I want you to label the field seat. Choose your favorite fruit. And I want you to have three input elements that allow the user to select this EVA fruit. Now, we haven't yet discussed the input type radio, so that's just 12. I'm going to give you when you're coding up the section of the form, make sure you use an input element with its type seats to failure. So that's what I want you to do as an extra bonus, what I've done and what I'm going to show you in the solution as how to animate and create our own cool functionality when it comes to selecting an item, look at that, I'll call is that red dot. And the reason I'm doing all this is to show you that although the examples I've been using up until now have been rather idea, they haven't looked pretty. It's very easy to apply CSS styling, really transform what we've been doing into creating three cool and intuitive forms. But I don't want you to get lost. We are going to be using transition properties and transform properties in CSS. If you don't know CSS, don't worry. I'm going to show you the solution. But again, this course is not about CSS, it's about forms and how to create forms. This is all about the field set and legend element. I want you to just try in a malicious refreshes page. I want you to try and just create that by itself. And then if you don't know how to do the CSS, don't worry, I'm going to go through the solution with them. So give it a go, have fun, grab a coffee, grab a red ball, and I'll see you in the solution video. 13. Assignment - solution: Here we are. We've got a blank file open and you'll see we've got a blank browser. Okay, there's nothing in here. Obviously, let's create an HTML template. Here. We want a body. In the body, we want to start with our form. We don't need an action. We're not submitting this form. And let me put the browser side-by-side so you can see what's going on. So what is the first step? How do we create that border around the group of controls? That's right, we use the field sit element. And if we even save this, we can see that on the browsers really created the box and the box tilings day by default, we can change it, but for now that's not what I want to concentrate on. I want to bold those controls and I want us to have a heading. I just want us to start off simple. So what's next? How do we choose or how do we add the heading? Choose your favorite fruit. That's right, my dear students, legends. I'm glad you've been listening to me. And of course we can just go choose your favorite fruit. How's it? And it's already starting to look good or right? And then the next question is, how do we create those selections? Remember, gave you a clue that the input type must be sick to radio forms, as we mentioned, are just HTML markup. So we have a lot of flexibility as to how to do this. And you may not have done it the same as me and that's entirely okay. I'm just gonna use a paragraph tag to wrap everything in a. The reason I use paragraphs, but often by the way, is that by default, browsers apply a display property of block, such as means each new input widget will be on its own line. And also some mass margins apply to paragraph, so it just makes it look better and I don't have to bother by styling at myself in CSS. Okay, Well, let's put a label element now because it's just good practice. I'm gonna do something slightly different. We're going to be talking about the label element shortly, but I'm going to now rep and tie between the label tags. And this is where I want to put my input and I wanted to be a radio. As I mentioned, if we save this, you can really see the radio hover over it and check it. And that blue kind of highlight is the default, but that's what the browser does. Quite interesting. The name of all the radio buttons have to be the same. Again, we haven't done this yet, but we're going to look at this later on in the course. And then each value that seemed to the server needs to be unique. So in this case it said as fruit is cheering, and of course we need a label. So the ego and benefit of having a labels, if the user clicks on cheery, the actual radio button gets selected. So you can see how easy this is, right? And all we have to do to duplicate this process is copy and paste this paragraph. There we go, charity cherry. Remember, the names have to stay the same. So I'm gonna keep names fruit. But of course, the next fruit is not going to be cherry, it's going to be banana. Banana. Banana. And the last one can be strawberry. Let's have a capital S here. Save that. And there we go. And what's cool when we sit the same name attributed in our example as fruit for each one. But toggles the selections of each radio button, see how we go. This is what it looks like in the browser. You can see that it's stretched across the entire screen, so we're not quite done now we know, let's go to our Podia. In the very top, in the head section. Let's style a few things. And the most simple, simple thing I want to style is this field sit elements. We want to make it with 50 percent, right? And if we go back to our browser, you can see now it's 50 percent, but we want to center it. Rebecca. All we do is we add margin of 0 and go back to our browser. And boom, here we go. And he got to this point, Well done, right? I just wanted to re-emphasize the field set and legend how useful and how quickly can be faster design cool-looking forms. Aren't you excited? So well then, if now you want to understand the CSS behind making these really funky, There's a few things we gotta do. Firstly, we have to design our own toggles, literally from scratch. You don't have to continue watching that remained of the solution. If you don't want to learn about CSAs or if you know CSS already. 14. Assignment - solution including CSS: Let's start working on creating our own cool, funky animated toggle. All right, so let's jump back to our text editor here and let's get cracking. The first thing I want to do is I want to target our input element that has type of radio. What I wanna do is I want to remove the blue button by default, right? How do we do that? I'm going to affect its appearance property and set that to none. So now if we go back to the browser, Let's go on. Yes, exactly. That's what I'm trying to say. We have to start from scratch, we have to remove everything. And in bullet ourselves, let me just maybe put these side-by-side so you can see what's going on. So that's exactly what we've done. We've removed that toggle ball in. How do we build it again? Well, we're going to start from scratch. So let's target this input type radio. And what can we do? Well, let's start defining the actual total itself. Let's just say that with 20 pixels, the height can be 20 pixels. Border-radius. To repolarize, yeah, let's do border-radius now because we want it to be round, we don't want it to be square. And it will be squeezed by default. So if we just put an edge to it and it'll look better. And then let's add a border tos two pixels, solid gray. What does that look like? They would go at least you can see it now. If I take this border radius, radius off, there we go. It's a square. We don't want square. We want a nice round toggle button. Can you see those buttons are not quite aligned to the bottom of the text, right? So I want to Vertical Align, Vertical Align. And this just push it up slightly. There we go. How does that look? These now they're aligned at the bottom right. There's something else I want to change. If we now go to the browser and we start clicking right on this element, can you see that the outline, it just looks ugly rock we don't want an outline. All we have to do with that is define our outline as none. Now if we start toggling, nothing happens, okay, It's fine. This is, this is exactly what I expected, but at least now there's no outline who bear with me, bear with Mickey, follow me. Okay, so we've defined the circle. We've defined way we want the toggled to be. What I wanna do now is I want to start building that little red dot. We have to build it from scratch. And what I want to use as a 12, use the before pseudo element. So what I'm gonna do, inputs, I want to target that type radio, but now I want to target the pseudo element. And do you know what? I'm actually going to make this file available to you to download and in net file I'll include comments. Okay, I don't know did the comments now because we're running out of time, but I'll just explain a bit more why I am doing each of these things and don't worry if you don't know what the Perforce pseudo element is. It's ACG just a way for us to add cosmetic content into an element using the content property. So I'm going to show you now, we basically just building that red dot. Well, the first thing is it's got to be displayed, right? Otherwise we won't see it. So let's just set that to block the contents of that. This just going to be nothing. Okay. I know it seems very strange, but it's the way we have to do it. Let's create the round dotting glad, grades. So we say the dots ten pixels wide. Let's say it's 10 pixels high. What else can we do? Should you font-size? Font-size, one m to the border-radius. Remember we want it to be round as well as 210 pixels. The reason we can't see it, you might be thinking why converse yet we need to set a background color. And let's just do red. Sorry, I should have maybe done that before then. You could have seen what we were doing. What else can we do? Or maybe the stone do read, maybe we can do like a maroon area. Now that's ugly, but brighter. Yeah, and it gets better. Okay. Now what I wanna do, can you see that the dots is inside the circle? I don't want that to be the case. All right. How are we going to adjust the original position of the great dot? Well, I want it to be pushed slightly to the left. So let's use the transform property. And I want to translate this, okay? I want it to be pushed to the left by 30 pixels. And let's just say the same heights. Boom, How cool is dead? And in, because I want this to animate, I wanted to start at 0. I want its size to be 0. So if we save this, it's gone. It's literally gone. Okay, well what's next? We've reef doing so well done for sticking with me. I want to start one more thing at the moment. When we check this, nothing happens because this transform we've set the scale to 0, but nothing happens. So what I wanna do, I want to style our inputs when. So what I wanna do now, so we're going to be targeting the input of type radio. You guessed it. But now we want to target the pseudo-class of cheat when it's changed. And this automatically gets applied when a user toggles the bat. And of course, we styling the dot, right, which is the before pseudo element, who enter the Scanga. Quite tricky. So don't worry, and this is quite advanced. I want to access the transform property again. Translate. This just goes 00. Let's just see what happens. And scale of 1 k. What happens now when we, when we check a box? Well, let's look, okay. Firstly, it's instantaneously shown, okay, because we haven't done a transition, probably we going to do that shortly. And it's not quite centered. So let's just push it two pixels, two pixels to the right. Three, strike that. Perfect. And then it's going to be the same data. Banana, cherry, strawberry. How cool that. And then of course I want this to be animated. So let's transition this baby. All Rights. And just in case you're wondering the strands, Asian property is a shorthand property for, for CSS properties all in one. So basically you gotta define what you're going to target. We're going to target all items, all CSS properties. They miss the duration. So let's just say it takes 3.3 seconds. And then you can define how the timing function works for and how can we explain this? Well, normally what happens is you go onto a website, you will let me do now with you. Because we cannot memorize these things. Yeah. Just pasted the link cubic Bezier.com. It's just gone. Yeah, equity. And here we go. You can play around with how you want your whatever it is you're dealing with to animate in and say, Yeah, I wanted to kind of start off in a linear fashion, but I want it to be pushed. I want it to be pushed a lot. I'll show you the animate now at the end. So I wanted to go really fast and kind of pushed back into little toggle box. So let's just preview that pink one. And it's exactly what I want, exactly what I want. So we can copy this code and paste it. Satya, and let's click on banana. Hukou was at. How cool is it? Okay, but you'll notice now, right? If we on banana and I click on strawberry, banana just disappears immediately. I don't really want that. I want the transition out to also be done in a nice way. So on this kind of call it the red dots and the before pseudo-class. Every time at scale changes, I want a transition to happen. I don't want it just to disappear automatically. So all we need to do here, again is add the transform property. And this we can just keep it really simple. Is instead of using that fancy cubic Bezier, we can just use easy. Now if we click Jerry, okay, at animated and nicely, if we clip a nano, you'll see the cherry dot animate out nicely. Salicylate law does not transform its transitional. Sorry about that. Clip banana. Congratulations amen Huckel, that how awesome is that? This really nice toggle. You can see how quick it is also once you know kind of the basics of CSS, how to create your own forms of toggles and animations. But already, this assignment is getting quite long, a hobby, learning a lot. I hope you're having a ton of fun in this course. I'll see you in the next lecture. 15. What is the label: Before we move on, I wanna just mention this label tag in a little bit more detail because you might be thinking, what is the point of using this label tag? Well, let's get hot. What does the label element do? Well, firstly, it's used a caption for a form control, but it does not visually render anything special on the screen, does it? Let me show you. Firstly, let's look at the visual appearance of the label. First step is I want to set up a very simple HTML file. And we don't even need a head. We're going to be very, very simple here and here Let's have no label. Okay, that's a starting point. Let's have an input type of adeno. Checkbox. Doesn't really matter. We don't need a name, we don't need an ID. And let's just say, yeah, are you ready to enter this cool application? So I want to do, let's save that. Go to the browser. And there we go. Very, very simple. This is create a line break. Now let's add a label. And here we are. Let's just have a label. Call it for welcome. And RNA has two inputs. Also, checkbox. We don't need a name and the ID can be Wellcome, which didn't even have to do this by the way, as you'll see shortly. And in our description can be ready to into this application. And can you see on the browser, can you see anything different visually? Now? And that's my point, right? That does nothing visually. But you'll notice when we have no label and I click the text, nothing happens. But if I click the text on the one with the label, it gets selected. How awesome. So we can see whether we have a label or not. Visually doesn't make a difference, really comes down to the UI experience of a user. It just makes the user's life easier to select which ever input control you're using, or whichever form control you're using. And there's nothing special about the label element. It's just another HTML element that's just markup. Okay, client. Well then how do we use this label element? In order to use the label, we have, attach it to a form control. We have to link it up to a form control, right? Any two main ways we can do this? The first way is that we can attach it implicitly. What does that mean? All right, well, let me show you how does this implicit approach work? Well, it is very, very easy. All we need to do is define our label tag. We don't even need a for attribute. How cool is that? Now what we do is we wrap our widget within the label tags itself. So here we can have input of type password. For example, we don't need a name, we don't even need an ID. Password, password. Save that. And here it is on our browser. But now if you click the actual text that the user clicks on the text itself, the actual input gets highlighted and focused. Have you got it? So that's the implicit approach. We don't even need to use any attributes on a label in order for it to work, we just wrap our entire control within the label itself. Okay, great, So we've seen that we can apply it implicitly. Aka we just wrap our input within the middle of the label, inside of the label tag. That's the first way. The most common way, however, is to do it explicitly. And when we use it, we have to use the for attribute on the label element. And what does the for attribute do? Well at determines the input two which is associated. And we've already seen a lot of examples that the for attribute value must match the ID, not the name. That's important, the ID of the input element, right? And we've seen examples of this during the course. Just note that when we submit the form, we have to pay special attention to the name attributes of each control. But when we deal with label pairing, we rely on the ID. And this is often why you'll see encode input elements having the same value in both attributes, in the ID attribute and the name attribute. Because the name attribute deals with form submission, the id often links it up to a label control and CSS, by the way, is that making sense. So we can use the implicit or explicit approach. We've seen an example of the implicit, but let's just quickly go back to the text editor. And I want to show you an example of us using an explicit approach. We've already done this tons of times. So it's going to be very, very quick. We've seen the implicit approach. How does the explicit approach work? Well, That's pretty much what we've done in all the examples thus far, right? So what we do is we don't wrap the input with the label. What we do is that input comes outside of the label. But if we do that, what's going to happen? Well, let's try this no association. So if the user clicks on an actual text itself, nothing happens. The actual input box itself doesn't get selected. So you need a way to kind of link the two. And the way you do this as very, very easy. We actually normally put the label text within the label tags. Just like this. That's what we normally do, doesn't visually do anything different. You can just see here, nothing has changed. Again, if you click on password, nothing happens because we haven't associated the input type with the label. And in order to do so, it is so, so easy. All we do is we give this a four attributes and let's call it password, right? Because we're dealing with a password. Again, this does nothing on its own. What we have to do is tell it that it relates to which widgets. And we do that by having an ID on the inputs that matches the value of that attribute, which we defined as password. And if we do this, user clicks the word password. Yeah, boom, there we go. The input widget now gets focused. Told you that would be very, very quick. Okay, that's the label elements. What benefits does it give us? Well, the most obvious one is that it improves user experience. If the user clicks on the text within the label element, it toggles the form control itself. And remember in order for this to work, the for attribute or the label tag should equal to id attribute of the related form elements in order to bind them together, right, That's the most obvious benefit, but they are others. The second main benefit using labels is that it's good for semantic reasons. In other words, so you and others can understand your code. If you have some text, represents a label for an input, you can read and labeled tags, not for presentation, but because that's what it is. In other words, without having a label tag, that takes two controls, almost meaningless. So what the label tag included and at four attribute, you're basically providing meaning and structure and you forming a relationship between your mockup that can better be understood by computers, passes, browsers, and of course, people. That's the second reason why it's good to have the label element. Third, third reason is that it helps visually challenged uses. As you know, visually challenged users often use screen readers that read the associated label tag whenever a form control is huge or focused by simply including a bunch of text. Next to form elements, the screen reader will read the form as simply a bunch of items like input box name, input box, email, input box location. But when you use a label tag, the screen reader knows which text is associated with which form element, and it will read each label with its proper form elements accordingly. It just makes the experience better. That's what I'm trying to say. And then conclude this awesome, awesome lecture. Open that wine bottles, champagne bottle, or in my case, another cup of coffee. And I'll see you in the next lecture. 16. Class Outro: While Dan, My dear students, well-done for finishing this entire class, well done for following along in every single class. Because I know each one builds upon each other and we are going to be getting more and more complex. And in this class we had a lot of fun didn't week. You really are starting to bold solid foundations when it comes to the reforms. Because in this loss, we looked at the field sit elements. And that's great when you want to group common sections in your form. Really, really interesting. And often we use the legend element alongside the field sets to give it a nice hitting. We also looked at the inputs, weights, type attributed set it takes. And that input is literally amazing. It allows a user to write text into our fourth and last but not least, we, the label element and the label elements is not just the full semantic reasons and actually improves UI. So hope you had a lot of fun, pat yourself on the back, grab a coffee, and I hope to see you in the very next loss. Adios.