Day 2

Today I learned how to build a form from scratch! Everything from text boxes to username and password and selectors and radio buttons and submit buttons. I made a simple login form a few times before I really understood all the parts.

What I learned:

1. The different elements of an <input>tag.

Type/id/name/value if using radio buttons. Found these kind of confusing at first but this is how I explain them to myself: The type is the type of button or form (radio, text, email, password, etc). The id is what you use to link a form with its label — this must be the same. The name is what the information is called, when submitted to the server. It is also a way to group together radio buttons, so you can only select one. Value is the name of the actual choice selected, or what someone inputs as their answer. For example:

In this case, I am making a radio button with three choices: Male, Female, or Other. The <input type> is a radio button. The <label for> and <id> tags are the same for each choice (radio1), to connect the label to its button. The name of the radio buttons are all “genderchoice”; making them the same means they are the same button and only one can be selected. This is what the information will be named when submitted to the server, and the values M, F, and O are the values we will receive.

It’s confusing because the only things you see on the browser are the labels (Male, Female, Other) and the three radio buttons, yet you must write the corresponding backend code for the form to actually do anything.

2. There are two ways to label a form/button.

The first way is to create a label then link it to the form with an id tag.

The second way is to nest the form within the label. Not sure which way is better but Colt seems to prefer the first way. I do think the first way takes a bit more work but is easier to understand.

3. Keyboard shortcuts:

• tab for automatic closing tab in sublime text
• *shift+control+D to copy and paste a line of code

QUESTION: for certain tags, Cole doesn’t use the / in the closing tag. For example, <input type>. Wondering if this is similar to an img tag?

Tomorrow I start CSS! Super excited about this!

Hours spent learning how to code: 3.