WebDevelopment: A HTML Form Submission to php page with best practices

Hello friends,

In this post i am explaining a simple HTML form submission with standard real-time methods.

The best practice is to design a form using a table for good look and feel.

Here is an example of well aligned Login Form:

Fig: A Simple Login Form

Code:

<body>

<tr><th>Email</th><td align="center"><input type="text" name="email" id="email" /></td></tr>

<tr><th>Password</th><td align="center"><input type="password" name="pwd" id="pwd" /></td></tr>

</table>

</form>

</body>

Explanation:

The 'action' property in 'form' tag specifies the target php page to where the form elements has to be posted.
Its best practice to use value 'post' instead of 'get' for property 'method' to hide the posted values to the target page.

for example:

If you use 'get', after form submission the URL in target page will look like

http://targetpage.php?name=myname&pwd=mypassword

i.e values posted are visible.

If you use 'post' instead of 'get' the URL looks like

http://targetpage.php i.e values are hidden.

The other property I used with form tag is 'onsubmit' and I called a java script function on this event. The onsubmit event is fired before form submission i.e. on clicking the submit button. Generally this event is generated to validate the form. For this we need function definition. Here it is.

Javascript Code:

function validate(){

var email=document.getElementById('email').value;

var pass= document.getElementById('pwd').value;

var atpos=email.indexOf("@"); // getting the position of '@' symbol in email

var dotpos=email.lastIndexOf("."); // getting the position of last '.' symbol in email

if(email=="") // if email value is empty

{

alert("please enter email id"); // show an alert message

document.getElementById('email').focus(); // place the cursor in email field

return false; // stop the execution and return false.

}
//checking @ and . positions

else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)

{

alert("Not a valid e-mail address");

document.getElementById('email').focus();

return false;

}

else if(pass=="") //if password is empty

{

alert("please enter password");

document.getElementById('pwd').focus();

return false;

}

else if(pass.length<6) //if password length is less than 6 chars

{

alert("please enter password");

document.getElementById('pwd').focus();

return false;

}

return true; // if all conditions are satisfied then return true.

}

</script>

Explanation:

In validate function I wrote four conditions in if-else stack .

1. For checking whether the email value is empty or not.

2. For checking whether the email value is valid or not.

3. For checking whether password is empty or not.

4. For checking whether the length password is grater than 6 or not.

If all conditions returned false (i.e all fields are filled with valid data) finally 'true' will be returned. So that the form get submitted successfully to the intended php page.

The Data processing in php will be described in my next post.

Hope This is use full.

Bye Take Care. :) urs Venky.....

WebDevelopment

Tuesday, 14 August 2012

A HTML Form Submission to php page with best practices

2 comments: