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.
196 lines
5.1 KiB
196 lines
5.1 KiB
2 years ago
|
<?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>
|
||
|
|
|