Class 2: HTML Forms, Multimedia and More

Today we'll dive into how to make your web pages interactive by collecting user input using HTML forms and enriching your content with multimedia elements and much more.

HTML Forms: Gathering User Input

Forms are essential for any interactive website, allowing users to submit information, log in, search, and more. In this section, we will explore the fundamental concepts of HTML forms.

Basic Form Structure

The <form> element is the container for all input elements. Key attributes include action and method which specify where and how the form data will be sent when submitted.

<form action="/submit-form" method="POST">
    <!-- Form elements go here -->
</form>

Input Types and Elements

The <input> element is the most versatile form control. Its behavior changes based on the type attribute:

text: Single-line text input.
password: Obscured text input for passwords.
email: Input for email addresses, with basic validation.
number: Input for numerical values.
date: Date picker.
checkbox: Allows selection of multiple options.
radio: Allows selection of a single option from a group.
submit: A button to submit the form.
file: For uploading files.

<form action="/login" method="POST">
    <label for="username">Username:</label><br />
    <input type="text" id="username" name="username" /><br /><br />

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>

    <label for="password">Password:</label><br />
    <input type="password" id="password" name="password" /><br /><br />

    <input type="checkbox" id="subscribe" name="subscribe" value="yes" />
    <label for="subscribe">Subscribe to newsletter</label><br /><br />

    <input type="radio" id="html" name="fav_language" value="HTML" />
    <label for="html">HTML</label><br />
    <input type="radio" id="css" name="fav_language" value="CSS" />
    <label for="css">CSS</label><br /><br />

    <input type="submit" value="Submit" />
</form>

Other Form Elements

<textarea>: For multi-line text input, useful for comments or messages.
<select>: For creating dropdown lists where users can choose from predefined options. Uses <option> tags for choices.
<button>: A versatile button element that can be used to submit forms, reset forms, or trigger JavaScript functions.
<label>: Associates text with a form control, improving accessibility.
<fieldset> and <legend>: Group related form elements with a caption.

<form action="/login" method="POST">
    <label for="message">Your Message:</label><br />
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br /><br />

    <label for="country">Country:</label><br />
    <select id="country" name="country">
        <option value="usa">USA</option>
        <option value="canada">Canada</option>
        <option value="uk">UK</option></select><br /><br />

    <fieldset>
        <legend>Contact Information:</legend>
        <label for="email">Email:</label><br />
        <input type="email" id="email" name="email" />
    </fieldset>
    <br />

    <button type="submit">Send Inquiry</button>
</form>

Form Attributes and Client-Side Validation

Important attributes control form behavior, such as action (where to send data), method (HTTP method like GET or POST), and name (for identifying form controls). Basic client-side validation is available using HTML5 attributes like required, minlength, maxlength, and pattern to ensure data integrity before submission.

<form action="/login" method="POST">
    <label for="password">Password (min 8 chars):</label>
    <input type="password" id="password" name="password" required minlength="8" />
    <button type="submit">Login</button>
</form>

Embedding Multimedia Content

HTML5 introduced standard ways to embed audio and video directly into web pages without the need for third-party plugins.

Image Element

The <img> element is used to embed images. The essential attributes are src (source of the image) and alt (alternative text for accessibility and when the image fails to load). Attributes like width and height are used for controlling dimensions.

<img src="images/logo.png" alt="Company Logo" width="150" height="75">
<img src="https://example.com/flower.jpg" alt="A red flower in bloom">

Audio Element

The <audio> element allows you to embed sound content into your web page. Some common attributes are:

controls: Adds standard audio controls (play/pause, volume).
source: Specifies multiple media resources for the browser to choose from.
autoplay: Starts playing the audio automatically (often blocked by browsers).
loop: Repeats the audio.

<audio controls autoplay loop>
    <source src="audio/background-music.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

Video Element

The <video> element is used to embed video content. Key attributes include:

width and height: Sets the dimensions of the video player.
controls: Adds standard video controls (play/pause, volume, fullscreen).
autoplay: Starts playing the video automatically (often blocked by browsers).
loop: Repeats the video.
poster: Specifies an image to be shown while the video is downloading, or until the user hits play.

<video width="640" height="360" controls preload="metadata">
    <source src="video/intro.mp4" type="video/mp4">
    <source src="video/intro.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

Iframes: Embedding Other Documents

An <iframe> is used to embed another HTML document within the current HTML document. It's often used for embedding maps, videos from external sites (like YouTube), or other web pages.

Be cautious with iframes, especially regarding security and performance, as they load an entirely separate web page.

<iframe src="https://www.example.com" width="600" height="400" title="Example Website" ></iframe>

HTML Tables: Structuring Tabular Data

HTML tables are used to display data in a grid-like format, organized into rows and columns. They are ideal for presenting structured data such as financial reports, product lists, or schedules.

Basic Table Structure

A basic HTML table consists of the <table> element, which contains <thead> (table header), <tbody> (table body), and optionally <tfoot> (table footer). Inside these, you'll find <tr> (table row) elements, which in turn contain <th> (table header cell) or <td> (table data cell) elements.

<table>: The container for the entire table.
<thead>: Groups the header content in a table.
<tbody>: Groups the body content in a table.
<tfoot>: Groups the footer content in a table.
<tr>: Defines a table row.
<th>: Defines a header cell in a table. By default, <th> content is bold and centered.
<td>: Defines a standard data cell in a table.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1A</td>
      <td>Data 1B</td>
    </tr>
    <tr>
      <td>Data 2A</td>
      <td>Data 2B</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
</table>

Table Attributes (Basic)

While CSS is primarily used for styling tables, some basic HTML attributes can be useful:

colspan: Specifies the number of columns a cell should span.
rowspan: Specifies the number of rows a cell should span.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="2">Contact Info</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td rowspan="2">555-1234</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane@example.com</td>
    </tr>
  </tbody>
</table>

More HTML Elements and Concepts

HTML Void Elements

Some elements are considered void elements (also known as self-closing tags). These tags do not have a closing tag because they cannot have any child nodes (content or other elements) inside them. They are typically used to embed resources or insert content that doesn't encapsulate other content. Void tags often have attributes that provide necessary information for them to function.

<br>: Inserts a single line break.

This is a line.<br>This is another line.

<img>: Embeds an image. It requires src (source) and alt (alternative text) attributes.
```
<img src=\"image.jpg\" alt=\"A description of the image\">
```
<input>: Used to create interactive controls for web-based forms, to receive data from the user. Its behavior depends on the type attribute.
```
<input type=\"text\" placeholder=\"Enter your name\">
```
<link>: Specifies relationships between the current document and an external resource, most commonly used to link to stylesheets.
```
<link rel=\"stylesheet\" href=\"styles.css\">
```
<meta>: Provides metadata about the HTML document, such as character set, viewport settings, or keywords for search engines.
```
<meta charset=\"UTF-8\">
```
<hr>: Represents a thematic break between paragraph-level elements (e.g., a change of topic).
```
<p>First paragraph.</p>\n<hr>\n<p>Second paragraph.</p>
```

The Preformatted Text Element

The HTML <pre> element represents preformatted text. Text within this element is typically displayed in a non-proportional (monospaced) font, exactly as it is written in the HTML file. This means that whitespace (spaces, tabs, newlines) inside the <pre> tag is preserved, unlike regular HTML text where multiple spaces are collapsed into one, and newlines are ignored.

The <pre> element is commonly used to display:

Code snippets (like the examples seen throughout these lessons)
ASCII art
Poetry or text where line breaks and spacing are crucial

Here's an example:

function greet(name) {
    console.log(`Hello, ${name}!`);
}

greet("World");

Without the <pre> tag, the above Javascript code would lose its indentation and formatting when displayed in a browser. Just see below:


                function greet(name) { console.log(`Hello, ${name}!`); }
                greet("World");

HTML Entities: Displaying Special Characters

HTML entities are used to display reserved characters (like < or >) or characters not found on a standard keyboard (like copyright symbols).

< for <
> for >
& for &
" for "

<p>This is less than &lt; and greater than &gt;.</p>
<p>&copy; 2023 My Website</p>