Blame | Last modification | View Log | RSS feed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Dojo Form Widgets Test</title><script type="text/javascript" src="../../dojo/dojo.js"djConfig="isDebug: false, parseOnLoad: true"></script><script type="text/javascript">dojo.require("dijit.form.Form");dojo.require("dijit.form.ValidationTextBox");dojo.require("dijit.form.ComboBox");dojo.require("dijit.form.FilteringSelect");dojo.require("dijit.form.CheckBox");dojo.require("dijit.form.DateTextBox");dojo.require("dijit.form.CurrencyTextBox");dojo.require("dijit.form.NumberSpinner");dojo.require("dijit.form.Slider");dojo.require("dijit.form.Textarea");dojo.require("dijit.Editor");dojo.require("dijit.form.Button");dojo.require("dojo.data.ItemFileReadStore");dojo.require("dojo.parser"); // scan page for widgets and instantiate them// make dojo.toJson() print dates correctly (this feels a bit dirty)Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};</script><style type="text/css">@import "../../dojo/resources/dojo.css";@import "../themes/tundra/tundra.css";@import "../themes/tundra/tundra_rtl.css";@import "../tests/css/dijitTests.css";.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 INPUT {width: 2.5em;}.medium INPUT {width: 10em;}.long INPUT {width: 20em;}.firstLabel {display: inline-block;display: -moz-inline-box;width: 10em;min-width: 10em;}.secondLabel {width: auto;margin-left: 5em;margin-right: 1em;}fieldset label {margin-right: 1em;}.noticeMessage {display: block;float: right;font-weight: normal;font-family:Arial, Verdana, sans-serif;color:#663;font-size:0.9em;}</style></head><body class="tundra"><div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"url="../tests/_data/states.json"></div><h2 class="pageSubContentTitle">Job Application Form</h2><p>This is just a little demo of dijit's form widgets</p><form dojoType="dijit.form.Form" id="myForm" action="showPost.php"execute="alert('Execute form w/values:\n'+dojo.toJson(arguments[0],true));"><div class="formQuestion"><span class="noticeMessage">As you type in the text below, notice how your input is autocorrected and also the auto completion on the state field.</span><span>Name And Address</span></div><div class="formAnswer"><label class="firstLabel" for="name">Name *</label><input type="text" id="name" name="name" class="medium"dojoType="dijit.form.ValidationTextBox"required="true"ucfirst="true" invalidMessage=""/><br><label class="firstLabel" for="address">Address *</label><input type="text" id="address" name="address" class="long"dojoType="dijit.form.ValidationTextBox"required="true"trim="true"ucfirst="true" /><br><label class="firstLabel" for="city">City *</label><select dojoType="dijit.form.ComboBox"value=""autocomplete="true"hasDownArrow="false"><option></option><option>Chicago</option><option>Los Angeles</option><option>New York</option><option>San Francisco</option><option>Seattle</option></select><label class="secondLabel" for="state">State</label><input dojoType="dijit.form.FilteringSelect"store="stateStore" class="short" id="state" name="state" /><label class="secondLabel" for="zip">Zip *</label><input type="text" id="zip" name="zip" class="medium"dojoType="dijit.form.ValidationTextBox"trim="true"required="true"regExp="[0-9][0-9][0-9][0-9][0-9]"invalidMessage="5 digit zipcode (ex: 23245)"/><br><label class="firstLabel" for="dob">DOB *</label><input id="dob" name="dateOfBirth" dojoType="dijit.form.DateTextBox" required=true/></div><div class="formQuestion"><span class="noticeMessage">Custom checkboxes and radio buttons...</span><span>Desired position</span></div><div class="formAnswer"><label class="firstLabel" for="position">Position</label><fieldset id="position" class="dijitInline"><input type="checkBox" name="position" id="it" value="it" dojoType="dijit.form.CheckBox" /> <label for="it">IT</label><input type="checkBox" name="position" id="marketing" value="marketing" dojoType="dijit.form.CheckBox" /> <label for="marketing">Marketing</label><input type="checkBox" name="position" id="business" value="business" dojoType="dijit.form.CheckBox" /> <label for="business" style="margin-right: 7em;">Business</label></fieldset><label class="secondLabel" for="hours">Hours</label><fieldset id="hours" class="dijitInline"><input type="radio" name="hours" id="full" value="full" dojoType="dijit.form.RadioButton" /> <label for="full">Full time</label><input type="radio" name="hours" id="part" value="part" dojoType="dijit.form.RadioButton" /> <label for="part">Part time</label></fieldset></div><div class="formQuestion"><span class="noticeMessage">slider and spinner ...</span><span>Education and Experience</span></div><div class="formAnswer"><table class="dijitReset"><tr><td><label class="firstLabel" for="school">Education level</label></td><td style="padding-left: 2em;"><span dojoType="dijit.form.HorizontalSlider" id="school" name="school"minimum="1"value="2"maximum="4"discreteValues="4"showButtons="false"style="width:200px; height: 40px;"><span dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=4 style="height:5px;"></span><ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration"style="height:1em;font-size:75%;color:gray;"><li>high school</li><li>college</li><li>masters</li><li>PhD</li></ol></span></td><td><label class="secondLabel" for="experience">Work experience (years, 0-40)</label></td><td><input dojoType="dijit.form.NumberSpinner"id="experience" name="experience"value="1"constraints="{min: 0, max:40, places:0}"size=3></td></tr></table></div><div class="formQuestion"><span class="noticeMessage">Rich text editor that expands as you type in text</span><label for="description">Self description</label></div><div class="formAnswer"><textarea dojoType="dijit.Editor" minHeight="5em" id="description" name="description">Write a brief summary of <i>your</i> job skills... using <b>rich</b> text.</textarea></div><div class="formQuestion"><span class="noticeMessage">Text area that expands as you type in text</span><label for="references">References</label></div><div class="formAnswer"><textarea dojoType="dijit.form.Textarea" id="references" name="references">Write your references here (plain text)</textarea></div><center><button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSave" type=submit>OK</button></center></form></body></html>