Comment All The Input Types!

     Hey, it's Friday!!! Whoo! I'm here at the coffee shop(I've been here all day) and raring to go! I've had two coffees, so I'm totally on a caffeine/sugar high. Today I bring the gift of moar HTML/CSS. Yay, right? Well, maybe. I actually did some pretty fun stuff. I figured out that if I do five lessons a day on the weekdays, I should be finished this class in two months. So, the minimum is five a day. The music that I'm playing is, of course, Grooveshark. I'm playing a playlist of some of my favorites. Which is fun, for me. Not everyone is a fan of 8-bit music. I've had my coffee, my music is playing, it's time to plug in and plug away!

HTML/CSS

      Today, we have a few things relating to forms. Such as multiple options or drop-down menus. First up is the drop-down menu:

<select>
        <option value = "red">red</option>
        <option value = "blue">blue</option>
        <option value = "yellow">yellow</option>
        <option value = "green">green</option>
</select>
First, you have the HTML <select> tags. and then inside of them you have the <option> you can make them be whatever you want, but make sure that the value and the element that gets shown (the word between the >< tags) are the same that way when you use JavaScript that will take those as variable, or something, you will be able to tell what goes with what. And it just makes for clearer code, which is something you always want. The only thing you besides clear code, is comments. COMMENT ALL THE THINGS! You might think you know your code, and it's easy to understand, but wait a few weeks and you can get so lost! So, always always always comment! This message brought to you by the entire coding community.

Next we have the text input area. Again, this will later be used by JavaScript. The instructor has promised that it will get fun with this once .js gets involved. This one is even simpler than the option tags. You just write this:

<textarea name = "comments" rows = "3" cols = "30">

The rows = downward size, and cols(columns) = rightward size. It is naturally anchored on the left side, but of course, you can position it. This would be useful for anything where you want them to write out a free-of-restrictions response, or something the . js can react to.

After that you get these guys. They're all in the same element form, but they all look different. They're called input types and the code looks like this:

<form>Username:
<input type = "text" name = "werfwerf" value = "username here, please!"/>
</form>

Always make sure to have the <form> tags around the inputs. Let me break this down for you; you have the type, which in this case is text, and this would be applied to something like an email address. Something where it would be necessary to have them write the response, but it's just one line, or in a similarly short fashion. The name, is just the title for the input, it can be anything you want, or it can be the username you're looking for. the value is what would be shown in the text area. Here's an image of what the above code would look like:

Notice how the value is shown in the text box. A list of all the "type"s:
text = text input area.
button = button such as 'submit' or 'click here!'
radio = select between different things such as are you: male, female etc. <-- you can only select one.
checkbox = A...checkbox.<-- you can select as many as you want.
And last, but not least we have:
password = Put in text and it will show asterisks, or something similar. (******) used for... passwords. Duh.
That is all for today, folks! I'm going to go enjoy some daylight! It's almost 6:00pm and it's still light out! Crazy! And that's the last time I'll mention it. Don't need to be one of those people that points it out once a week! See y'all on Monday!

--Martin