Guide to better accessible forms

Lots of people want to know how to make their web forms more accessible and still good functioning. Here I'll present you nice ways to do this. First let clear some rules about:

Accesibility:
1. Ensure that the web form will be still functioning without JavaScript(or when JavaScript is disabled). Most of the users today have turned on firewall, antispyware utility that blocks JavaScript actively or have disabled their JavaScript from the browser .
2. Provide one-way descriptions that will make user to type something instead of wasting time in reading labels or legends.

Example:


3. Ensure that the user knows exactly where he/she is typing by placing CSS borders around your input and textarea boxes.

CSS Example:

textarea:focus {background:#fffff6;border:2px inset red;}

4. Align fields so that it is intuitively to the user what field or action follows.

CSS Example:

textarea
{
overflow:auto;
}

label
{
width: 10em;
float: left;
text-align: right;
margin-right: 0.6em;
display: block;
cursor:pointer;
}

.submit input
{
margin-left: 10.6em;
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9;
cursor:pointer;
font-weight:bold;
}

You must add class="submit" in your webform.

5. When using AJAX, hide the form or disable its Submit button when the action is completed ie. user has posted a message. This way you'll prevent duplicate messages from one user.
JavaScript Example: Hide the whole form:

document.getElementById('feedback_form').style.display='none'; 

JavaScript:
1. Perform javascript checks on the typed information and return warnings to the user if needed. That method is faster than using AJAX to return error messages. For more information use this website: http://onlinetools.org/articles/unobtrusivejavascript/chapter5.html

2. Use unobtrusive javascript:

• Check that the client browser supports Javascript and DOM.
• Run JavaScript code after the actual web page loads.
• The only JavaScript code on your page must be the loading one:
  

<script laguage="javascript" href="code.js"></script>

Data protection:
In case that you don't want your email box to be filled with unwanted spam messages you must implement a good way of protection over your web forms. There are many ways to do this. Here I'll present you 2 of them:

1. Use CAPTCHA on your forms.
Advantages: Gets rid of almost all spam.
Disadvantages: Reduces simplicificy to the user.
More information here: http://en.wikipedia.org/wiki/Captcha

2. Never show the actual form action URL.
How? - via AJAX request to submit forms.
Advantages: You will receive no spam.
Disadvantages: Form will become inaccesible when JavaScript is disabled.
Example: <form name="feedback_form" id="feedback_form" method="post" action="">


Actual XHTML code:
Enough with requirements. Lets build our form:

<form name="feedback_form" id="feedback_form" method="post" action="">
<fieldset>
<label for="feedback">Your opinion:</label>
<textarea id="feedback" name="suggest" cols="18" rows="6">Text...</textarea>
<input value="Send >" name="Submit" type="submit">
</fieldset>
</form>

And the Javascript code:

if (!document.getElementsByTagName || !(document.createElement || document.createElementNS)) return;

if (document.getElementById)
{window.onload = myUnobtrusiveBehavior;}

function myUnobtrusiveBehavior() {
if (document.getElementById("feedback_form")) {
document.getElementById("feedback_form").onsubmit = function () {
send_feedback(); return false;
};
}


function send_feedback()
{
makePOSTRequest('feedback_run.php', 'suggest=' + escape( document.getElementById('feedback').value));
document.getElementById('feedback_form').style.display='none';
}

Here are the other helpfull Javascript functions: for making the actual AJAX request and displaying status to the user:

var http_request = false;
function makePOSTRequest(url, parameters) { http_request = false;
if (window.XMLHttpRequest) {http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); }
} else if (window.ActiveXObject) {
try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {
try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
}
}
if (!http_request) { alert('Cannot create XMLHTTP instance'); return false; }
http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Charset", "windows-1251");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}

function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
result = http_request.responseText;
document.getElementById('myspan').innerHTML = result;
} else { alert('There is a problem in making the comment request. Please try again later.'); }
}
}

That is it. Save the code in two separate files and test it. I hope you will have a better accessible forms!

Update: in the form element insted of using <input value="Send >" name="Submit" type="submit">
use: <input value="Send >" name="Submit" type="button">
This will ensure that browsers without JavaScript won't run the form call.