You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
195 lines
5.1 KiB
195 lines
5.1 KiB
<?xml version="1.0" encoding="UTF-8"?> |
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> |
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
|
<head> |
|
<title>Job Application Form</title> |
|
|
|
<script type="text/javascript"> |
|
var djConfig = { |
|
isDebug: true |
|
}; |
|
</script> |
|
<script type="text/javascript" src="../../dojo.js"></script> |
|
<script type="text/javascript"> |
|
dojo.require("dojo.widget.validate"); |
|
dojo.require("dojo.widget.ComboBox"); |
|
dojo.require("dojo.widget.Checkbox"); |
|
dojo.require("dojo.widget.Editor"); |
|
dojo.require("dojo.widget.DatePicker"); |
|
dojo.require("dojo.widget.Button"); |
|
</script> |
|
<script type="text/javascript"> |
|
dojo.widget.validate.ValidationTextbox.prototype.validColor="white"; |
|
</script> |
|
<style type="text/css"> |
|
body { |
|
padding: 1em; |
|
} |
|
.formQuestion { |
|
background-color:#d0e3f5; |
|
padding:0.3em; |
|
font-weight:900; |
|
font-family:Verdana, Arial, sans-serif; |
|
font-size:0.8em; |
|
color:#5a5a5a; |
|
} |
|
.formAnswer { |
|
background-color:#f5eede; |
|
padding:0.3em; |
|
margin-bottom:1em; |
|
width: 100%; |
|
} |
|
.pageSubContentTitle { |
|
color:#8e8e8e; |
|
font-size:1em; |
|
font-family:Verdana, Arial, sans-serif; |
|
margin-bottom:0.75em; |
|
} |
|
.small { |
|
width: 2.5em; |
|
} |
|
.medium { |
|
width: 10em; |
|
} |
|
.long { |
|
width: 20em; |
|
} |
|
|
|
span.invalid, span.missing { |
|
display: inline; |
|
margin-left: 1em; |
|
font-weight: bold; |
|
font-style: italic; |
|
font-family: Arial, Verdana, sans-serif; |
|
color: #f66; |
|
font-size: 0.9em; |
|
} |
|
|
|
.noticeMessage { |
|
display: block; |
|
float: right; |
|
font-weight: normal; |
|
font-family:Arial, Verdana, sans-serif; |
|
color:#663; |
|
font-size:0.9em; |
|
} |
|
/* group multiple buttons in a row */ |
|
div .dojoButton { |
|
float: left; |
|
margin-left: 10px; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body > |
|
<h2 class="pageSubContentTitle">Job Application Form</h2> |
|
<p>This is just a little demo of dojo's form widgets</p> |
|
<form method="get" id="form1" action=""> |
|
<div class="formQuestion"> |
|
<span class="noticeMessage"> |
|
As you type in the text below, notice how your input is auto |
|
corrected and also the auto completion on the state field. |
|
</span> |
|
<span class="emphasise">Name And Address</span> |
|
</div> |
|
<table class="formAnswer" style="width: 100%;"> |
|
<tr> |
|
<td class="emphasise">Name*</td> |
|
<td width="100%"> |
|
<input type="text" name="name" class="medium" |
|
dojoType="ValidationTextBox" |
|
required="true" |
|
ucfirst="true" /> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="emphasise">Address</td> |
|
<td> |
|
<input type="text" name="address" class="medium" |
|
dojoType="ValidationTextBox" |
|
trim="true" |
|
ucfirst="true" /> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="emphasise">City*</td> |
|
<td> |
|
<input type="text" name="city" class="medium" |
|
dojoType="ValidationTextBox" |
|
trim="true" |
|
required="true" |
|
ucfirst="true" /> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="emphasise">State</td> |
|
<td> |
|
<input dojoType="combobox" |
|
dataUrl="../../tests/widget/comboBoxData.js" style="width: 300px;" name="foo.bar" /> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="emphasise">Zip*</td> |
|
<td> |
|
<input type="text" name="zip" class="medium" |
|
dojoType="UsZipTextbox" |
|
trim="true" |
|
required="true" |
|
invalidMessage="Invalid US Zip Code." /> |
|
</td> |
|
</tr> |
|
</table> |
|
|
|
<div class="formQuestion"> |
|
<span class="noticeMessage">Custom checkboxes have custom images...</span> |
|
<span class="emphasise">Skills</span> |
|
</div> |
|
<div class="formAnswer"> |
|
<input type="checkbox" name="cb1" id="cb1" dojoType="Checkbox" /> <label for="cb1">IT</label><br /> |
|
<input type="checkbox" name="cb2" id="cb2" dojoType="Checkbox" /> <label for="cb2">Marketing</label><br /> |
|
<input type="checkbox" name="cb3" id="cb3" dojoType="Checkbox" /> <label for="cb3">Business</label><br /> |
|
</div> |
|
|
|
<div class="formQuestion"> |
|
<span class="noticeMessage">Rich text editor that expands as you type in text</span> |
|
<span class="emphasise">Self description</span> |
|
</div> |
|
<div class="formAnswer"> |
|
<textarea dojoType="Editor" items="formatblock;|;insertunorderedlist;insertorderedlist;|;bold;italic;underline;strikethrough;|;createLink;" minHeight="5em"> |
|
Write a brief summary of <i>your</i> job skills... using <b>rich</b> text. |
|
</textarea> |
|
</div> |
|
|
|
<div class="formQuestion"> |
|
<span class="emphasise">Desired employment length</span> |
|
</div> |
|
<table class="formAnswer" style="width: 100%;"> |
|
<tr> |
|
<td>Start date</td> |
|
<td><div dojoType="datepicker"/></td> |
|
<td>End date</td> |
|
<td><div dojoType="datepicker"/></td> |
|
</tr> |
|
</table> |
|
|
|
<table align="center"> |
|
<tr> |
|
<td style="width: 7em;"> |
|
<button dojoType="Button"> |
|
<img src="../../demos/widget/Mail/cancel.gif" height="18" alt="Cancel" /> |
|
Cancel |
|
</button> |
|
</td> |
|
<td style="width: 7em;"> |
|
<button dojoType="Button"> |
|
<img src="../../demos/widget/Mail/ok.gif" height="18" alt="OK" /> |
|
OK |
|
</button> |
|
</td> |
|
</tr> |
|
</table> |
|
</form> |
|
</body> |
|
</html> |
|
|
|
|