Back to Basics: Forms

This is my second post in a series of 52 (yes, yes I've delayed a lot but I would prefer later, better posts than useless, on-time posts).

Forms are something that I end up coding on almost every website I make (without using a CMS, that is). Essentially, while making a form I have to:

• Write HTML code for the forms giving appropriate names and ids.
• Write PHP code that reads in these names from POST or GET and then filter them.
• Create appropriate error messages in PHP based on incorrect data provided in forms, and repopulate correctly filled fields in the form for the sanity of users.
• Write Javascript (or use a plugin from jQuery) to validate the fields inline using the exact same rules and show messages to users before submitting the form.
• Debug because I missed a character or capitalized something I shouldn't have.
• And then I realize I missed something, and then repeat.

This is also known as web developer hell. Somewhere near the inner circles.

Ideally, what would I want to do to get a form ready?

Specify what I want at one single place with some convenient format (— did anyone say JSON?)

So essentially, this post covers:

1. Specifying a (modifiable) JSON format for forms.
2. Generating HTML using PHP for those forms.
3. Generating rules in PHP using this format.
4. Generating javascript for validation using this format.

Building the specification:

Call it a whim or a fancy — I want to use JSON for my specifications. I cannot think of any other more convenient format for specifying data to be used in PHP and Javascript.

Let's take a look at all available form elements:

1. input tags:
   1. button
   2. checkbox
   3. file
   4. hidden
   5. image
   6. password
   7. radio
   8. reset
   9. text
   10. submit

   I'll only be taking a look at the types highlighted in bold text.

2. textarea
3. select
   1. option
   2. optgroup
4. button

The specification as it is now

[{
    'name' : '[form-name]' //Name and id of the form to be created.
    'class'   : '[ '[class1]', ... ]'
}, ...]

What do I need to specify for the form?

• The form structure — the JSON spec must follow the structure that the form will take. Specifying a contents array seems to be the best possible solution to that, allowing and defining fieldsets for forms nested inside forms.

  [{
      'name' : '[form-name]',
      'contents' : [
          {
              'name' : '[fieldset-name]',
              'legend' : '[fieldset-legend]',
              'class'   : '[ '[class1]', ... ]'
              'contents' : [ ... ]
          }
      ]
  }, ...]
  

• So now we get down to the meaty part. Defining elements. Each element is an object with a type, name, label, an array each for attributes and classes, and an array for validation data.

  [{
      'name'    : '[form-name]',
      'caption' : '[form-caption]',
      'class'   : '[ '[class1]', ... ]'
      'contents' : [
          {
              'name'      : '[fieldset-name]',
              'legend'    : '[fieldset-legend]',
              'contents'  : [
                  {
                      'type' : 'input-text',
                      'name' : '[name and id of the object]',
                      'label': '[its label. duh.]',
                      'attr' : [ '[attr-name]' : '[value]' , ... ],
                      'class': [ '[class1]', '[class2]' ],
                      'rules': [ ... ]
                  }
              ]
          }
      ]
  }, ...]
  

To be continued.