{the jump}

Tables and Forms

Session 3

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 to original~~
download zip from here

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/current 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 (look here)
- beware number (text and special characters)
- affects virtual keyboards
value - determines the value in the box
placeholder - the grey text that appears in the box. DOESN'T get submitted as a value. Disappears 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 free-form text, like messages or address input

'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 for="first_name">
    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.

'checked' attribute selects it by default.

<input type="checkbox" name="sport" 
    value="badminton" id="badminton">

<input type="checkbox" name="sport" 
    value="sailing" id="sailing"
checked="checked">

<input type="checkbox" name="sport" 
    value="football" id="football">

<input type="checkbox" name="sport" 
    value="rugby" id="rugby">

Selects

Originally for single choices from a list of options.
Can be set to accept multiple in HTML5 using the 'multiple' keyword
Use if you want to save space. (Use if more than 6 items, but depends on UX)
options
- value attribute = value for system
- can group with optgroup

<select name="title">
    <option value="0">Mr.</option>
    <option value="1">Mrs.</option>
    <option value="2">Dr</option>
    <option value="3">Prof.</option>
</select>

<select name="hobbies" multiple>
    <option value="squash">Squash</option>
    <option value="climbing">Climbing</option>
    <option value="chess">Chess</option>
    <option value="dogging">Dogging</option>
</select>

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
    <optgroup label="Theropods">
        <option>Tyrannosaurus</option>
        <option>Velociraptor</option>
        <option>Deinonychus</option>
    </optgroup>
    <optgroup label="Sauropods">
        <option>Diplodocus</option>
        <option>Saltasaurus</option>
        <option>Apatosaurus</option>
    </optgroup>
</select>

Inputs & Buttons

Originally buttons were meant to be something that could be customised to do something on the page, like simple javascript.
<input type="submit"> was how you submitted a form
Now you can use <button type="submit">
You can add icons to buttons, you can't to inputs, because its content is html, not system based

<!-- old ways -->

<input type="submit" value="save!">
<input type="reset" value="Reset!">
<input type="button" value="open menu">


<!-- new ways -->

<button type="submit">Sign up!</button>
<button>Show menu</button>
<button type="reset">Reset</button>

Fieldsets & Legends

Fieldsets outline a choice
Legends give titles to those choices

<form>

    <fieldset>
        <legend>Name</legend>
        <label for="first_name">First Name</label>
        <input type="text" id="first_name"
            name="first_name">

        <label for="last_name">Last Name</label>
        <input type="text" id="last_name"
            name="last_name">
    </fieldset>

    <fieldset>
        <legend>Gender</legend>
        <label for="male">Male</label>
        <input type="radio" id="male"
            name="gender" value="male">

        <label for="female">Female</label>
        <input type="radio" id="female"
            name="gender" value="female">

        <label for="other">Other</label>
        <input type="radio" id="other"
            name="gender" value="other">
    </fieldset>

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

</form>

Task

Make a t-shirt ordering form.

Must have:

Title (select)
Name
Email
Address (textarea)
size: xs, s, m, L, XL (pick one)
gender: (m / f / other)
Patterns: 'back print', 'front print', 'details' (none, 1 or many)

Use <form method="POST" action="https://form-reader.netlify.app/.netlify/functions/formReader"> as the form tag

Advanced Forms

The <datalist> element

mdn
Allows a type of auto-suggest
Good for 'data purity' but not foolproof

<label for="course-level">Dive Course Level</label>
<input list="course-level-options" id="course-level" name="course-level">

<datalist id="course-level-options">
    <option>Discover Diving</option>
    <option>Open Water Diver</option>
    <option>Sports Diver</option>
    <option>Rescue Diver</option>
    <option>Dive Master</option>
</datalist>

Text

demo

Validation options

Disabled attribute

mdn
disabled="disabled" (disabled) or disabled="" (enabled)
BUT, you should just use a 'boolean attribute' (i.e. just write disabled)
You can put it on: <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> and <input>
disabled fields are NOT submitted

readonly attribute

mdn
Like disabled, only the element is still focussabled (and hence accessible) and the value will be submitted
It's often the opposite of <input type="hidden"> where you want the user to see that there's a value being submitted in the form, usually based on a choice or information that they have previously provided when filling out the form

'required' attribute

mdn
The form cannot be submitted unless a value is passed
This is down to HTML5 constraint API

'autocomplete' attribute

mdn
Gives permission for the user-agent to automate filling out of fields
Available on input, select, textarea, form
To make it work on sub-form elements you may need:
- Have a name and/or id attribute
- Be descendants of a <form> element
- The form to have a submit button

More Validation

Turn validation off with novalidate on the form tag

Netlify Forms

Painlessly add form handling with 1 word! (docs)