In this section we will develop HTML form example and show you how to performance form validation using JavaScript.
The HTML <form>..</form> allows the developers to create data input screen that runs on browser. In this example we will create a simple from that takes input from user and then validate it.
Here is the code of the same:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> HTML Form Example </title>
<script type="text/javascript">
function check()
{
var varname=document.getElementById('name').value;
var alphaExp = /^[a-zA-Z]+$/;
if (varname=='' )
{
alert('Student name is required');
}
if (document.getElementById('class').value=='')
{
alert('Student class is required');
}
if (document.getElementById('dob').value=='')
{
alert('Date of birth is required');
}
if (document.getElementById('address').value=='')
{
alert('Address is required');
}
if (document.getElementById('phone').value=='')
{
alert('Phone is required');
}
if (document.getElementById('email').value=='')
{
alert('Emial is required');
} }
</script> </head>
<body>
<center> <h1 style="font-size:x-large">Student Information Form</h1> </center>
<hr>
<br>
<center>
<form>
<table>
<tr>
<th><label for="name" id="lname" >Student Name</label></th>
<th> : </th>
<td><input type="text" name="name" id="name"></td></tr>
<tr>
<th><label for="class" >Class </label></th>
<th> : </th>
<td><input type="text" name="class" id="class"></td>
</tr>
<tr>
<th><label for="dob" >DOB</label></th>
<th> : </th>
<td><input type="text" name="dob" id="dob"></td>
</tr>
<tr>
<th><label for="address" >Address</label></th>
<th> : </th>
<td><textarea name="address" id="address"></textarea></td>
</tr>
<tr>
<th><label for="phone" >Phone</label></th
><th> : </th><td><input type="text" name="phone" id="phone"></td>
</tr>
<tr>
<th><label for="email" >E-Mail</label></th>
<th> : </th> <td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<th><input type="reset" name="name"></th>
<th> : </th>
<td><input type="submit" name="name" onclick="check()"></td>
</tr> </table>
</form>
</center>
</body>
</html>
The above code will display the from to use and then validate the input also.
More Tutorials on roseindia.net for the topic HTML form example.