Uncategorized

Easier PHP forms, part 1

2009-06-29 Dan

Building and maintaining forms in PHP is one of the most time-consuming parts of the job. Put another way, it’s one of the biggest bottlenecks for fast prototyping and development. Getting rid of bottlenecks speeds up work and increases overall joy. So how do we do this?

The first thing I did was look at all the forms I had been writing. In general they all follow a pattern:

<DOCTYPE ...>
<html ...>
<head>
  ...
  // javascript tests to make sure user fills form correctly
</head>
<body>
...
<form name='blah' action='#' method='post'>
...

  <div class='form_item'>
    <label for='ABC'>A human-readable name for the input</label>
    <div class='input_item'>
      <input name='ABC'>  <?/* or select/textarea/etc */?>
      <div class='help'>Some explanation text here.</div>
    </div>
    <div class='clear'></div>
  </div>
...
</form>
...
</body>
</html>

It seemed that cutting and pasting this was rife with errors. Even worse is trying to change the layout of the page – a major (non-CSS) alteration could really ruin my day! I had to come up with somethin better.

function create_form_row($input,$label_name=null,$label_for=null,$hint=null) {
                         $str ="  <div class='form_item'>\n";
  if(isset($label_name)) $str.="    <label for='$label_for'>$label_name</label>\n";
                         $str.= "    <div class='input_item'>\n";
                         $str.= "      $input\n";
  if(isset($hint))       $str.= "      <div class='help'>$hint</div>\n";
                         $str.= "    </div>\n";
                         $str.= "    <div class='clear'></div>\n";
                         $str.= "  </div>\n";
  return $str;
}

function create_form_start($name,$classname='form',$action='',$method='post',$target='') {
  return "<form enctype='multipart/form-data' id='$name' name='$name' class='$classname' action='$action' method='$method'>\n";
}

function create_form_end() {
  echo '</form>\n';
}

At first this might seem like a lot of work for not much gain. Think of this as the center of the onion. If we build layers on top of it we start to see some big big benefits.

function create_form_check_inner($name,$value=null,$checked=false) {
  return "<input type='checkbox' id='$name' name='$name' value='".htmlspecialchars($value,ENT_QUOTES)."'".($checked?" checked":"").">";
}

//------------------------------------------------------------------------------
function create_form_check($name,$value=null,$label=null,$hint=null,$checked=false) {
  return create_form_row($label,create_form_check_inner($name,$value,$checked),$name,$hint);
}

//------------------------------------------------------------------------------
function create_form_text_inner($name,$value=null,$extra='') {
  return "<input type='text' id='$name' name='$name' value='".htmlspecialchars($value,ENT_QUOTES)."' $extra>";
}

//------------------------------------------------------------------------------
function create_form_text($name,$value=null,$label=null,$hint=null,$extra='') {
  return create_form_row(create_form_text_inner($name,$value,$extra),$label,$name,$hint);
}

So now when I want to create a new form all I do is

echo create_form_start('form1');
echo create_form_text('user_name','','User Name','what is your name?');
echo create_form_check('love_this','yes','Love','Do you love this new form system?',true);
echo create_form_end();

In Part II I’ll show you how to use create_form_ elements for passwords, selects, textareas, and more.

In Part III I’ll show you how you can use this system and jQuery to add checks that make sure users put in valid emails, required fields, and so on.

Easier PHP forms, part 1

Related