Night 2: HTML Forms

Click on the images to make them larger.

HTML Tags are in bold, attributes are underlined.

On week 2, 7/18 we focused on HTML forms. I showed how to create a dropdown, checkbox, radio button and add certain attributes to the existing fields we had.

First, we built a typical field setup, which always includes the label field with a <br /> to allow the select to be under the label. Inside under the label is the <select> tag, which builds the html dropdown. Inside the dropdown are <option> tags, which are dropdown items. 

The finished code for this looks like this. We added the "size" attribute to make the box six options high, and added the multiple attribute to allow multiple items to be selected.

Next we proceeded to the <textarea> tag, which is essentially a larger text box. This takes the rows and cols attributes to specify rows and columns, respectively. The final code looks like this:

The code for checkboxes is a little different as the label wraps around the tag. It uses the <input> tag as well, but the type="checkbox" attribute changes the display.

Radio buttons also use <input> tag but the type="radio" changes it to a radio button. In order for the buttons to work properly, they need to have the same name="{name}" attribute.

We finished by inserting the <link> to the stylesheet from the Font Awesome library, which enables you to insert icons
easily. The Icons can be found here

link insert:

Icon insert into button at bottom:

Then we called it a night. Next week we pick up with CSS, and start to decorate our HTML!