root / trunk / demos / widget / Form.html

Revision 6854, 6.9 kB (checked in by bill, 2 years ago)

minor fixes

Line 
1<?xml version="1.0" encoding="UTF-8"?>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5<head>
6        <title>Job Application Form</title>
7
8        <script type="text/javascript">
9                var djConfig = {
10                                        isDebug: true
11                };
12        </script>
13        <script type="text/javascript" src="../../dojo.js"></script>
14        <script type="text/javascript">
15                dojo.require("dojo.widget.ValidationTextbox");
16                dojo.require("dojo.widget.ComboBox");
17                dojo.require("dojo.widget.Checkbox");
18                dojo.require("dojo.widget.Editor2");
19                dojo.require("dojo.widget.Editor2Plugin.DialogCommands");
20                dojo.require("dojo.widget.Editor2Plugin.ColorPicker");
21                dojo.require("dojo.widget.DatePicker");
22                dojo.require("dojo.widget.Spinner");
23                dojo.require("dojo.widget.Slider");
24                dojo.require("dojo.widget.Button");
25        </script>
26        <script type="text/javascript">
27                        dojo.widget.ValidationTextbox.prototype.validColor="white";
28        </script>
29        <style type="text/css">
30        .formQuestion {
31                background-color:#d0e3f5;
32                padding:0.3em;
33                font-weight:900;
34                font-family:Verdana, Arial, sans-serif;
35                font-size:0.8em;
36                color:#5a5a5a;
37        }
38        .formAnswer {
39                background-color:#f5eede;
40                padding:0.3em;
41                margin-bottom:1em;
42                width: 100%;
43        }
44        .pageSubContentTitle {
45                        color:#8e8e8e;
46                        font-size:1em;
47                        font-family:Verdana, Arial, sans-serif;
48                        margin-bottom:0.75em;
49        }
50        .small {
51                width: 2.5em;
52        }
53        .medium {
54                width: 10em;
55        }
56        .long {
57                width: 20em;
58        }
59
60        span.invalid, span.missing {
61                display: inline;
62                margin-left: 1em;
63                font-weight: bold;
64                font-style: italic;
65                font-family: Arial, Verdana, sans-serif;
66                color: #f66;
67                font-size: 0.9em;
68        }
69
70        .noticeMessage {
71                display: block;
72                float: right;
73                font-weight: normal;
74                font-family:Arial, Verdana, sans-serif;
75                color:#663;
76                font-size:0.9em;
77        }
78        /* group multiple buttons in a row */
79        div .dojoButton {
80                float: left;
81                margin-left: 10px;
82        }
83        label {
84                padding-right: 2em;
85        }
86        </style>
87</head>
88
89        <body >
90                <h2 class="pageSubContentTitle">Job Application Form</h2>
91                <p>This is just a little demo of dojo's form widgets</p>
92                <form  method="get" id="form1" action="">
93                        <div class="formQuestion">
94                                <span class="noticeMessage">
95                                        As you type in the text below, notice how your input is auto
96                                        corrected and also the auto completion on the state field.
97                                </span>
98                                <span class="emphasise">Name And Address</span>
99                        </div>
100                        <table class="formAnswer" style="width: 100%;">
101                                <tr>
102                                        <td class="emphasise">Name*</td>
103                                        <td width="100%">
104                                                <input type="text" name="name" class="medium"
105                                                        dojoType="ValidationTextBox"
106                                                        required="true" 
107                                                        ucfirst="true" />
108                                        </td>
109                                </tr>
110                                <tr>
111                                        <td class="emphasise">Address</td>
112                                        <td>
113                                                <input type="text" name="address" class="medium"
114                                                        dojoType="ValidationTextBox"
115                                                        trim="true" 
116                                                        ucfirst="true" />
117                                        </td>
118                                </tr>
119                                <tr>
120                                        <td class="emphasise">City*</td>
121                                        <td>
122                                                <input type="text" name="city" class="medium"
123                                                        dojoType="ValidationTextBox"
124                                                        trim="true" 
125                                                        required="true" 
126                                                        ucfirst="true" />
127                                        </td>
128                                </tr>
129                                <tr>
130                                        <td class="emphasise">State</td>
131                                        <td>
132                                                <input dojoType="combobox"
133                                                        dataUrl="../../tests/widget/comboBoxData.js" style="width: 300px;" name="foo.bar" />
134                                        </td>
135                                </tr>
136                                <tr>
137                                        <td class="emphasise">Zip*</td>
138                                        <td>
139                                                <input type="text" name="zip" class="medium"
140                                                        dojoType="UsZipTextbox"
141                                                        trim="true" 
142                                                        required="true" 
143                                                        invalidMessage="Invalid US Zip Code." />
144                                        </td>
145                                </tr>
146                        </table>
147
148                        <div class="formQuestion">
149                                <span class="noticeMessage">Custom checkboxes have custom images...</span>
150                                <span class="emphasise">Skills</span>
151                        </div>
152                        <div class="formAnswer">
153                                <input type="checkbox" name="cb1" id="cb1" dojoType="Checkbox" /> <label for="cb1">IT</label>
154                                <input type="checkbox" name="cb2" id="cb2" dojoType="Checkbox" /> <label for="cb2">Marketing</label>
155                                <input type="checkbox" name="cb3" id="cb3" dojoType="Checkbox" /> <label for="cb3">Business</label>
156                        </div>
157
158                        <div class="formQuestion">
159                                <span class="noticeMessage">Custom radio boxes too ...</span>
160                                <span class="emphasise">Education level</span>
161                        </div>
162                        <div class="formAnswer">
163                                <input type="checkbox" name="education" id="rb1" dojoType="RadioButton" value="hs"/> <label for="rb1">high school</label>
164                                <input type="checkbox" name="education" id="rb2" dojoType="RadioButton" value="bachelors"/> <label for="rb2">college</label>
165                                <input type="checkbox" name="education" id="rb3" dojoType="RadioButton" value="masters"/> <label for="rb3">master's degree</label>
166                                <input type="checkbox" name="education" id="rb4" dojoType="RadioButton" value="phd"/> <label for="rb4">PhD</label>
167                        </div>
168
169                        <div class="formQuestion">
170                                <span class="noticeMessage">slider and spinner ...</span>
171                                <span class="emphasise">Experience</span>
172                        </div>
173                        <div class="formAnswer">
174                                Work experience: <div id="horizontalSlider" dojoType="SliderHorizontal" 
175                                        initialValue="5" minimum="0" maximum="40" snapValues="41" activeDrag="true"
176                                        onValueChanged="dojo.byId('horizontalSliderValue').innerHTML = arguments[0]<10? ('0'+arguments[0]) : arguments[0];"></div>
177                                <span id="horizontalSliderValue" style="border: solid gray 1px; color: gray; margin-left: 1em; margin-right: 3em;">05</span>
178                                Related work experience: <input dojoType="IntegerSpinner" 
179                                        value="1" 
180                                        delta="1" 
181                                        min="1" 
182                                        max="40" 
183                                        separator="," 
184                                        maxlength="2" 
185                                        widgetId="integertextbox1">
186                        </div>
187
188                        <div class="formQuestion">
189                                <span class="noticeMessage">Rich text editor that expands as you type in text</span>
190                                <span class="emphasise">Self description</span>
191                        </div>
192                        <div class="formAnswer">
193                                <textarea dojoType="Editor2" minHeight="5em">
194                                Write a brief summary of &lt;i&gt;your&lt;/i&gt; job skills... using &lt;b&gt;rich&lt;/b&gt; text.
195                                </textarea>
196                        </div>
197                       
198                        <div class="formQuestion">
199                                <span class="emphasise">Desired employment length</span>
200                        </div>
201                        <table class="formAnswer"  style="width: 100%;">
202                                <tr>
203                                        <td>Start date</td>
204                                        <td><div dojoType="DropdownDatePicker"/></td>
205                                        <td>End date</td>
206                                        <td><div dojoType="DropdownDatePicker"/></td>
207                                </tr>
208                        </table>
209                       
210                        <table align="center">
211                                <tr>
212                                        <td style="width: 7em;">
213                                                <button dojoType="Button">
214                                                        <img src="../../demos/widget/Mail/cancel.gif" height="18" alt="Cancel" />
215                                                        Cancel
216                                                </button>
217                                        </td>
218                                        <td style="width: 7em;">
219                                                <button dojoType="Button">
220                                                        <img src="../../demos/widget/Mail/ok.gif" height="18" alt="OK" />
221                                                        OK
222                                                </button>
223                                        </td>
224                                </tr>
225                        </table>
226                </form>
227        </body>
228</html>
Note: See TracBrowser for help on using the browser.