Both of these forms have been rendered from exactly the same markup (see right). The elements of the form have been 'tagged' with one or more of the following css classes which define if, and how each element should be presented to the user.
In reality, the 'role' would be determined by some kind of authentication method but that is out of scope for this demonstration.
Once a role is assigned to the session, serverside jQuery is used to disable, or completely remove restricted elements before they reach the client's browser. The idea is that by using server side DOM manipulation, you can create one 'master' form, and use it for several purposes.
read the full article and get the source code at codegobbler.com
<form id="application" method='POST' accept-charset='utf-8'>
<span>
<label>Name:</label>
<input type="text" name="name" disabled="disabled">
</span>
<span class="employee">
<label>How good are you at your job?</label>
<input name="name" type="text"><br/>
</span>
<span class="employer">
<label>Areas to improve</label>
<input name="improve" type="text"><br/>
</span>
<span class="employee private">
<label>notes: (not disclosed)</label>
<input name="notes" type="text"><br/>
</span>
<input type='submit' value='update'/>
</form>