Forms - whole form examples
Example: login
<form class="ace-form ace-form-sidelabel" action="#" id="login">
<fieldset class="ace-form-section">
<legend class="ace-form-legend"><span>Login</span></legend>
<div class="ace-form-group ace-form-group-text" id="login-username-group">
<div class="ace-form-item ace-form-item-label">
<label class="ace-form-label" for="login-username"><span class="ace-text">Email</span>
</label>
</div>
<div class="ace-form-item ace-form-item-text">
<input class="ace-form-input ace-form-input-text" type="text" placeholder="username@example.com" id="login-username">
</input>
</div>
</div>
<div class="ace-form-group ace-form-group-password" id="login-password-group">
<div class="ace-form-item ace-form-item-label">
<label class="ace-form-label" for="login-password"><span class="ace-text">Password</span>
</label>
</div>
<div class="ace-form-item ace-form-item-password">
<input class="ace-form-input ace-form-input-password" type="password" id="login-password">
</input>
</div>
</div>
<div class="ace-form-group ace-form-group-buttons">
<div class="ace-form-item ace-form-item-buttons">
<button class="ace-button" type="button"><span>Login</span></button>
<button class="ace-button ace-button-link" type="button"><span>Forgot your password?</span></button>
</div>
</div>
<div class="ace-form-group ace-form-group-checkbox" id="login-rememberemail-group">
<div class="ace-form-item ace-form-item-label">
</div>
<div class="ace-form-item ace-form-item-checkbox">
<div class="ace-form-input-checkbox-set">
<input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="login-rememberemail">
</input>
<label class="ace-form-label" for="login-rememberemail"><span class="ace-text">Remember my email</span>
</label>
</div>
</div>
</div>
</fieldset>
</form>
ace.Form(Array(_
"type", "sidelabel",_
"name", "login",_
"method", "post",_
"id", "login",_
"action", "#"_
))
ace.FormSection(Array("legendText", "Login"))
ace.FormGroup(Array("type", "email"))
ace.FormItemLabel(Array())
ace.Label(Array(_
"text", "Email",_
"attrFor", "login-email"_
))
ace.FormItemLabelEnd
ace.FormItemInput(Array())
ace.FormInput(Array(_
"type", "email",_
"name","Email",_
"id", "login-email",_
"placeholder", "username@example.com"_
))
ace.FormItemInputEnd
ace.FormGroupEnd
ace.FormGroup(Array("type", "password"))
ace.FormItemLabel(Array())
ace.Label(Array(_
"text", "Password",_
"attrFor", "login-password"_
))
ace.FormItemLabelEnd
ace.FormItemInput(Array())
ace.FormInput(Array(_
"type", "password",_
"name", "Password",_
"id", "login-password"_
))
ace.FormItemInputEnd
ace.FormGroupEnd
ace.FormGroup(Array("type", "button"))
ace.FormItemInput(Array("type", "buttons"))
ace.Button(Array(_
"text", "Login",_
"type-attr", "submit",_
"id", "login-submit"_
))
ace.Button(Array(_
"text", "Forgot your password?",_
"type", "link",_
"id", "login-forgotpassword",_
"href", "#"_
))
ace.FormItemInputEnd
ace.FormGroupEnd
ace.FormGroup(Array("type", "checkbox"))
ace.FormItemLabel(Array())
ace.FormItemLabelEnd
ace.FormItemInput(Array("type", "checkbox"))
ace.Checkbox(Array(_
"label", "Remember my email",_
"name", "login-rememberemail",_
"id", "login-rememberemail"_
))
ace.CheckboxEnd
ace.FormItemInputEnd
ace.FormGroupEnd
ace.FormSectionEnd
ace.FormEnd
Example: date range
<form class="ace-form ace-form-sidelabel" action="#" id="subitems">
<fieldset class="ace-form-group ace-form-group-radio">
<legend class="ace-form-item ace-form-item-label"><span>Time period</span></legend>
<div class="ace-form-item ace-form-item-input">
<div class="ace-form-subitem">
<div class="ace-form-input-radio-set">
<input class="ace-form-input ace-form-input-radio" type="radio" name="daterange" id="daterange-today" value="today">
</input>
<label class="ace-form-label" for="daterange-today"><span class="ace-text">Today</span>
</label>
</div>
<div class="ace-form-input-radio-set">
<input class="ace-form-input ace-form-input-radio" type="radio" name="daterange" id="daterange-range" value="schedule" checked="checked">
</input>
<label class="ace-form-label" for="daterange-range"><span class="ace-text">Date range</span>
</label>
</div>
</div>
<div class="ace-form-subitem date-range-toggle">
<label class="ace-form-label ace-form-label-medium" for="daterange-from-date"><span class="ace-text">From</span>
</label>
<div class="ace-datepicker"><input id="daterange-from-date" type="date" class="ace-form-input ace-form-input-medium ace-form-input-datepicker"></div>
<label class="ace-form-label ace-assistive" for="daterange-from-hours"><span class="ace-text">Hour</span>
</label>
<select class="ace-form-input ace-form-input-select ace-form-field-xsmall" id="daterange-from-hours">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select><span class="ace-text">:</span>
<label class="ace-form-label ace-assistive" for="daterange-from-minutes"><span class="ace-text">Minute</span>
</label>
<select class="ace-form-input ace-form-input-select ace-form-field-xsmall" id="daterange-from-minutes">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</div>
<div class="ace-form-subitem date-range-toggle">
<label class="ace-form-label ace-form-label-medium" for="daterange-to-date"><span class="ace-text">To</span>
</label>
<div class="ace-datepicker"><input id="daterange-to-date" type="date" class="ace-form-input ace-form-input-medium ace-form-input-datepicker"></div>
<label class="ace-form-label ace-assistive" for="daterange-to-hours"><span class="ace-text">Hour</span>
</label>
<select class="ace-form-input ace-form-input-select ace-form-field-xsmall" id="daterange-to-hours">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select><span class="ace-text">:</span>
<label class="ace-form-label ace-assistive" for="daterange-to-minutes"><span class="ace-text">Minute</span>
</label>
<select class="ace-form-input ace-form-input-select ace-form-field-xsmall" id="daterange-to-minutes">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</div>
</div>
</fieldset>
</form>
ace.Form(Array( _
"type", "sidelabel", _
"name", "test", _
"id", "test", _
"action", "", _
"method", "post" _
))
ace.FormGroupMulti(Array("type", "mixed"))
ace.FormItemMultiLabel(Array("label", "Time period"))
ace.FormItemMultiLabelEnd
ace.FormItemMultiInput(Array())
ace.FormSubItem(Array())
ace.Radio(Array(_
"label","Today",_
"id", "daterange-today",_
"name", "daterange"_
))
ace.RadioEnd
ace.Radio(Array(_
"label","Date range",_
"id", "daterange-range",_
"name", "daterange",_
"checked", "true"_
))
ace.RadioEnd
ace.FormSubItemEnd
ace.FormSubItem(Array())
ace.Label(Array(_
"label", "From",_
"for", "daterange-from-date",_
"customClass", "ace-form-label-medium"_
))
ace.Datepicker(Array(_
"id", "daterange-from-date"_
))
ace.Label(Array(_
"label", "From (hours)",_
"for", "daterange-from-hours",_
"customClass", "ace-assistive"_
))
ace.SelectInputWithOptions(Array(_
"type", "select",_
"size", "xsmall",_
"id", "daterange-from-hours",_
"selectOptions", (Array(_
(Array("value", "01", "text", "01")),_
(Array("value", "02", "text", "02"))_
' ...and so on up to 24
))_
))
%> : <% ' this is purely decorative, the assistive labels are the real ones for a11y
ace.Label(Array(_
"label", "From (minutes)",_
"for", "daterange-from-minutes",_
"customClass", "ace-assistive"_
))
ace.SelectInputWithOptions(Array(_
"type", "select",_
"size", "xsmall",_
"id", "daterange-from-minutes",_
"selectOptions", (Array(_
(Array("value", "01", "text", "01")),_
(Array("value", "02", "text", "02"))_
' ...and so on up to 60
))_
))
ace.FormSubItemEnd
ace.FormSubItem(Array())
ace.Label(Array(_
"label", "To",_
"for", "daterange-to-date",_
"customClass", "ace-form-label-medium"_
))
ace.Datepicker(Array(_
"id", "daterange-to-date"_
))
ace.Label(Array(_
"label", "To (hours)",_
"for", "daterange-to-hours",_
"customClass", "ace-assistive"_
))
ace.SelectInputWithOptions(Array(_
"type", "select",_
"size", "xsmall",_
"id", "daterange-to-hours",_
"selectOptions", (Array(_
(Array("value", "01", "text", "01")),_
(Array("value", "02", "text", "02"))_
' ...and so on up to 24
))_
))
%> : <% ' this is purely decorative, the assistive labels are the real ones for a11y
ace.Label(Array(_
"label", "To (minutes)",_
"for", "daterange-to-minutes",_
"customClass", "ace-assistive"_
))
ace.SelectInputWithOptions(Array(_
"type", "select",_
"size", "xsmall",_
"id", "daterange-to-minutes",_
"selectOptions", (Array(_
(Array("value", "01", "text", "01")),_
(Array("value", "02", "text", "02"))_
' ...and so on up to 60
))_
))
ace.FormSubItemEnd
ace.FormItemMultiInputEnd
ace.FormGroupMultiEnd
ace.FormEnd
Example: filter form
<form class="ace-form ace-form-filter">
<div class="ace-form-group ace-form-group-text" id="filtertextfilter-group">
<div class="ace-form-item ace-form-item-label">
<label class="ace-form-label" for="filtertextfilter"><span class="ace-text">Text filter</span>
</label>
</div>
<div class="ace-form-item ace-form-item-text">
<input class="ace-form-input ace-form-input-text" type="text" id="filtertextfilter">
</input>
</div>
</div>
<div class="ace-form-group ace-form-group-select" id="filterselecttest-group">
<div class="ace-form-item ace-form-item-label">
<label class="ace-form-label" for="filterselecttest"><span class="ace-text">Select</span>
</label>
</div>
<div class="ace-form-item ace-form-item-select">
<select class="ace-form-input ace-form-input-select" id="filterselecttest">
<option value="foo">Foo</option>
<option selected="selected" value="bar">Bar</option>
<option value="sin">Sin</option>
<option value="qua">Qua</option>
</select>
</div>
</div>
<div class="ace-form-group ace-form-group-buttons">
<div class="ace-form-item ace-form-item-buttons">
<button class="ace-button" type="submit"><span>Filter</span></button>
</div>
</div>
</form>
ace.Form(Array( _
"type", "filter", _
"name", "filterexample", _
"id", "filterexample", _
"method", "post" _
))
ace.PresetFormGroup(Array(_
"type","text",_
"label","Text filter",_
"id", "filterexample-text"_
))
ace.FormGroup(Array("type", "select"))
ace.FormItemLabel(Array())
ace.FormLabel(Array(_
"text", "Select",_
"attrFor", "selecttestasp",_
"testattr", "testattrResult",_
"type", "type-test"_
))
ace.FormItemLabelEnd
ace.FormItemInput(Array("type", "select"))
ace.SelectInputWithOptions(Array(_
"type", "select",_
"label", "select",_
"id", "selecttestasp"_
))
ace.SelectOptions(Array(_
"value", "foo",_
"text", "Foo"_
))
ace.SelectOptions(Array(_
"value", "bar",_
"text", "Bar (selected)",_
"selected", "true"_
))
ace.SelectOptions(Array(_
"value", "sin",_
"text", "Sin"_
))
ace.SelectOptions(Array(_
"value", "qua",_
"text", "Qua"_
))
ace.SelectInputEnd
ace.FormItemInputEnd
ace.FormGroupEnd
ace.FormGroup(Array("type","buttons"))
ace.FormItemInput(Array("type","buttons"))
ace.PresetButtonSubmit(Array(_
"text", "Filter results"_
))
ace.FormItemInputEnd
ace.FormGroupEnd
ace.FormEnd