mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-07 12:15:51 +00:00
133 lines
4.0 KiB
HTML
133 lines
4.0 KiB
HTML
<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;
|
|
}
|
|
BUTTON {
|
|
background-image: url(rock_gra.gif);
|
|
}
|
|
</style>
|
|
</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> Find it <b>Fast</b> </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="border: 5px outset gray; padding: 3px;">
|
|
<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>
|
|
|
|
<textarea name=a id=textarea1 value="a textarea">another textarea
|
|
size, font set by css</textarea>
|
|
a password: <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> 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> <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>  
|
|
<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> <input type=password value=foo disabled>
|
|
<textarea readonly>bar</textarea>
|
|
</form>
|
|
<BR>
|
|
|
|
<HR>
|
|
Additional tests -
|
|
<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>
|
|
</body>
|
|
</html>
|