Week 10: Forms & Tables

Agenda

Zoom Tutorial
- HTML Tables
- HTML Forms Basics
In-Class
- HTML Forms Advanced

In-Class Tutorial

Forms & Tables

Let's take a look at the basics of creating forms and tables.

Deliverables

In-Class 9

Sign Up Form

Let's apply our learning on Forms through a practical Sign Up Form example.

Due: Fri Nov 10, 2023

Assignment 9

Contact Form

Create a basic Contact Form.

Due: Sun Nov 12, 2023

# HTML Tables

In the early days of the web there was no effective way to control layout with CSS. So, the table element was used for this purpose.

Now we have much better control of our layout with CSS.

When you have tabular data, like a school schedule or a train schedule, you should use an HTML table element to create the relationships between the columns and rows.

HTML Tables are not to be used for building layouts.
Instead, they are to display tabular data like a schedule or timetable or spreadsheet.
The tags used in tables include:
- <table> - the table container
- <tbody> - the body of the table
- <thead> - the header area of the table
- <tr> - table row
- <th> - table heading cell
- <td> - table data cell (most common tag)
- <col> - column definition used inside the table at the top
- <colgroup> - group of columns
- <caption> - the label/description for a table
Here is a sample table

<table>
  <caption>
    This is the label for the table
  </caption>
  <thead>
    <tr>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>-</td>
      <td>MAD9012</td>
      <td>-</td>
      <td>MAD9116</td>
      <td>-</td>
    </tr>
    <tr>
      <td>MAD9100</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>MAD9100</td>
    </tr>
    <tr>
      <td>-</td>
      <td>MAD9015</td>
      <td>MAD9015</td>
      <td>-</td>
      <td>-</td>
    </tr>
  </tbody>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# Pseudo Classes

Pseudo-classes represent different states in which HTML elements can exist. A link can be :hover, :visited, :active. A form element can be :required or :valid.

All the pseudo-classes start with a single : colon.

The Pseudo-classes can be used as part of a CSS selector.

MDN reference for pseudo-classes (opens new window)

# Pseudo Elements

Pseudo-elements are parts of the page that can be targetted with CSS but that do NOT have an HTML tag around the content. Just like pseudo-classes, they can be used alone or as part of a CSS selector.

Pseudo-elements have two colons in front of the selector name. Eg: ::after ::before

With ::after and ::before we can actually add new content through the CSS, using the content property. The generated content can be styled with any properties we want.

Other pseudo-element examples are ::first-letter ::first-line.

div::after {
  content: "new content";
  color: red;
  display: block;
}

1
2
3
4
5

You can also use the content property to create a dynamic counter with CSS (opens new window)

MDN reference for pseudo-elements (opens new window)

# HTML Forms

# The Form Element

Any webpage can have one or more <form> elements
The <form> element is a container for all the form controls
Each form needs a unique name.

<form
  name="login-form"
  action="login.php"
  method="post"
  enctype="application/x-www-form-urlencoded"
></form>

1
2
3
4
5
6

The action attribute explains where the form data will be sent.
The method can be post or get. These explain how the form data is bundled.
The enctype can be the default value (as shown) or multipart/form-data.
To submit a file in the form you need to set the enctype to multipart/form-data

# Form Labels

You can put a line around a group of form elements with a <fieldset>
You can attach a label to the fieldset with a <legend> tag
Each user control should also have a <label> element.
Clicking on a <label> will place the focus inside the connected <input>
The way to connect a <label> to an <input> or <select> or <textarea> is with the for attribute inside the <label> and an id attribute inside the form element.

<fieldset>
  <legend>Choose a Flavour</legend>
  <p>
    <label for="choc">Chocolate</label>
    <input type="radio" name="flavour" id="choc" value="Chocolate" />
  </p>
  <p>
    <label for="van">Chocolate</label>
    <input type="radio" name="flavour" id="van" value="Vanilla" />
  </p>
</fieldset>

1
2
3
4
5
6
7
8
9
10
11

# Input Elements

There are numerous types of user controls that you can use in a form.

<input
  type="text"
  name="user"
  id="user"
  value=""
  placeholder="default text"
  required
/>
<input
  type="email"
  name="user"
  id="user"
  value=""
  placeholder="user@domain.com"
/>
<input type="password" name="user" id="user" value="" autocomplete="no" />
<input type="number" name="num" id="num" value="1" min="1" max="99" step="1" />
<input type="color" name="bg" id="bg" value="#bada55" />
<input type="checkbox" name="alive" id="alive" value="yes" checked />
<input type="radio" name="flavour" id="flavour" value="vanilla" checked />
<input type="hidden" name="price" id="price" value="12.99" />
<input type="search" name="search" id="search" />
<input
  type="range"
  name="price"
  id="price"
  min="1.00"
  max="30.00"
  step="2.50"
/>
<input type="date" name="dt" id="dt" />
<input type="datetime" name="dt" id="dt" />
<input type="datetime-local" name="dt" id="dt" />
<input type="time" name="timmy" id="timmy" />
<input type="tel" name="phone" id="phone" />
<input type="file" name="resume" id="resume" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

A textarea is a multi-line text input area.
It has rows and cols attributes to say how much space is created for the user input but this is not usually used. Instead, CSS gets used to set the size.

<textarea id="comments" name="comments">Default text goes here</textarea>

To create a dropdown list in HTML we use a combination of two elements.

<select id="people" name="people">
  <optgroup label="female">
    <option value="Linda">Linda</option>
    <option value="Tina">Tina</option>
  </optgroup>
  <optgroup label="male">
    <option value="Bob">Bob</option>
    <option value="Gene">Gene</option>
  </optgroup>
</select>

1
2
3
4
5
6
7
8
9
10

If you want to allow the user to select more than one value, you can add the multiple attribute to the <select> element.
If you want to change the dropdown list to scrollable list then you can add a size attribute with a number as the value.
If you want to have one of the options selected by default then you can add a selected attribute to one of the options.
You can also group <option>s together by wrapping them in an <optgroup> element.

# Buttons

There are several types of buttons in HTML forms

<input type="submit" id="btnSubmit" name="btnSubmit" value="Send" />
<input type="reset" id="btnClear" name="btnClear" value="Clear" />
<input type="image" id="btnImg" name="btnImg" src="./img/pic.jpg" />
<input type="button" id="btnAdd" name="btnAdd" value="Add" />

<button id="btnClick">Click Me</button>