RetroZilla/webshell/tests/viewer/samples/test8.html

663 lines
18 KiB
HTML
Raw Normal View History

2015-10-21 05:03:22 +02:00
<html>
<head>
<title>Example 8</title>
<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;
}
</style>
<meta name="crc" content=230811735>
</head>
<body>
<H1>Example 8: Forms</H1>
<BR>
<FORM METHOD="GET" ACTION="http://search.yahoo.com/bin/search" NAME="searchform">
<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;">
<LEGEND style="background-color:rgb(180, 200, 220); border: 1px solid gray; padding: 0px;" align=left>&nbsp;Find it <b>Fast</b>&nbsp;</LEGEND>
<INPUT type=text value=travel NAME="p" SIZE=15 MAXLENGTH=80 style="margin-right:10px; background-color: rgb(190, 190, 190);">
<INPUT type=submit value="GO">
<INPUT TYPE="HIDDEN" NAME="a" VALUE="n">
</FIELDSET>
<BR><BR>
<div align=center><bold><font size=2>html 4 button</font></bold></div>
<BUTTON type=submit style="background-image: url(bg.jpg)">
<font size=4><B>This button contains a table
<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>
and a background image.
<BR>It will also submit the form.
</B></font>
</BUTTON>
<BR>
</FORM>
<BR><BR>
<FORM METHOD="POST" ACTION="http://www.mcp.com/cgi-bin/post-query" NAME="echo">
<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>
<textarea name=a rows=4 cols=10 value="a textarea">a textarea</textarea>
&nbsp;&nbsp;
<textarea name=a id=textarea1 value="a textarea">another textarea
size, font set by css</textarea>
&nbsp;&nbsp; a password:&nbsp;&nbsp;<INPUT TYPE="PASSWORD">
<BR><BR>
<select name=select2 id=select1 size=4 multiple>
<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>
<select name=select1 size=2>
<option selected>option 1</option>
<option>option 2</option>
</select>
<select name=select3 size=1>
<option selected>option 1</option>
<option>option 2</option>
</select>
<BR><BR>
<input type=file size=20 name=file value=myfile>&nbsp;&nbsp;file content not being sent yet
<BR>
<input type=reset name=reset id=input2 value="RESET">
<input type=submit id=input1 name=submit value="SUBMIT">
<input type=image src=raptor.jpg width=50 height=50 name=imageSubmit> an image submit.
</form>
<BR>
<HR>
Disabled controls, the image submit should not submit the form.
<BR>
<FORM METHOD="GET" ACTION="http://search.yahoo.com/bin/search" NAME="searchform">
<input type=text size=5 disabled> &nbsp; <input type=submit disabled> &nbsp;
<INPUT type=image src=raptor.jpg width=50 height=50 name=imageSubmit disabled> &nbsp;
<input type=checkbox disabled> &nbsp; <input type=radio disabled> &nbsp;
<input type=reset disabled> &nbsp; <input type=file disabled> &nbsp;
<BR>
<textarea disabled>hello</textarea> &nbsp
<select disabled>
<option>one</option>
<option>two</option>
</select>
</form>
<BR>
<BR>
<HR>
Readonly controls
<BR>
<FORM>
<input type=text readonly size=5 value=hello readonly> &nbsp; <input type=password value=foo disabled> &nbsp;
<textarea readonly>bar</textarea>
</form>
<BR>
<HR>
Additional tests -&nbsp;
<A href=test8dom.html>changes through the DOM</A>,
<A href=test8siz.html>sizing</A>,
<A href=test8sca.html>scalability</A>,
<A href=test8tab.html>tables</A>
<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>
&lt;select>
&lt;option>One&lt;/option>
&lt;option>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=1>
&lt;option>One&lt;/option>
&lt;option>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=2>
&lt;option>One&lt;/option>
&lt;option>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=3>
&lt;option>One&lt;/option>
&lt;option>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=4>
&lt;/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>
&lt;select size=1>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=4>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=1>
&lt;option>&lt;/option>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=1>
&lt;option>&nbsp;&lt;/option>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=1>
&lt;option>One
Fish&lt;/option>
&lt;/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>
&lt;select size=1 style="border: outset 5px rgb(192,192,192)">
&lt;option>One&lt;/option>
&lt;option>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=1 style="padding: 5px 5px 5px 5px;
border: outset 5px rgb(192,192,192)">
&lt;option>One&lt;/option>
&lt;option>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/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>
&lt;select size=4 style="border: outset 5px rgb(192,192,192)">
&lt;option>One&lt;/option>
&lt;option>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=4 style="padding: 5px 5px 5px 5px;
border: outset 5px rgb(192,192,192)">
&lt;option>One&lt;/option>
&lt;option>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/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 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=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>
&lt;select size=1 style="margin: 5px;
padding: 5px;
border: outset 5px rgb(192,192,192);">
&lt;option>One&lt;/option>
&lt;option>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=1>
&lt;option style="background-color: green;color:yellow;">One&lt;/option>
&lt;option>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/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>
<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>
</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>
&lt;select size=1 style="margin: 5px;
padding: 5px;
border: outset 5px rgb(192,192,192);">
&lt;option>One&lt;/option>
&lt;option>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=1>
&lt;option style="background-color: green;color:yellow;">One&lt;/option>
&lt;option>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/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>
&lt;select size=1>
&lt;option>One</option>
&lt;option style="border: 1px outset rgb(192,192,192);
padding 1px;">Two</option>
&lt;option>Three</option>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=4>
&lt;option>One</option>
&lt;option style="border: 1px outset rgb(192,192,192);
padding 1px;">Two</option>
&lt;option>Three</option>
&lt;/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>
<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>
</center></td>
<td><center>
<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>
</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>
&lt;select size=1>
&lt;optgroup label="China">
&lt;option>Keemun&lt;/option>
&lt;option>Yunnan&lt;/option>
&lt;/optgroup>
&lt;optgroup label="India">
&lt;option>Assam&lt;/option>
&lt;option>Darjeeling&lt;/option>
&lt;/optgroup>
&lt;optgroup label="Japan">
&lt;option>Gyokuro&lt;/option>
&lt;option>Hoji-cha&lt;/option>
&lt;/optgroup>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=4>
&lt;optgroup label="China">
&lt;option>Keemun&lt;/option>
&lt;option>Yunnan&lt;/option>
&lt;/optgroup>
&lt;optgroup label="India">
&lt;option>Assam&lt;/option>
&lt;option>Darjeeling&lt;/option>
&lt;/optgroup>
&lt;optgroup label="Japan">
&lt;option>Gyokuro&lt;/option>
&lt;option>Hoji-cha&lt;/option>
&lt;/optgroup>
&lt;/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>
&lt;select size=1>
&lt;option>One&lt;/option>
&lt;option disabled>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=4>
&lt;option>One&lt;/option>
&lt;option disabled>Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/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>
&lt;select size=1>
&lt;option>One&lt;/option>
&lt;option label="Label">Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/select>
</pre>
</td>
<td>
<pre>
&lt;select size=4>
&lt;option>One&lt;/option>
&lt;option label="Label">Two&lt;/option>
&lt;option>Three&lt;/option>
&lt;/select>
</pre>
</td>
</tr>
</table>
</form>
</body>
</html>