Skip to content

Commit

Permalink
better form markup
Browse files Browse the repository at this point in the history
  • Loading branch information
Robert Anderson committed Nov 13, 2014
1 parent 2c16641 commit e2df2ca
Showing 1 changed file with 112 additions and 50 deletions.
162 changes: 112 additions & 50 deletions form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,16 @@ <h3>Please correct the following errors</h3>
<p class="required"><em>*</em> Denotes a required field</p>

{% for question in form.getQuestions() %}
<div class="f_row">
<label for="{{ question.handle }}">
{{ question.name }}{% if question.required %}&nbsp;<em>*</em>{% endif %}
</label>

{% switch question.type %}
{% switch question.type %}


{% case 'PlainText' %}
<div class="hidden_label">
<label for="{{ question.handle }}">
{{ question.name }}{% if question.required %}&nbsp;<em>*</em>{% endif %}
</label>

{% case 'PlainText' %}
<input type="text"
{% if question.required %}
required
Expand All @@ -46,8 +48,15 @@ <h3>Please correct the following errors</h3>
id="{{ question.handle }}"
name="questions[{{ question.handle }}]"
value="{{ submission is defined ? submission[question.handle] }}">
</div>


{% case 'MultilineText' %}
<div class="hidden_label">
<label for="{{ question.handle }}">
{{ question.name }}{% if question.required %}&nbsp;<em>*</em>{% endif %}
</label>

{% case 'MultilineText' %}
<textarea
{% if question.required %}
required
Expand All @@ -59,53 +68,78 @@ <h3>Please correct the following errors</h3>
cols="20" rows="2"
id="{{ question.handle }}"
name="questions[{{ question.handle }}]">{{ submission is defined ? submission[question.handle] }}</textarea>

{% case 'Dropdown' %}
<select
{% if question.required %}
required
aria-required="true"
data-val-required="'{{ question.name }}' is required"
data-val="true"
{% endif %}
id="{{ question.handle }}"
name="questions[{{ question.handle }}]">
{% for option in question.options %}
<option {{ submission is defined and submission[question.handle] == option.name ? 'selected' }}>
{{ option.name }}
</option>
{% endfor %}
</select>

{% case 'RadioButtons' %}
<ul>
{% for option in question.options %}
<li>
<input type="radio"
id="{{ question.handle ~ loop.index }}"
name="questions[{{ question.handle }}]"
value="{{ option.name }}"
{{ submission is defined and submission[question.handle] == option.name ? 'checked' }}>
<label for="{{ question.handle ~ loop.index }}">{{ option.name }}</label>
</li>
{% endfor %}
</ul>

{% case 'Checkboxes' %}
</div>


{% case 'Dropdown' %}
<label for="{{ question.handle }}">
{{ question.name }}{% if question.required %}&nbsp;<em>*</em>{% endif %}
</label>

<select
{% if question.required %}
required
aria-required="true"
data-val-required="'{{ question.name }}' is required"
data-val="true"
{% endif %}
id="{{ question.handle }}"
name="questions[{{ question.handle }}]">
{% for option in question.options %}
{% set selected = submission is defined and submission[question.handle]
? submission[question.handle] == option.value
: option.default %}
<option {{ selected ? 'selected' }}>
{{ option.label }}
</option>
{% endfor %}
</select>


{% case 'RadioButtons' %}
<ul>
{% for option in question.options %}
<li>
{% set selected = submission is defined and submission[question.handle]
? submission[question.handle] == option.value
: option.default %}
<input type="radio"
id="{{ question.handle ~ loop.index }}"
name="questions[{{ question.handle }}]"
value="{{ option.value }}"
{{ selected ? 'checked' }}>
<label for="{{ question.handle ~ loop.index }}">{{ option.label }}</label>
</li>
{% endfor %}
</ul>


{% case 'Checkboxes' %}
<fieldset class="rc">
<ul>
{% for option in question.options %}
<li>
{% set selected = submission is defined and submission[question.handle]
? submission[question.handle] == option.value
: option.default %}
<input type="checkbox"
id="{{ question.handle ~ loop.index }}"
name="questions[{{ question.handle }}]"
value="{{ option.name }}"
{{ submission is defined and submission[question.handle] == option.name ? 'checked' }}>
<label for="{{ question.handle ~ loop.index }}">{{ option.name }}</label>
value="{{ option.value }}"
{{ selected ? 'checked' }}>
<label for="{{ question.handle ~ loop.index }}">{{ option.label }}</label>
</li>
{% endfor %}
</ul>
</fieldset>


{% case 'Number' %}
<div class="hidden_label">
<label for="{{ question.handle }}">
{{ question.name }}{% if question.required %}&nbsp;<em>*</em>{% endif %}
</label>

{% case 'Number' %}
<input type="number"
{% if question.required %}
required
Expand All @@ -117,8 +151,15 @@ <h3>Please correct the following errors</h3>
id="{{ question.handle }}"
name="questions[{{ question.handle }}]"
value="{{ submission is defined ? submission[question.handle] }}">
</div>


{% case 'Email' %}
<div class="hidden_label">
<label for="{{ question.handle }}">
{{ question.name }}{% if question.required %}&nbsp;<em>*</em>{% endif %}
</label>

{% case 'Email' %}
<input type="email"
{% if question.required %}
required
Expand All @@ -130,8 +171,15 @@ <h3>Please correct the following errors</h3>
id="{{ question.handle }}"
name="questions[{{ question.handle }}]"
value="{{ submission is defined ? submission[question.handle] }}">
</div>


{% case 'Tel' %}
<div class="hidden_label">
<label for="{{ question.handle }}">
{{ question.name }}{% if question.required %}&nbsp;<em>*</em>{% endif %}
</label>

{% case 'Tel' %}
<input type="tel"
{% if question.required %}
required
Expand All @@ -143,8 +191,15 @@ <h3>Please correct the following errors</h3>
id="{{ question.handle }}"
name="questions[{{ question.handle }}]"
value="{{ submission is defined ? submission[question.handle] }}">
</div>


{% case 'Url' %}
<div class="hidden_label">
<label for="{{ question.handle }}">
{{ question.name }}{% if question.required %}&nbsp;<em>*</em>{% endif %}
</label>

{% case 'Url' %}
<input type="url"
{% if question.required %}
required
Expand All @@ -156,8 +211,15 @@ <h3>Please correct the following errors</h3>
id="{{ question.handle }}"
name="questions[{{ question.handle }}]"
value="{{ submission is defined ? submission[question.handle] }}">
</div>


{% case 'Date' %}
<div class="hidden_label">
<label for="{{ question.handle }}">
{{ question.name }}{% if question.required %}&nbsp;<em>*</em>{% endif %}
</label>

{% case 'Date' %}
<input type="text"
{% if question.required %}
required
Expand All @@ -171,11 +233,11 @@ <h3>Please correct the following errors</h3>
id="{{ question.handle }}"
name="questions[{{ question.handle }}][date]"
value="{{ submission is defined ? submission[question.handle] }}">
</div>


{% endswitch %}

</div>
{% endfor %}

<div class="btns">
Expand All @@ -184,4 +246,4 @@ <h3>Please correct the following errors</h3>

</fieldset>
</div>
</form>
</form>

0 comments on commit e2df2ca

Please sign in to comment.