Complete Intro to Web Development, v2 HTML Attributes

Transcript from the "HTML Attributes" Lesson

[00:00:00]
>> Brian Holt: So, we're gonna go on to more HTML steps. So, we just discussed tags. So I wanted to just as a brief side note, a tag is typically like a type of tag, right? So, you have anchor tags, p tags, things like that. And then you have an element which is one instance, right?

[00:00:23] So this is one element, this is another element, this is another element, but you have types of tags and then you have one instance of the type of tag which will be called an element. So that's, when I use the word element, that's what I mean. The reason why I tell you that is cuz I cannot stop saying the word element [LAUGH] I have tried.

[00:00:41] So, that's what I mean when I say element, it's one particular instance of that particular tag.
>> Brian Holt: So this is one element, one input element. Okay, attributes. So, often it's not enough just to know what type of tag something is, we also usually need to give additional data.

[00:01:09] So, for these inputs, we need to know if it's a check box, or a color picker, or a file picker, or something like that. So, this right here, this type equals business, this is a attribute, right? So I have an input tag and I have a type attribute, and then this is the value right here.

[00:01:31] So I'll say type equals, and then you need quotes. These can be single quotes or double quotes, either is fine. And then I'll give it some sort of value. For input tags in particular, it has to be one of a subset, right, I can't just put anything in here.

[00:01:47] If I just put anything in there, it's gonna say, I don't know what you mean, so I assume you mean text. [LAUGH] So it just falls back to the default. In other words, it ignores it if it doesn't know what it is. So that's why it has to be something like color or numbers with another one.

[00:02:05] So like if this is a number input, you'll see here that it goes red. This is something that browser does fire itself, I didn't write any code that does this, that says hey, that's not a number [LAUGH]. So then if I go back in here and put 123, then it will work.

[00:02:22] You also probably have a hard time seeing it but there is also a little thing where I can increment and decrement it.
>> Brian Holt: And I think, yeah, that's what that does. Anyway, there's a bunch of them. That's just one instance of it.
>> Brian Holt: So type is an attribute.

[00:02:39] Different tags have different attributes that they care about.
>> Brian Holt: So for example, if I gave a type tag to a p, or a type attribute to a p tag, that doesn't make any sense, right, there is just one type of paragraph. There are no special attributes for paragraphs, it's just a paragraph

[00:03:00]
>> Brian Holt: So over here, I give you a table of just a bunch of different kinds. So here's a value, this is a pre-filled value, right? So I can actually just edit this right now, right? But for example if, let's say I was doing a sign-up form, but I already think I know what your name is, right?

[00:03:21] So I will put like Brian here so that when you go to fill out that form it's like, hey I think your name is Brian but you can edit this if that's incorrect, right? So that's what a value would be is a pre-filled value into an input, right, that make sense?

[00:03:38] Then you have placeholders. Notice that this is grey. I think you've seen this before. And then as soon as I start typing that grey text is gonna go away. So, you might put something here like first name, what you actually want them to put in there. So it's a placeholder value while you're waiting for them to type something.

[00:03:59]
>> Brian Holt: Then if I have an input type=checkbox. And then I can say hey, start it out with this checked, right? It would be really nice if people will say, I consent to this form they just prechecked it for you. I think legally, they have to not check it.

[00:04:15] I don't know, I'm making shit up. I don't actually know, but this is pre-checking and that's what the checked part means.
>> Brian Holt: But I can still check it and check it, right?
>> Brian Holt: Yeah, that's what that means. If I have an attribute with no values, so notice this one has the equals, you know this is the placeholder thing, this is the value.

[00:04:43] If I just put checked with no value after it, that basically means true, right? So checked equals true that would be the same thing.
>> Brian Holt: Okay, here's a radio button, this one's checked. With radio buttons you can't uncheck them you would have to have a group of them and then select another one.

[00:05:03] Here is a check box and then it's disabled. Which means that you can see it's kinda greyed out there and I can't actually, I'm trying to click on it and it won't let me click it.
>> Brian Holt: And then this one, this right here represents red. This is a hexadecimal number.

[00:05:22] You don't really have to care how they work. But this FF0000 represents red in hexadecimal. But I can click on it and change it to something else, right?
>> Brian Holt: So, that's what the value is, it's the initial value when someone lands on the website.
>> Brian Holt: If you want to figure out hexadecimals and that kinda stuff, CSS Tricks has a great article on it.

[00:05:50] I would suggest looking that up. I think I linked to it somewhere on this crazy website. [LAUGH]
>> Brian Holt: Cool, any questions about attributes in general so far?
>> Speaker 2: So the color value you can either put down those hexadecimal or you can actually put down color red.
>> Brian Holt: Yeah.

[00:06:14] I've never tried putting it here for an input. I don't know if that would work. To be honest with you, I would have to check. But normally the answer to that question is yes. Well, I guess we can check right here. So, if I make this a color and I say value= "red".

[00:06:32] Yeah, it doesn't work in this particular instance, but in CSS that normally works. Just not this very instance [LAUGH], whereas if I said ff0000. Because this only works with hexadecimal for inputs.
>> Brian Holt: That would almost never be important [LAUGH]. I've never used a color picker in my entire career.

[00:07:03] Maybe I'm in the wrong line of work, I don't know.