{the jump}

HTML5 Tags, Forms and Tables

Session 3

<div> & <span>

<div> is the generic grouping element
<span> is the generic text grouping element
They may not make much sense without CSS
demo

What was new in HTML5?

https://www.htmlgoodies.com/tutorials/html5/new-tags-in-html5.html

https://codepen.io/jmsherry/pen/OJPwKPa

HTML FORMS & TABLES

Tables

Tables are:

A way of showing data
used to be the way we laid out pages
Accessible
- compared with something like d3 graphs

Table Structure (* = optional)

Begins with a <table> tag
<caption> * (must be the first child of the table tag)
<colgroup>* (defines a group of columns to style)
- demo (nth child tho)
<thead>* (the header element, for multiple head rows)
<tfoot>* (defines the footer)
<tbody>* (used if there is tfoot or thead)
- thead, tbody & tfoot are to allow scrolling if table is long
- can have multiple (demo)

Table cells

Put inside table rows <tr>
Can be <td> (table data - standard table cell)
or <th>* for header cell (that gives the title of that row or column)

Examples

<!-- Simple table with header -->
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<!-- Simple table -->
<table>
  <caption>People</caption>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<!-- Table with thead,
 tfoot, and tbody -->

<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

Scope

What the heading applies to.

Can be set to:

row
col
colgroup
auto

<table>
  <colgroup>
    <col style="background-color: #0f0">
    <col span="2">
  </colgroup>
  <tr>
    <th scope="col">Product</th>
    <th scope="col">Width</th>
    <th scope="col">Height</th>
  </tr>
  <tr>
    <th scope="row">mini</th>
    <td>200</td>
    <td>100</td>
  </tr>
  <tr>
    <th scope="row">maxi</th>
    <td>500</td>
    <td>300</td>
  </tr>
</table>

Spans

colspan and rowspan allow you to bridge gaps

<table>
    <tr>
        <th>Column 1 heading</th>
        <th>Column 2 heading</th>
        <th>Column 3 heading</th>
    </tr>
    <tr>
        <td>Row 2, cell 1</td>
        <td colspan="2">Row 2, cell 2, also 
            spanning Row 2, cell 3</td>
    </tr>
    <tr>
        <td rowspan="2">Row 3, cell 1, also 
            spanning Row 4, cell 1</td>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
    </tr>
    <tr>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
    </tr>
</table>

Making Tables Accessible

https://webaim.org/techniques/tables/data

Task: Create League Table

link

HTML FORMS

What are they for?

They allow you to input information into the system
- typically log in, sign up, etc.
By default that data is sent to the server
- synchronously
- via http(s)

A typical form

  <form method="GET">
    <label for="firstName">First Name</label>
    <input type="text" name="firstname" id="firstName" placeholder="First name">

    <button type="submit">Submit</button>
  </form>

Form attributes of note:

action - where a form sends its data, e.g. signup.php (default: same url)
method - how it sends it there (GET, POST, etc.)(default: GET)
enctype - the MIME type. i.e. how it's encoded. (If you have a file upload on your form then use multipart/form-data)(default: x-www-form-urlencoded; can be overridden by formenctype on button)

Input

Attributes:

name - determines the name of that piece of data.
- used in auto-complete
type: what it is
- beware number (text and special characters
value - determines the value in the box
placeholder - the grey text that appears in the box. DOESN'T get submitted as a value. Gets wiped when you start typing.

<!-- standard text box -->
<input type="text">

<!-- password input -->
<input type="password">

<!-- number input -->
<input type="number">

<!-- email input -->
<input type="email">

<!-- tel input -->
<input type="tel">

Textarea

For large blocks of text.

'rows' and 'cols' determine how much text is visible before scrolling.

Text between tags becomes text in the box (no value attribute)

For placeholder to work tag ends must be touching

<textarea name="textarea" rows="10" cols="50">
Write something here
</textarea>

Labels

Labels are there to explain form elements to the user.
They make the form accessible.
Placeholder is not a replacement for label.
They can wrap in various ways.
the 'for' attribute should match the 'id' attribute of the input to which it refers. It is not needed if label wraps input

<label for="first_name">First Name</label>

<input type="text" id="first_name" name="first_name" 
placeholder="What is your first name?">


<!-- or -->

<label>
    First Name
    <input type="text" id="first_name" name="first_name"
    placeholder="What is your first name?">
</label>

Radio Buttons

These are there for 'OR' choices, like 'adult/child'.

They will only work if the 'name' attribute is set to the same thing.

The 'value' attribute is what is sent.

'checked' attribute selects it by default.

<input type="radio" name="status" 
    value="adult" id="adult">

<input type="radio" name="status" 
    value="child" id="child">

Checkboxes

These are there for 'AND' choices, like sports.

Again, the 'name' attribute should be set to the same thing.

Again, the 'value' attribute is what is sent.