1998-04-13 20:24:54 +00:00
< html >
1998-05-19 17:51:21 +00:00
< head >
1998-04-15 19:23:17 +00:00
< title > Example 8< / title >
1998-05-19 17:51:21 +00:00
< style >
INPUT#input1 {
font-size: large;
}
INPUT#input2 {
font-size: medium;
}
TEXTAREA#textarea1 {
width: 300px;
height: 120px;
font-size: large;
}
SELECT#select1 {
font-size: large;
}
1999-03-06 19:43:13 +00:00
1998-05-19 17:51:21 +00:00
< / style >
1999-02-19 00:54:27 +00:00
< meta name = "crc" content = 230811735 >
1998-05-19 17:51:21 +00:00
< / head >
1998-04-13 20:24:54 +00:00
< body >
1998-04-15 19:23:17 +00:00
1998-04-28 18:59:38 +00:00
< H1 > Example 8: Forms< / H1 >
1998-04-24 21:37:30 +00:00
< BR >
1998-04-28 18:59:38 +00:00
< FORM METHOD = "GET" ACTION = "http://search.yahoo.com/bin/search" NAME = "searchform" >
1998-10-22 23:00:37 +00:00
< div align = center > < bold > < font size = 2 > html 4 fieldset/legend< / font > < / bold > < / div >
< INPUT type = image src = raptor.jpg width = 50 height = 50 name = imageSubmit >
< FIELDSET style = "background-color: rgb(200, 220, 240); display: inline; border: 2px solid black; margin-left: 10px; padding: 10px;" >
1998-10-08 19:04:57 +00:00
< LEGEND style = "background-color:rgb(180, 200, 220); border: 1px solid gray; padding: 0px;" align = left > Find it < b > Fast< / b > < / LEGEND >
1998-10-13 21:31:26 +00:00
< INPUT type = text value = travel NAME = "p" SIZE = 15 MAXLENGTH = 80 style = "margin-right:10px; background-color: rgb(190, 190, 190);" >
1998-10-08 04:38:41 +00:00
< INPUT type = submit value = "GO" >
< INPUT TYPE = "HIDDEN" NAME = "a" VALUE = "n" >
< / FIELDSET >
1998-10-17 00:35:32 +00:00
< BR > < BR >
1998-10-22 23:00:37 +00:00
< div align = center > < bold > < font size = 2 > html 4 button< / font > < / bold > < / div >
1999-03-06 19:43:13 +00:00
< BUTTON type = submit style = "bg.jpg" >
1998-10-22 23:00:37 +00:00
< font size = 4 > < B > This button contains a table
1998-10-17 00:35:32 +00:00
< table border = 3 > < TR border = 1 > < TD > CELL 1< / TD > < TD > CELL 2< TD > < / TR >
< TR > < TD > CELL 3< / TD > < TD > CELL 4< / TD > < / TR > < / table >
1998-10-22 23:00:37 +00:00
and a background image.
< BR > It will also submit the form.
1998-10-17 00:35:32 +00:00
< / B > < / font >
< / BUTTON >
< BR >
1998-04-28 18:59:38 +00:00
< / FORM >
1998-10-17 00:35:32 +00:00
1998-10-08 04:38:41 +00:00
< BR > < BR >
1998-10-08 19:04:57 +00:00
< FORM METHOD = "POST" ACTION = "http://www.mcp.com/cgi-bin/post-query" NAME = "echo" >
1998-10-22 23:00:37 +00:00
< div align = center > < bold > < font size = 2 > html 4 labels< / font > < / bold > < / div >
< table >
< tr >
< td > < label for = radio1 style = "margin-right: 5px;" > radio 1 label< / label > < / td >
< td > < input id = radio1 type = radio name = radio > < / td > < / tr >
< tr >
< td > < label for = radio2 style = "border: 1px solid blue; margin-right: 5px;" > radio 2< / label > < / td >
< td > < input id = radio2 type = radio name = radio > < / td > < / tr > < / table >
< BR >
< label > < input type = checkbox name = check1 checked > checkbox 1< / label >
< BR >
< label > < input type = checkbox name = check2 > checkbox 2< / label >
< BR > < BR >
< HR >
1998-05-19 17:51:21 +00:00
< textarea name = a rows = 4 cols = 10 value = "a textarea" > a textarea< / textarea >
< textarea name = a id = textarea1 value = "a textarea" > another textarea
size, font set by css< / textarea >
1998-10-08 19:04:57 +00:00
a password: < INPUT TYPE = "PASSWORD" >
1998-05-19 17:51:21 +00:00
< BR > < BR >
< select name = select2 id = select1 size = 4 multiple >
1998-05-13 17:43:35 +00:00
< option > option 1< / option >
< option > option 2< / option >
< option selected > option 3< / option >
< option > option 4< / option >
< option > option 5< / option >
< option > option 6< / option >
< / select >
1998-05-19 17:51:21 +00:00
< select name = select1 size = 2 >
< option selected > option 1< / option >
< option > option 2< / option >
< / select >
1998-05-13 17:43:35 +00:00
< select name = select3 size = 1 >
< option selected > option 1< / option >
< option > option 2< / option >
< / select >
1998-05-19 17:51:21 +00:00
< BR > < BR >
< input type = file size = 20 name = file value = myfile > file content not being sent yet
1998-04-24 21:37:30 +00:00
< BR >
1998-05-19 17:51:21 +00:00
< input type = reset name = reset id = input2 value = "RESET" >
< input type = submit id = input1 name = submit value = "SUBMIT" >
1998-09-23 17:55:28 +00:00
< input type = image src = raptor.jpg width = 50 height = 50 name = imageSubmit > an image submit.
1998-04-13 20:24:54 +00:00
< / form >
1998-05-29 22:44:13 +00:00
< BR >
1998-10-13 21:31:26 +00:00
< HR >
Disabled controls, the image submit should not submit the form.
1998-05-29 22:44:13 +00:00
< BR >
1998-10-13 21:31:26 +00:00
< FORM METHOD = "GET" ACTION = "http://search.yahoo.com/bin/search" NAME = "searchform" >
< input type = text size = 5 disabled > < input type = submit disabled >
< INPUT type = image src = raptor.jpg width = 50 height = 50 name = imageSubmit disabled >
< input type = checkbox disabled > < input type = radio disabled >
< input type = reset disabled > < input type = file disabled >
< BR >
< textarea disabled > hello< / textarea > & nbsp
< select disabled >
< option > one< / option >
< option > two< / option >
< / select >
< / form >
< BR >
1998-10-19 20:37:40 +00:00
< BR >
< HR >
Readonly controls
< BR >
< FORM >
< input type = text readonly size = 5 value = hello readonly > < input type = password value = foo disabled >
< textarea readonly > bar< / textarea >
< / form >
< BR >
1998-10-13 21:31:26 +00:00
< HR >
1998-05-29 22:44:13 +00:00
Additional tests -
1998-11-09 23:30:16 +00:00
< A href = test8dom.html > changes through the DOM< / A > ,
1998-05-29 22:44:13 +00:00
< A href = test8siz.html > sizing< / A > ,
< A href = test8sca.html > scalability< / A > ,
1998-09-23 17:55:28 +00:00
< A href = test8tab.html > tables< / A >
1999-09-15 22:04:04 +00:00
< BR >
< HR >
< h1 > Select Tests< / h1 > < br >
< h2 > Sizing Tests< / h2 >
< form >
< table border = 1 style = "background-color: rgb(192,192,192)" >
< tr >
< td > < center > < b > Three option select no properties< / b > < / center > < / td >
< td > < center > < b > Three option select size=1< / b > < / center > < / td >
< td > < center > < b > Three option select size=2< / b > < / center > < / td >
< td > < center > < b > Three option select size=3< / b > < / center > < / td >
< td > < center > < b > Three option select size=4< / b > < / center > < / td >
< / tr >
< tr >
< td > < center > < select > < option > One< / option > < option > Two< / option > < option > Three< / option > < / select > < / center > < / td >
< td > < center > < select size = 1 > < option > One< / option > < option > Two< / option > < option > Three< / option > < / select > < / center > < / td >
< td > < center > < select size = 2 > < option > One< / option > < option > Two< / option > < option > Three< / option > < / select > < / center > < / td >
< td > < center > < select size = 3 > < option > One< / option > < option > Two< / option > < option > Three< / option > < / select > < / center > < / td >
< td > < center > < select size = 4 > < option > One< / option > < option > Two< / option > < option > Three< / option > < / select > < / center > < / td >
< / tr >
< tr >
< td > combobox box with three items in drop down< / td >
< td > combobox box with three items in drop down< / td >
< td > list box with three items, two items showing< / td >
< td > list box with three items, all three items showing< / td >
< td > list box with three items, all three items showing with one blank line< / td >
< / tr >
< tr >
< td >
< pre >
< select>
< option>One< /option>
< option>Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=1>
< option>One< /option>
< option>Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=2>
< option>One< /option>
< option>Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=3>
< option>One< /option>
< option>Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=4>
< /select>
< / pre >
< / td >
< / tr >
< / table >
< br >
< br >
< h2 > Edge Case Tests< / h2 >
< table border = 1 style = "background-color: rgb(192,192,192)" >
< tr >
< td > < center > < b > Empty Select size=1< / b > < / center > < / td >
< td > < center > < b > Empty Select size=4< / b > < / center > < / td >
< td > < center > < b > Select size=1 - empty option< / b > < / center > < / td >
< td > < center > < b > Select size=1 - option has a single space< / b > < / center > < / td >
< td > < center > < b > Select size=1 - option has a return in the middle of it< / b > < / center > < / td >
< / tr >
< tr >
< td > < center > < select size = 1 > < / select > < / center > < / td >
< td > < center > < select size = 4 > < / select > < / center > < / td >
< td > < center > < select size = 1 > < option > < / option > < / select > < / center > < / td >
< td > < center > < select size = 1 > < option > < / option > < / select > < / center > < / td >
< td > < center > < select size = 1 > < option > One
Fish< / option > < / select > < / center > < / td >
< / tr >
< tr >
< td > You should see a combobox with an empty item drop down< / td >
< td > You should see a list box four items high and empty< / td >
< td > You should see one empty item in the dropdown< / td >
< td > You should see one empty item in the dropdown (the item should have single space)< / td >
< td > You should see one item in the dropdown, on one line< / td >
< / tr >
< tr >
< td >
< pre >
< select size=1>
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=4>
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=1>
< option>< /option>
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=1>
< option> < /option>
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=1>
< option>One
Fish< /option>
< /select>
< / pre >
< / td >
< / tr >
< / table >
< br >
< br >
< h2 > Style Tests #1< / h2 >
< table border = 1 style = "background-color: rgb(192,192,192)" >
< tr >
< td > < center > < b > Select 5px Border (Combobox)< / b > < / center > < / td >
< td > < center > < b > Select 5px Border 5px Padding (Combobox)< / b > < / center > < / td >
< / tr >
< tr >
< td > < center > < select size = 1 style = "border: outset 5px rgb(192,192,192)" > < option > One< / option > < option > Two< / option > < option > Three< / option > < / select > < / center > < / td >
< td > < center > < 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 > < / center > < / td >
< / tr >
< tr >
< td > You should see a combobox with large border< / td >
< td > You should see a combobox with large border and padding< / td >
< / tr >
< tr >
< td >
< pre >
< select size=1 style="border: outset 5px rgb(192,192,192)">
< option>One< /option>
< option>Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< td >
< pre >
< 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>
< / pre >
< / td >
< / tr >
< / table >
< br >
< br >
< h2 > Style Tests #2< / h2 >
< table border = 1 style = "background-color: rgb(192,192,192)" >
< tr >
< td > < center > < b > Select 5px Border (ListBox)< / b > < / center > < / td >
< td > < center > < b > Select 5px Border 5px Padding (ListBox)< / b > < / center > < / td >
< / tr >
< tr >
< td > < center > < select size = 4 style = "border: outset 5px rgb(192,192,192)" > < option > One< / option > < option > Two< / option > < option > Three< / option > < / select > < / center > < / td >
< td > < center > < 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 > < / center > < / td >
< / tr >
< tr >
< td > You should see a listbox with large border< / td >
< td > You should see a listbox with large border and padding< / td >
< / tr >
< tr >
< td >
< pre >
< select size=4 style="border: outset 5px rgb(192,192,192)">
< option>One< /option>
< option>Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< td >
< pre >
< 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>
< / pre >
< / td >
< / tr >
< / table >
< br >
< br >
< h2 > Style Tests #3< / h2 >
< table border = 1 style = "background-color: rgb(192,192,192)" >
< tr >
< td > < center > < b > Select 5px Border, 5px Padding, 5px Margin (Combobox)< / b > < / center > < / td >
< td > < center > < b > Select with an a green option (Combobox)< / b > < / center > < / td >
< / tr >
< tr >
< td > < center > < select size = 1 > < option > One< / option > < option > Two< / option > < option > Three< / option > < / select > < / center > < / td >
< td > < center > < select size = 1 > < option style = "background-color: green;color:yellow;" > One< / option > < option > Two< / option > < option > Three< / option > < / select > < / center > < / td >
< / tr >
< tr >
< td > You should see a combobox with large border and padding< / td >
< td > You should see a combobox with the first item is green with yellow text< / td >
< / tr >
< tr >
< td >
< pre >
< select size=1 style="margin: 5px;
1999-09-15 22:28:50 +00:00
padding: 5px;
1999-09-15 22:04:04 +00:00
border: outset 5px rgb(192,192,192);">
< option>One< /option>
< option>Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=1>
< option style="background-color: green;color:yellow;">One< /option>
< option>Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< / tr >
< / table >
< br >
< br >
< h2 > Style Tests #4< / h2 >
< table border = 1 style = "background-color: rgb(192,192,192)" >
< tr >
< td > < center > < b > Select 5px Border, 5px Padding, 5px Margin (Listbox)< / b > < / center > < / td >
< td > < center > < b > Select with an a green option (Listbox)< / b > < / center > < / td >
< / tr >
< tr >
1999-09-15 22:28:50 +00:00
< td > < center > < select size = 4 style = "margin: 5px; padding: 5px; border: outset 5px rgb(192,192,192);" > < option > One< / option > < option > Two< / option > < option > Three< / option > < / select > < / center > < / td >
< td > < center > < select size = 4 > < option style = "background-color: green;color:yellow;" > One< / option > < option > Two< / option > < option > Three< / option > < / select > < / center > < / td >
1999-09-15 22:04:04 +00:00
< / tr >
< tr >
< td > You should see a listbox with large border and padding< / td >
< td > You should see a listbox with the first item is green with yellow text< / td >
< / tr >
< tr >
< td >
< pre >
< select size=1 style="margin: 5px;
1999-09-15 22:28:50 +00:00
padding: 5px;
1999-09-15 22:04:04 +00:00
border: outset 5px rgb(192,192,192);">
< option>One< /option>
< option>Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=1>
< option style="background-color: green;color:yellow;">One< /option>
< option>Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< / tr >
< / table >
< br >
< br >
< h2 > Style Tests #5< / h2 >
< table border = 1 style = "background-color: rgb(192,192,192)" >
< tr >
< td > < center > < b > Option has 1px Border, 1px Padding (Combobox)< / b > < / center > < / td >
< td > < center > < b > Option has 1px Border, 1px Padding (Listbox)< / b > < / center > < / td >
< / tr >
< tr >
< td > < center >
< select size = 1 >
< option > One< / option >
< option style = "border: 1px outset rgb(192,192,192);padding 1px;" > Two< / option >
< option > Three< / option >
< / select >
< / center > < / td >
< td > < center >
< select size = 4 >
< option > One< / option >
< option style = "border: 1px outset rgb(192,192,192);padding 1px;" > Two< / option >
< option > Three< / option >
< / select >
< / center > < / td >
< / tr >
< tr >
< td > You should see a combobox with the second item having border and padding< / td >
< td > You should see a combobox with the second item having border and padding< / td >
< / tr >
< tr >
< td >
< pre >
< select size=1>
< option>One< / option >
< option style="border: 1px outset rgb(192,192,192);
padding 1px;">Two< / option >
< option>Three< / option >
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=4>
< option>One< / option >
< option style="border: 1px outset rgb(192,192,192);
padding 1px;">Two< / option >
< option>Three< / option >
< /select>
< / pre >
< / td >
< / tr >
< / table >
< br >
< br >
< h2 > Optgroup Test< / h2 >
< table border = 1 style = "background-color: rgb(192,192,192)" >
< tr >
< td > < center > < b > Select size=1 with Optgroup (Combobox)< / b > < / center > < / td >
< td > < center > < b > Select size=4 with Optgroup (Listbox)< / b > < / center > < / td >
< / tr >
< tr >
< td > < center >
< select size = 1 >
< optgroup label = "China" >
< option > Keemun
< option > Yunnan
< / optgroup >
< optgroup label = "India" >
< option > Assam
< option > Darjeeling
< / optgroup >
< optgroup label = "Japan" >
< option > Gyokuro
< option > Hoji-cha
< / optgroup >
< / select >
< / center > < / td >
< td > < center >
< select size = 4 >
< optgroup label = "China" >
< option > Keemun
< option > Yunnan
< / optgroup >
< optgroup label = "India" >
< option > Assam
< option > Darjeeling
< / optgroup >
< optgroup label = "Japan" >
< option > Gyokuro
< option > Hoji-cha
< / optgroup >
< / select >
< / center > < / td >
< / tr >
< tr >
< td > You should see a Combobox with optgroups, where the optgroups are not selectable< / td >
< td > You should see a Listbox with optgroups, where the optgroups are not selectable< / td >
< / tr >
< tr >
< td >
< pre >
< select size=1>
< optgroup label="China">
< option>Keemun
< option>Yunnan
< /optgroup>
< optgroup label="India">
< option>Assam
< option>Darjeeling
< /optgroup>
< optgroup label="Japan">
< option>Gyokuro
< option>Hoji-cha
< /optgroup>
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=4>
< optgroup label="China">
< option>Keemun
< option>Yunnan
< /optgroup>
< optgroup label="India">
< option>Assam
< option>Darjeeling
< /optgroup>
< optgroup label="Japan">
< option>Gyokuro
< option>Hoji-cha
< /optgroup>
< /select>
< / pre >
< / td >
< / tr >
< / table >
< br >
< br >
< h2 > Disabled Option Test< / h2 >
< table border = 1 style = "background-color: rgb(192,192,192)" >
< tr >
< td > < center > < b > Select size=1 with Disabled option (Combobox)< / b > < / center > < / td >
< td > < center > < b > Select size=4 with Disabled option (Listbox)< / b > < / center > < / td >
< / tr >
< tr >
< td > < center >
< select size = 1 >
< option > One< / option >
< option disabled > Two< / option >
< option > Three< / option >
< / select >
< / center > < / td >
< td > < center >
< select size = 4 >
< option > One< / option >
< option disabled > Two< / option >
< option > Three< / option >
< / select >
< / center > < / td >
< / tr >
< tr >
< td > You should see a Combobox with optgroups, the second item is non-selectable< / td >
< td > You should see a Listbox with optgroups, the second item is non-selectable< / td >
< / tr >
< tr >
< td >
< pre >
< select size=1>
< option>One< /option>
< option disabled>Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=4>
< option>One< /option>
< option disabled>Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< / tr >
< / table >
< br >
< br >
< h2 > Option Label Test< / h2 >
< table border = 1 style = "background-color: rgb(192,192,192)" >
< tr >
< td > < center > < b > Select size=1 with Option label (Combobox)< / b > < / center > < / td >
< td > < center > < b > Select size=4 with Option label (Listbox)< / b > < / center > < / td >
< / tr >
< tr >
< td > < center >
< select size = 1 >
< option > One< / option >
< option label = "Label" > Two< / option >
< option > Three< / option >
< / select >
< / center > < / td >
< td > < center >
< select size = 4 >
< option > One< / option >
< option label = "Label" > Two< / option >
< option > Three< / option >
< / select >
< / center > < / td >
< / tr >
< tr >
< td > 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)< / td >
< td > 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)< / td >
< / tr >
< tr >
< td >
< pre >
< select size=1>
< option>One< /option>
< option label="Label">Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< td >
< pre >
< select size=4>
< option>One< /option>
< option label="Label">Two< /option>
< option>Three< /option>
< /select>
< / pre >
< / td >
< / tr >
< / table >
< / form >
1998-04-13 20:24:54 +00:00
< / body >
< / html >
