wl-forms-training

Apply Style to Winlink Forms

Purpose

Update the form look and feel using Cascading Style Sheets.

Cascading Style Sheets

CSS 3.0 is a declarative language that defines rules about how elements of a document (and the document itself) appear:

The more you know about CSS, the more effective the form style will be.

Style For Accessibility

CSS is great for managing web page accessibility concerns including:

Advice: Be conservative with gradients.

What This Module Covers

This training module is not comprehensive:

What to Expect

If you have none or very little CSS experience:

If you are an experienced programmer:

The idea is to introduce the capabilities so you can pick it up and run with it.

Employing CSS

There are 3 ways to employ CSS on a web document:

  1. Create a file and name it ‘style.css’. Add a stylesheet reference in the header of the HTML, pointing to the file.
  2. Define CSS rules within a <style> element within the web document.
  3. Define CSS rules in-line with the HTML element they will apply to.

There is a fourth: Some compbination of 1, 2, and/or 3.

Benefits and Drawbacks of file-based, style element rules, and in-line styles:

How CSS Works

Recall: HTML provides the Layout for the content of a web page.

CSS defines properties like color and width so the page and HTML elements know what size and color they are.

Inheritance:

Special CSS functions allow selecting what elements in a hierarchy have styles applied to them.

As an example, a font family and background color are defined and applied to the body element:

body {
    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
    background: #3399FF;
}

HTML elements within the <body> element will inherit CSS properties that apply to them:

<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body>
        <h2>Document Heading</h2>
    </body>
</html>

This is the “cascading” part of CSS. Take advantage of it when setting styles to your web page.

Helpful Tools

Browser Developer Tools:

When a style doesn’t seem to be applied, or doesn’t do what you thought it should, start by looking at the Elements tab, click on the element with the problem, and review the Styles sub-tab (next to Computed and Layout).

Developer Tools Inspector/Elements Tool

  1. Launch your web page and then open Developer Tools.
  2. Right-click on an element (like a button) on your web page and select Inspect

HTML is displayed on the left (the document Layout), and CSS is displayed on the right (the style application tree).

  1. The selected (inspect) element should be highlighted (selected) in the Developer Tools window.
  2. The Styles tab (on the right) shows the CSS rules that are applied to that element.

Note the following style application notations:

A note about user agent styling:

Targeting HTML Elements

Just like Javascript, CSS can target HTML elements individually, as a group, or through inheritance (the “cascading” part of CSS).

Target elements of type:

section {
    display: flex;
    justify-content: flex-end;
    padding: .2em;
}

<section>
    <input type="button" name="SaveButton" id="saveButton" value="Save Data" />
</section>

Target elements with some class:

.input-container {
    width: 100%;
    margin: auto;
    text-align: center;
    padding: .2em;
}

<div class="input-container">
    <label for="mycall">Enter your callsign:</label>
    <input type="text" name="mycall" id="myCallsign" />
</div>

Target one specific element by unique ID:

#submit-container {
    display: flex;
    justify-content: flex-end;
    padding: .2em;
}

<div id="submit-container">
    <input type="submit" name="Submit" value="Submit" />
</div>

Common CSS Properties

font-family: Pick easy to read, well-spaced fonts like Segoe UI, Tahoma, Verdana, and non-serif fonts.

font-size: 16px is a common default, and 18px is a pretty good setting to help improve readability. The downside is if you assign a default font-size, adjusting font-size of other elements requires a little more work. In any case, larger or smaller screens should probably use slightly larger or smaller values - see Responsive Design section below for more information.

background: Assign a color to the background of the element(s). Best supported color definitions are in hexadecimal (0-F) formatted and assigned like #rrggbb (see next subsection).

width and height: Assign element size using pixels (px), percentage %, and other units (there are many to choose from).

margin, border, and padding:

display Defines how the element will be displayed:

Hex Color Hints

As you change Hex Color values, the Code Editor might pop-up a color-picker for you to preview your selection, and to allow you to point-and-click at the actual color and shading you want.

Also note: Transparecy is possible by adding a fourth HEX value. For example, a semi-transparent blue would be #0000FF88

Responsive Design

Make web pages render well on varying screen sizes and resolutions, maintaining usability and readability.

This is a very large, advanced topic. There are benefits from knowing a few basics, followed by some studying to learn the advanced techniques to make an awesome web page.

Media Queries

CSS will apply rules based on what the browser document says the resolution and screen dimensions are:

body {
    font-size: 18px;
}

@media screen and (width < 650px) {
    label,
    input,
    button {
        font-size: 0.7em;
    }

    form {
        max-width: 100%;
        padding: 0.4em;
        background: linear-gradient(#11ccee, #11aaff);
        border-radius: 20px;
    }
}

@media screen and (width >= 650px) {
    label,
    input,
    button {
        font-size: 1em;
    }

    form {
        max-width: 650px;
        padding: 0.6em;
        background: linear-gradient(#11ccee, #11aaff);
        border-radius: 20px;
    }
}

The @media statement tells CSS to only apply the rules when the parameters are met:

Keep the number of @media conditions to a minimum to keep the benefit of the effort very high.

Toggle Device Toolbar

Developer Tools has a little button named ‘Toggle Device Toolbar’ (or similar - in Chrome it is in the upper-left hand corner, just to the left of the ‘Elements’ tab).

Clicking this button alters the ‘screen’ property of the browser display window. Doing so now will probably load an iPhone view with dimensions that represent a mobile device.

There is a “Dimensions” drop-down in the upper-left area of the browser window that allows selection of many common mobile device screen sizes.

There is a “Rotate” button in the upper-right area of the browser window that allows rotating the screen.

Advice:

Responsive Design Challenge

  1. Copy styled-form.html from module 2 and name it responsive-form.html (or something that makes sense to you).
  2. Copy the above CSS from into a <style> element within the <body> of the html and save the changes.
  3. Copy the full path to the html file you just edited and paste it into your favorite browser’s URL bar and press Go/Enter key.
  4. Open Developer Tools and inspect the HTML and CSS.
  5. Click “Toggle Device Toolbar” (Chrome) to enable the mobile device view and try different Dimension settings (including rotation) to see how the form responds.
  6. Update the code in responsive-form.html by replacing “Form Fields Start” example code with “Form Fields Responsive” example code, save the changes, and refresh the browser window.
  7. Try different Dimension settings again and see how the page respondes.

Form Fields Start (just the HTML):

<label for="mycall">Enter your callsign:</label>
<input type="text" name="mycall" />
<label for="tocall">Enter recipients callsign:</label>
<input type="text" name="tocall" />

Form Fields Responsive:

<div class="horizontally-aligned">
    <label for="mycall">Enter your callsign:</label>
    <input type="text" name="mycall" />
</div>
<div class="horizontally-aligned">
    <label for="tocall">Enter recipients callsign:</label>
    <input type="text" name="tocall" />
</div>

Adding CSS rules to apply to .horizontally-aligned will provide even more control over the placement of the elements.

Adjusting Media Queries will help to refine exact bahavior based on screen sizes your users are most likely to be using. Remember to keep the number of cutoff values to just a few to keep for over complicating the code.

Install

Put files into Winlink Express Global Folders\Templates directory:

Remember: You can move the javascript to a separate file if you wish, but remember to:

  1. Store it to the same directory as these files (for simplicity).
  2. Add a <script ref=""> element just before the end of body </body> element tag.

Use

  1. Open Winlink Express.
  2. Click ‘New Message’
  3. Click ‘Select Template’
  4. Click tagged-styledform-template.txt in the Global Templates directory.
  5. Click the ‘Select’ button and the default browser will launch, displaying the styled-form.html form.
  6. Complete the form by adding values to the text boxes.
  7. Click Save button to download the form data to a file.
  8. Click Submit button and the form data is transferred to the new message window.

Resources

Move on to Module 5 - Create a Form Viewer

Return to Root README