Browse files

Update Rendering.pod

Explains how to get evenly spaced labels and form inputs without resorting to tables and extra templating.  No templates necessary, just add one CSS rule and you are done.  The default-rendered output is then completely clean and aligned properly.
  • Loading branch information...
Tommy Butler
Tommy Butler committed Sep 30, 2013
1 parent 4031cbc commit 068eeb94f4b485fb580eca0b30a416a01ea870e2
Showing with 13 additions and 0 deletions.
  1. +13 −0 lib/HTML/FormHandler/Manual/Rendering.pod
@@ -64,6 +64,19 @@ the 'fill-in-form' values provided with the form's 'fif' function.
<input id="bar" name="bar" value="[% %]">
<input type="submit" name="submit" value="Save">
+If you are looking for an easy way to get your fields to line up in an evenly spaced manner,
+all uniformly aligned, and to do so without using templates or tables, you can externally style the
+default FormHandler output with the following CSS rule (not supported in internet explorer 6).
+*I<This above is useful for simple forms. Complex forms with fieldsets and other extra features>
+*I<will require further styling of the HTML. The following rule is also HTML 5 compatible.>
+ form#id_of_your_form div div label, form#id_of_your_form div div input {
+ float: left;
+ display: inline-block;
+ width: 40%
+ } /* make sure the parent element is sized appropriately. 700px is a good width */
Going a little bit farther in using FormHandler rendering, you can render
each of the fields individually:

0 comments on commit 068eeb9

Please sign in to comment.