Kelvin's Desk

Forms

Websites are not about fancy images and text all the time, though. Sometimes we need to write a page to take in data from a user. At some point in time, one may have filled out an application or paid for an item online using a credit card. A user is usually asked for their name, address, email, etc.

These pages are built using the <form> tags. By itself, this tag is nothing special. However, have you noticed the common textboxes, and checkmarks that builds an online form? Well, these elements are built using the various form elements below.

Checkboxes

A checkbox is a type of <input> element that allows a user to check or uncheck a value in a form. You can even auto-check a checkbox by adding the “checked” attribute inside the element.

<input type="checkbox" value="true" checked /> Option 1 <input type="checkbox" value="true" /> Option 2

Radio buttons

A radio button is another type of input element that is somewhat similar to checkboxes. It allows you to check and uncheck a value, but only one value should be selected at a time. Radio buttons are grouped by adding a “name” attribute to each one.

<input type="radio" name="example" value="left" /> Left or <input type="radio" name="example" value="right" /> Right

Textboxes

A textbox is another type of input element that allows user to add text.

Type somethin': <input type="text"  /><br>
Up to 5 characters: <input type="text" maxlength="5" /><br>
This has a message: <input type="text" value="hi!" />

• size – Sets the size of the textbox.
• maxlength – Sets the maximum amount of characters a user can add.
• value – Sets a deault value for the textbox.

Textareas

Textareas are similar to textboxes. However, textareas are used when you need more information, like paragraphs or comments.

Comments: <br>
<textarea rows="3" cols="40">Hello, I'm inside a textarea! Really bright in here 'eh?</textarea>

• rows – Sets the number of lines (ie. rows) we want the textarea to take up.
• cols – Sets the number of spaces (ie. columns) we want the textarea to take up.

Select options

Select options are elements that allows a user to select from a set of options. It’s better for several choices in a form.

Rating:
<select>
	<option vaule="">#</option>	
	<option vaule="1">1</option>	
	<option vaule="2">2</option>	
	<option vaule="3">3</option>	
</select>

Buttons

Last–but certainly not least–we have buttons. What’s a form without any buttons to submit your application?

<input type="button" value="Just an ordinary button." />

• <input type="button"> – A standard button.
• <input type="submit"> – A submit button. Can automatically submit a form when added inside a form tag.
• <input type="reset"> – A reset button. Can automatically reset a form when added inside a form tag.

By themselves, a standard button doesn’t do much. However, you can add some JavaScript to do various things. In the example below, an onclick event is added to add an alert to the webpage.

<input type="button" value="Click Me" onclick="alert('Hi!')"/>

One final note to add…notice that I haven’t used any form tags during some of these examples. Although these elements are used alongside form elements, these elements can also be added by themselves! Form elements can be really useful!

Tables

So we covered how to use text, images, and forms. But what if we need a convenient way to display rows of information? This is where the <table> tag come in. Tables are useful when you want to display information in a database-like structure. For instance, a table can be used for a list of student grades, or a collection of machine parts. In fact, I used a table before when we looked at the Special Characters section!

Tables follow the syntax below:

<table>
   <tbody>
      <tr>
         <th>Symbol Name</th>
         <th>Alt. Name</th>
         <th>Symbol Type</th>
         <th>Value</th>
     </tr>
     <tr>
         <td>&nbsp;</td>
         <td>&#160;</td>
         <td>Line space</td>
         <td>[ ]</td>
     </tr>
   </tbody>
</table>

• <tbody> – Table body, where your rows of information is located.
• <tr> – Table row, used to denote where the table row starts.
• <th> – Table header, creates the header names for each column, commonly bold (optional).
• <td> – Table data, creates the columns for each row.

You’ve probably noticed that the table tags have more detail to the tag types. Creating tables can be more complex in HTML. However, it can be customized in several different ways, depending on what types of information we want to display.

Rows and Columns

A table can have as many rows and columns as you need. Also, the table columns are automatically adjusted based on the data entered. But say if you have a long description that needs to go with your data? You can add that description to the table; however, the text may be more difficult to read. See the example below:

<table>
   <tbody>
     <tr>
         <td>28433</td>
         <td>XYZ University</td>
         <td>XYZ University is located in Anytown, NC. XYZ is a prestigous institute with a diverse curriculum of majors. Financial aid is offered to all our students for room, board, and housing.</td>
     </tr>
   </tbody>
</table>

Notice that the table wraps the text in such a tight space? How can we fix that? Don’t worry, we have options for these situations: rowspan and colspan!

• rowspan="#" = Combines the number of rows based on the number added.
• colspan="#" = Combines the number of columns based on the number added.

Now, lets add a colspan to the <td> tag above to span across 3 columns.

<table>
   <tbody>
     <tr>
         <td>28433</td>
         <td>XYZ University</td>
         <td colspan="3">XYZ University is located in Anytown, NC. XYZ is a prestigous institute with a diverse curriculum of majors. Financial aid is offered to all our students for room, board, and housing.</td>
     </tr>
   </tbody>
</table>

That’s a little better to read. rowspans and colspans are very useful for more detailed information that needs more spacing over columns or rows.

Fixed Width Columns

Okay, but what if we need the above columns at a fixed width? For example, that ID number in the above table shouldn’t need that much space, right? We can add a width to the <td> tag to keep a fixed width for that columns. The table will keep this column at this width, no matter what. Let’s try adding a 10 percent width to the first column:

<table>
   <tbody>
     <tr>
         <td width="10%">28433</td>
         <td>XYZ University</td>
         <td>XYZ University is located in Anytown, NC. XYZ is a prestigous institute with a diverse curriculum of majors. Financial aid is offered to all our students for room, board, and housing.</td>
     </tr>
   </tbody>
</table>

Notice when we’ve added that fixed width, the rest of the table space is allocated between the second and third columns? Adding a fixed width to certain columns allows the table to use the space more appropriately.

But what if you have an extra-long table? You would have to add the width to each column you would want fixed, right? Actually no! You can add the width to the first row of columns, and the rest of the rows will follow suit!

Table Headers and Footers

Say if we need to add more information about our table. Maybe we need a description of what the table is. Perhaps a total amount at the bottom? We also have table headers and footers that can be used. These tags are optionally used in web development; I’ve never needed to use them. But these tags would still prove useful in special cases.

• <thead> = The table header; commonly used to store the th tags, but are optional.
• <tfoot> = The table footer

<table>
   <thead>
     <tr>
         <th>ID</th>
         <th>Name</th>
         <th colspan="3">Description</th>
     </tr>
   </thead>
   <tbody>
     <tr>
         <td>28433</td>
         <td>XYZ University</td>
         <td colspan="3">XYZ University is located in Anytown, NC. XYZ is a prestigous institute with a diverse curriculum of majors. Financial aid is offered to all our students for room, board, and housing.</td>
     </tr>
   </tbody>
   <tfoot>
     <tr>
         <td>Total</td>
         <td colspan="4">1</td>
     </tr>
   </tfoot>   
</table>