Forms and Widgets

This is a quick overview of some elements for creating forms and standard GUIs. See the second part for how to make them interactive.

Buttons

A button is easily defined with the BUTTON element. The contents of the element is usually some plain text to act as the label, although you can nest other kinds of content as well.

<button>
    Click me
</button>

By default, buttons are styled to match the operating system of the user. As always, you are free to override styling with CSS.

<style>
.importantButton {
  padding: 0.5rem;
  background: #FD868A;
  border: 1px solid #FA3241;
  text-transform: uppercase;
  font-size: 70%;
}
.importantButton:hover {
    color: white;
}
</style>
<button class="importantButton">
    Click me
</button>

To find out how to make your button do something, read part two.
BUTTON element

Text input

TEXTAREA provides a box-like text input area for multiple lines of text, such as for composing an email:

<textarea rows=4 cols=40>
    Dear John,
    I'm long gone, don't try to catch up.
    Jane
</textarea>

INPUT is good for a single-line of input, or for a few characters.

<input maxlength=2 type="text" value="42">

INPUT can be specified for different types of input, and the browser will smartly adapt - for example to entering numbers, passwords and non-text data. There is also a host of validation options you can set to prevent the wrong kind of input.

List selection

Select boxes a drop-down lists from which an item can be selected.

<select>
  <option>Blue</option>
  <option selected>Red</option>
  <option>Green</option>
</select>

Note the selected attribute for the Red option to make it selected by default. It's possible to associate data values with each option different from what is shown to the user:

<select id="fruit">
  <option value="50">Apple</option>
  <option value="55" selected>Orange</option>
  <option value="60">Peach</option>
</select>

To find out when the selected value has changed, read part two.

A similar form of selection is using "radio buttons". Only one of the buttons can be selected per name used (in this case 'favColour').

<input name="favColour" type="radio" value="blue"> Blue
<input name="favColour" type="radio" value="red"> Red
<input name="favColour" type="radio" value="green"> Green

Blue Red Green

Organising forms

There are a few ways to semantically organise forms and make them accessible. Generally, enclose a logical form with the FORM element, put clusters/groups of elements in a FIELDSET (titled with a LEGEND), and wrap elements with a LABEL where necessary:

<style>
.myForm label {
    display: block;
}
</style>
<form class="myForm">
    <fieldset>
        <legend>Biographical details</legend>
        <label>Name <input name="name" value="Jane"></label>
        <label>Age <input name="age" value="20"></label>
        <label>City
            <select name="city">
                <option>Malmö</option>
                <option>København</option>
                <option>Lund</option>
            </select>
        </label>
    </fieldset>
    <fieldset>
        <legend>Other</legend>
        <label>Hobbies <input name="hobbies" value="belly button lint collecting"></label>
        <label>Pets <input name="pets" value="Sammy the Salamander"></label>
    </fieldset>
    <button>Save</button>
</form>

LEGEND and LABELs can be omitted if necessary.

Note that it's convention to have a name attribute for form elements, sort of like a key to identify the value.

See the second part for how to make them interactive.