DooForm require=true

[Mil0s]

About HTML form styles there is semantic and definition style and I am thinking to add some switch so user can choose what style he wants, I think I will do it like that so you can switch what ever you like

[chucka]

I've never heard of definition style but think about it this way, if you get DooForm to output the basics (e.g.<form action="putstuff" method="post"><label for="someinput">some input</label><input type="text" name="myinput" id="someinput" /></form>). Then allow the programmer to create whatever containing boxes they like in the DooForm array by nesting arrays of elements or in some other fashion think how powerful the DooForm lib will become. One could create forms with tables, lists, divs, fieldsets, or whatever they want.

[RichardM]

Just a quick thought watching all the posts on this stuff...keep an eye on ease of use...don't want to make it overcomplicated or people will just use a simple page template instead


Richard

[Mil0s]

Ofc Richard, it will be same as now very simple use.

[chucka]

With Richard's comments in mind, how about having the option in DooForm to create either one string (as it is at the moment) or an array of strings with wrapper, label, and input for each element concatenated together. Then people who want to further group their form elements in a certain way can do so in the view with something like <div class="setOfInputs">{{form.input1}}{form.input2}}{{form.input3}}</div>. This also allows for my request of form elements with out the <form> tag to happen. It's also probably easier to program than a array-sifting, recursive form building function.

So just to clarify since I didn't have much time for examples the other day. By default, have DooForm output a basic form as one string. In each of these examples the code for the view would be something like {{form}}.

Sample basic form definition:

Code: Select all

   $formContent = array(
         'method'=>'post',
         'action'=>'submitInput1',
         'elements'=>array(
            'input1'=>array('text', array(
               'required'=>true,
               'label'=>'Input 1'
            ))
         )
      );

Sample output:

Code: Select all

<form action="submitInput1" method="post" class="doo-form">
<label for="input1-element">Input 1</label>
<input type="text" name="input1" id="input1-element" />
</form>

Sample wrapped element definition:

Code: Select all

   $formContent = array(
         'method'=>'post',
         'action'=>'submitInput1',
         'elements'=>array(
            'input1'=>array('text', array(
               'required'=>true,
               'wrapper' => 'div',
               'label'=>'Input 1'
            ))
         )
      );

Sample output:

Code: Select all

<form action="submitInput1" method="post" class="doo-form">
<div>
   <label for="input1-element">Input 1</label>
   <input type="text" name="input1" id="input1-element" />
</div>
</form>

Sample classed element definition:

Code: Select all

   $formContent = array(
         'method'=>'post',
         'action'=>'submitInput1',
         'elements'=>array(
            'input1'=>array('text', array(
               'required'=>true,
               'attributes'=>array('class'=>'formInput'),
               'label'=>'Input 1'
            ))
         )
      );

Sample output:

Code: Select all

<form action="submitInput1" method="post" class="doo-form">
   <label for="input1-element" class="formInput">Input 1</label>
   <input type="text" class="formInput" name="input1" id="input1-element" />
</form>

Sample classed and wrapped element definition:

Code: Select all

   $formContent = array(
         'method'=>'post',
         'action'=>'submitInput1',
         'elements'=>array(
            'input1'=>array('text', array(
               'required'=>true,
               'attributes'=>array('class'=>'formInput'),
               'wrapper' => 'div',
               'label'=>'Input 1'
            ))
         )
      );

Sample output:

Code: Select all

<form action="submitInput1" method="post" class="doo-form">
<div class="formInput-container">
   <label for="input1-element" class="formInput">Input 1</label>
   <input type="text" class="formInput" name="input1" id="input1-element" />
</div>
</form>

Now the array of element strings style for more customization in form styling. With each of the example definitions above, adding something like 'renderFormat'=>'array' (this could otherwise default to 'string') to the main array would switch the formatting output. Example below:

Sample classed and wrapped elements definition:

Code: Select all

   $formContent = array(
         'method'=>'post',
         'action'=>'submitInput1',
         'renderFormat'=>'array',
         'elements'=>array(
            'input1'=>array('text', array(
               'required'=>true,
               'attributes'=>array('class'=>'formInputOdd'),
               'wrapper' => 'div',
               'label'=>'Input 1'
            ))
            'input2'=>array('text', array(
               'required'=>true,
               'attributes'=>array('class'=>'formInputEven'),
               'wrapper' => 'div',
               'label'=>'Input 2'
            ))
            'input3'=>array('text', array(
               'required'=>true,
               'attributes'=>array('class'=>'formInputOdd'),
               'label'=>'Input 3'
            ))
            'input4'=>array('text', array(
               'required'=>true,
               'attributes'=>array('class'=>'formInputEven'),
               'label'=>'Input 4'
            ))
         )
      );

Sample view template code:

Code: Select all

{{form.startDooForm}}
{{form.elements.input1}}
{{form.elements.input2}}
<div class="lastTwoElements">
{{form.elements.input3}}
{{form.elements.input4}}
</div>
{{form.endDooForm}}


Sample output:

Code: Select all

<form action="submitInput1" method="post" class="doo-form">
<div class="formInputEven-container">
   <label for="input1-element" class="formInputOdd">Input 1</label>
   <input type="text" class="formInputOdd" name="input1" id="input1-element" />
</div>
<div class="formInputOdd-container">
   <label for="input2-element" class="formInputEven">Input 2</label>
   <input type="text" class="formInputEven" name="input2" id="input2-element" />
</div>
<div class="lastTwoElements">
   <label for="input3-element" class="formInputOdd">Input 3</label>
   <input type="text" class="formInputOdd" name="input3" id="input3-element" />
   <label for="input4-element" class="formInputEven">Input 4</label>
   <input type="text" class="formInputEven" name="input4" id="input4-element" />
</div>
</form>

You'll notice there aren't any required attributes in the markup. Using the php array for server side validation and the json array for client side, both fronts should be fine without the extra markup. I would think the json array optional though so the programmer would have to set it to a variable for the view to use like below.

Code: Select all

$form = new DooForm($formContent);
$this->data['jsonValidation'] = $form->renderJson();