Re: Mark-up standards in Modules
Posted: Mon Aug 11, 2008 10:42 am
OK, let me show a practical example of what I mean. Here's the default output for the login form of the FEU module:
Note: I've removed URLs from the code for clarity.
Problems with this:
This is now valid, for both XHTML Transitional and XHTML Strict, more accessible, with its associated labels for input fields, seperates content from presentation, and has more hooks for the front-end developer to attach styles to. It could go even further, but at the very least it should be like this.
Code: Select all
<font size="-2"/>
<form id="m6moduleform_2" method="post" action="index.php">
<div class="hidden"><input type="hidden" name="mact" value="FrontEndUsers,m6,do_login,1" />
<input type="hidden" name="m6returnid" value="16" />
<input type="hidden" name="page" value="16" />
</div>
<p>Username <input type="text" name="m6feu_input_username" id="m6feu_input_username" value="" size="20" maxlength="20" />
Password
<input type="password" name="m6feu_input_password" value="" size="20" maxlength="20" />
<br/>
<input type="submit" name="m6submit" value="Sign in"><br/>
<a href="" title="Click here if you cannot remember your password">Forgot Your Password?</a><br/>
<a href="" title="Click here if you cannot remember your login details">Forgot Your Login Details?</a></p>
</form>
</font>
Problems with this:
- No closing slash in
- Uses depreciated element
- No legend, fieldsets or labels
- Uses non-semantic presentational characters &
Code: Select all
<form id="m6moduleform_2" method="post" action="index.php">
<div class="hidden">
<input type="hidden" name="mact" value="FrontEndUsers,m6,do_login,1" />
<input type="hidden" name="m6returnid" value="16" />
<input type="hidden" name="page" value="16" />
</div>
<fieldset>
<legend>Login Form</legend>
<label for="m6feu_input_username">Username</label>
<input type="text" name="m6feu_input_username" id="m6feu_input_username" value="" size="20" maxlength="20" />
<label for="">Password</label>
<input type="password" id="m6feu_input_password" name="m6feu_input_password" value="" size="20" maxlength="20" />
<input type="submit" name="m6submit" value="Sign in" />
</fieldset>
<p><a href="" title="Click here if you cannot remember your password">Forgot Your Password?</a></p>
<p><a href="" title="Click here if you cannot remember your login details">Forgot Your Login Details?</a></p>
</form>