Example 8

# Example 8: Forms

html 4 fieldset/legend
Find it Fast
html 4 button
html 4 labels

radio 1 label |
radio 2 |

checkbox 1
checkbox 2

a textarea another textarea size, font set by css a password:
file content not being sent yet
an image submit.

Disabled controls, the image submit should not submit the form.
hello

Readonly controls
bar

Additional tests - changes through the DOM, sizing, scalability, tables

# Select Tests

## Sizing Tests

Three option select no properties | Three option select size=1 | Three option select size=2 | Three option select size=3 | Three option select size=4
combobox box with three items in drop down | combobox box with three items in drop down | list box with three items, two items showing | list box with three items, all three items showing | list box with three items, all three items showing with one blank line
    <select>
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
    <select size=1>
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
    <select size=2>
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
    <select size=3>
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
    <select size=4>
    </select>

## Edge Case Tests

Empty Select size=1 | Empty Select size=4 | Select size=1 - empty option | Select size=1 - option has a single space | Select size=1 - option has a return in the middle of it
You should see a combobox with an empty item drop down | You should see a list box four items high and empty | You should see one empty item in the dropdown | You should see one empty item in the dropdown (the item should have single space) | You should see one item in the dropdown, on one line
    <select size=1>
    </select>
    <select size=4>
    </select>
    <select size=1>
      <option></option>
    </select>
    <select size=1>
      <option> </option>
    </select>
    <select size=1>
      <option>One
    Fish</option>
    </select>

## Style Tests #1

Select 5px Border (Combobox) | Select 5px Border 5px Padding (Combobox)
You should see a combobox with large border | You should see a combobox with large border and padding
    <select size=1 style="border: outset 5px rgb(192,192,192)">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
    <select size=1 style="padding: 5px 5px 5px 5px;
                          border: outset 5px rgb(192,192,192)">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>

## Style Tests #2

Select 5px Border (ListBox) | Select 5px Border 5px Padding (ListBox)
You should see a listbox with large border | You should see a listbox with large border and padding
    <select size=4 style="border: outset 5px rgb(192,192,192)">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
    <select size=4 style="padding: 5px 5px 5px 5px;
                          border: outset 5px rgb(192,192,192)">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>

## Style Tests #3

Select 5px Border, 5px Padding, 5px Margin (Combobox) | Select with an a green option (Combobox)
You should see a combobox with large border and padding | You should see a combobox with the first item is green with yellow text
    <select size=1 style="margin: 5px;
                          padding: 5px;
                          border: outset 5px rgb(192,192,192);">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
    <select size=1>
      <option style="background-color: green;color:yellow;">One</option>
      <option>Two</option>
      <option>Three</option>
    </select>

## Style Tests #4

Select 5px Border, 5px Padding, 5px Margin (Listbox) | Select with an a green option (Listbox)
You should see a listbox with large border and padding | You should see a listbox with the first item is green with yellow text
    <select size=1 style="margin: 5px;
                          padding: 5px;
                          border: outset 5px rgb(192,192,192);">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
    <select size=1>
      <option style="background-color: green;color:yellow;">One</option>
      <option>Two</option>
      <option>Three</option>
    </select>

## Style Tests #5

Option has 1px Border, 1px Padding (Combobox) | Option has 1px Border, 1px Padding (Listbox)
You should see a combobox with the second item having border and padding | You should see a combobox with the second item having border and padding
    <select size=1>
      <option>One
      <option style="border: 1px outset rgb(192,192,192);
                     padding 1px;">Two
      <option>Three
    </select>
    <select size=4>
      <option>One
      <option style="border: 1px outset rgb(192,192,192);
                     padding 1px;">Two
      <option>Three
    </select>

## Optgroup Test

Select size=1 with Optgroup (Combobox) | Select size=4 with Optgroup (Listbox)
You should see a Combobox with optgroups, where the optgroups are not selectable | You should see a Listbox with optgroups, where the optgroups are not selectable
    <select size=1>
      <optgroup label="China">
        <option>Keemun</option>
        <option>Yunnan</option>
      </optgroup>
      <optgroup label="India">
        <option>Assam</option>
        <option>Darjeeling</option>
      </optgroup>
      <optgroup label="Japan">
        <option>Gyokuro</option>
        <option>Hoji-cha</option>
      </optgroup>
    </select>
    <select size=4>
      <optgroup label="China">
        <option>Keemun</option>
        <option>Yunnan</option>
      </optgroup>
      <optgroup label="India">
        <option>Assam</option>
        <option>Darjeeling</option>
      </optgroup>
      <optgroup label="Japan">
        <option>Gyokuro</option>
        <option>Hoji-cha</option>
      </optgroup>
    </select>

## Disabled Option Test

Select size=1 with Disabled option (Combobox) | Select size=4 with Disabled option (Listbox)
You should see a Combobox with optgroups, the second item is non-selectable | You should see a Listbox with optgroups, the second item is non-selectable
    <select size=1>
      <option>One</option>
      <option disabled>Two</option>
      <option>Three</option>
    </select>
    <select size=4>
      <option>One</option>
      <option disabled>Two</option>
      <option>Three</option>
    </select>

## Option Label Test

Select size=1 with Option label (Combobox) | Select size=4 with Option label (Listbox)
You should see a Combobox with optgroups, the second item's label should be "Label" (known bug because the label and contet shouldn't be appended) | You should see a Listbox with optgroups, the second item's label should be "Label" (known bug because the label and contet shouldn't be appended)
    <select size=1>
      <option>One</option>
      <option label="Label">Two</option>
      <option>Three</option>
    </select>
    <select size=4>
      <option>One</option>
      <option label="Label">Two</option>
      <option>Three</option>
    </select>