Formish

Granular Form Layout

A simple demonstration of partial rendering of parts of forms.

Form

Normal Form

<form id="form" action="" class="formish-form error" method="post" accept-charset="utf-8">

  <div class="hidden"><input type="hidden" name="_charset_" /></div>
  <div class="hidden"><input type="hidden" name="__formish_form__" value="form" /></div>





<div id="form-firstName--field" class="field form-firstName type-string widget-input required">




<label for="form-firstName">First Name<span class="required-marker">*</span></label>


<div class="inputs">


<input id="form-firstName" type="text" name="firstName" value=""
/>

</div>






<span class="description">The name before your last one</span>

</div>


  <div class="actions">

<input type="submit" id="form-action" value="Submit" />
  </div>

</form>

Form Header, metadata, actions and Footer

<form id="form" action="" class="formish-form error" method="post" accept-charset="utf-8">


  <div class="hidden"><input type="hidden" name="_charset_" /></div>
  <div class="hidden"><input type="hidden" name="__formish_form__" value="form" /></div>


  <div class="actions">

<input type="submit" id="form-action" value="Submit" />
  </div>


</form>

First Name

<div id="form-firstName--field" class="field form-firstName type-string widget-input required">




<label for="form-firstName">First Name<span class="required-marker">*</span></label>


<div class="inputs">


<input id="form-firstName" type="text" name="firstName" value=""
/>

</div>






<span class="description">The name before your last one</span>

</div>

First Name (.title)

First Name

First Name (.label())

<label for="form-firstName">First Name<span class="required-marker">*</span></label>

First Name (.inputs())

<div class="inputs">


<input id="form-firstName" type="text" name="firstName" value=""
/>

</div>

First Name (.widget())

<input id="form-firstName" type="text" name="firstName" value=""
/>

First Name (.error())

First Name (.error)

First Name (.cssname)

form-firstName

First Name (.classes)

field form-firstName type-string widget-input required

First Name (.value)

<DottedList "['']">

First Name (.required)

True

First Name (.description)

The name before your last one

First Name (.description())

<span class="description">The name before your last one</span>

None
  

${form()|n}

<h2>Form</h2>

<h3>Normal Form</h3>
<pre>
${form()}
</pre>

<h4>Form Header, metadata, actions and Footer</h4>
<pre>

${form.header()}
<hr />
${form.metadata()}
<hr />
${form.actions()}
<hr />
${form.footer()}
</pre>

<h4>First Name</h4>
<pre>
${form['firstName']()}
</pre>

<h3>First Name (.title)</h4>
<pre>
${form['firstName'].title}
</pre>

<h3>First Name (.label())</h4>
<pre>
${form['firstName'].label()}
</pre>

<h3>First Name (.inputs())</h4>
<pre>
${form['firstName'].inputs()}
</pre>

<h3>First Name (.widget())</h4>
<pre>
${form['firstName'].widget()}
</pre>

<h3>First Name (.error())</h4>
<pre>
${form['firstName'].error()}
</pre>

<h3>First Name (.error)</h4>
<pre>
${form['firstName'].error}
</pre>

<h3>First Name (.cssname)</h4>
<pre>
${form['firstName'].cssname}
</pre>

<h3>First Name (.classes)</h4>
<pre>
${form['firstName'].classes}
</pre>

<h3>First Name (.value)</h4>
<pre>
${form['firstName'].value}
</pre>

<h3>First Name (.required)</h4>
<pre>
${form['firstName'].required}
</pre>



<h3>First Name (.description)</h4>
<pre>
${form['firstName'].description}
</pre>

<h3>First Name (.description())</h4>
<pre>
${form['firstName'].description()}
</pre>

schema = schemaish.Structure()
schema.add( 'firstName', schemaish.String(title='First Name', \
                 description='The name before your last one', \
                 validator=validatish.Required()) )
form = formish.Form(schema, 'form')

Tests