HTML Tables, Forms, and Video/Audio Tag

Thu, Feb 04, 2016
Readings
Quizzes
Assignment
Design a simple questionnaire from scratch using all of the following inputs: text, selection, radio, checkbox, button, password, textarea (as a separate tag), as well as three newer HTML5 inputs.

Tables

Tables are important for structuring data into columns and rows. When placed properly into HTML, tables also become useful for systematizing information not just for appearances, but also for indexing and scraping. The basics of a table are really only three tags:

  • <table> The whole table is encased in this tag.
  • <tr> Each row is in a tr tag, (think “table row”)
  • <td> Then within each row, every cell has its own td (think “table data”)

Below is an example of a basic table with six cells. Notice that the table starts with the rows first, then goes through each cell after that.

<table>
    <tr>
        <td>Apples</td>
        <td>Oranges</td>
        <td>Pears</td>
    </tr>
    <tr>
        <td>Cherries</td>
        <td>Pineapples</td>
        <td>Strawberries</td>
    </tr>
</table>

The HTML above would produce the following:

Apples Oranges Pears
Cherries Pineapples Strawberries

Table headers

There are other HTML table elements, but those three are the most basic. Table headers <th> are important for differentiating cells that contain heading data. And you can further separate a table into its parts semantically using <thead>, <tbody>, and <tfoot>.

This is an example using the <th> for headings, and how it would appear in the browser.

<table>
    <tr>
        <th>Q1</th>
        <th>Q2</th>
        <td>Q3</td>
    </tr>
    <tr>
        <td>Apples</td>
        <td>Oranges</td>
        <td>Pears</td>
    </tr>
    <tr>
        <td>Cherries</td>
        <td>Pineapples</td>
        <td>Strawberries</td>
    </tr>
</table>

(Note the first row has header cells.)

Q1 Q2 Q3
Apples Oranges Pears
Cherries Pineapples Strawberries

Spanning rows and columns

The number of cells in each row should match up. If you want to create a table where a cell might span multiple columns, you should use the following attributes:

  • colspan - This attribute will span a cell multiple columns
  • rowspan - This attribute will span a cell multiple rows

In this example below, the first row will span multiple columns, so it’s the only <td> in the row.

<table>
    <tr>
        <td colspan="3">Apples</td>


    </tr>
    <tr>
        <td>Cherries</td>
        <td>Pineapples</td>
        <td>Strawberries</td>
    </tr>
</table>

The following code would display like this:

Apples
Cherries Pineapples Strawberries

Designing tables

We now use CSS to design tables, and it’s discouraged from using older attributes like width, height and bgcolor.

Forms

Forms can be created with the <form> element. On the web, forms used to rely heavily on attributes like method and action to process the data submitted by the form, but nowadays we often use JavaScript for processing forms. It is still considered good practice to have these as fallbacks for any browsers that might have JavaScript disabled. However, this requires setting up server-side languages like PHP, Python, or Ruby.

Here is a list of different input types for a typical form:

Username: 
<input type="text" name="username" placeholder="Enter your name"><br>

Password: 
<input type="password" name="password" placeholder="Enter your password"><br>

Multiple Choice:
<input type="radio" name="multiple_choice" value="Choice A"> Choice A<br>
<input type="radio" name="multiple_choice" value="Choice B"> Choice B<br>
<input type="radio" name="multiple_choice" value="Choice C"> Choice C<br>

Checkboxes: 
<input type="checkbox" name="check_this" value="Check A"> Check A<br>
<input type="checkbox" name="check_this" value="Check B"> Check B<br>
<input type="checkbox" name="check_this" value="Check C"> Check C<br>

Pulldown menu:
<select name="pulldown">
    <option value="Pulldown 1">Pulldown 1</option>
    <option value="Pulldown 2">Pulldown 2</option>
    <option value="Pulldown 3">Pulldown 3</option>
</select>
<br>

Multiple pulldown: 
<select name="pulldown" multiple="multiple">
    <option value="Multiple pulldown 1">Multiple pulldown 1</option>
    <option value="Multiple pulldown 2">Multiple pulldown 2</option>
    <option value="Multiple pulldown 3">Multiple pulldown 3</option>
</select>
<br>

Textarea:
<textarea rows="3" col="20">Enter text here</textarea>

Upload file:
<input type="file" name="submit_file">
<br>

<button type="button" name="process form">Button</button>

The above code would provide the following example:

Multiple Choice:


Checkboxes:




Labels

Label tags are used to surround related labels of form elements. This helps in identifying the appropriate label to the input element. It also has the benefit of activating the input if the user clicks on the label.

<label for="the_username">Enter your username</label>
<input type="text" name="the_username">

The for="" attribute should match the name attribute of the input element.

Heading tag

Headings are an important way to identify the structure of a document. They signify what’s most important on the page.

A heading generally comes in several parts: The <heading> tag, which surrounds all of the heading elements such as the header (h1, h2, etc.), a byline, a time stamp, and/or a summary of this article.

This is what a heading might look like on a news article:

<heading>
    <h1>This is the main heading for this article</h1>
    <p>By Jeremy Rue</p>
    <time>Jan 1, 2016</time>
    <p>A short summary of what this article is about</p>
</heading>

Inline vs Block

When you type plain text into a word editor to display on a page, you might notice that line breaks are never recorded. In fact, only one space is ever read by the browser between words.

Inline

Some HTML tags do not create a new line. These are tags like <strong>, <em>, <a>, and the <span> tags. When you use these tags, they flow side-by-side like text. Counter-intuitively, an <img> tag is also an inline element, and when placed near text, it will run within the text sometimes creating very weird-looking layouts.

Block

Other tags always create a new line. These are tags like <p>, <div>, and <h1>. Even if you were to type it in the middle of a paragraph, it would create a new line when displayed in the browser.

Controlling it with CSS

This is jumping ahead, but you can actually switch the inline-vs-block property using CSS. The following code would actually make a <div> tag act like an inline element:

div{
    display: inline;
}

We will get into this later. But it’s important to understand the difference between inline vs block elements before we get into CSS.

Video and Audio Tags

There are some relatively new special HTML5 video tags that allow you to display video files right in the browser without any special players or other code.

<video width="800" height="600" poster="image.jpg" preload controls loop>
    <source src="path/to/video.mp4" type="video/mp4" />
    <source src="path/to/video.webm" type="video/webm" />
    <img src="fallback.jpg" />
</video>

The video tags takes the following attributes:

  • preload — The browser should preload the video so it’s ready to play at a moment’s notice.
  • src — Set the URL of the video file
  • poster — An image people will see before your video plays.
  • controls — Controls like a stop/play/mute button, and a scrubber along the bottom where people can skip ahead.

The two <source> tags offer two more more options for video files to be loaded. This creates a fallback system in case the browser doesn’t support a particular video type. (Firefox doesn’t support H.264 mp4 files, for example.) We will use a conversion software to convert from mp4 to webm, which is supported by Internet Explorer and Firefox.

Note: Please see Page 214 in HTML & CSS book for more information.