Example 8: Forms


html 4 fieldset/legend
 Find it Fast 


html 4 button



html 4 labels




      a password:  



  file content not being sent yet
an image submit.

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


Readonly controls
   

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>