Html Form, Java Servlet

Simple servlet web page with HTML form.

Steps:

  1. Create an html page named as “Inform.html”

 -> Define different tags for user input using form and set the method to post

  • Create a servlet file named as E_Register.java
  • Write entries in web.xml.

Inform.html :

<html> 
 <title>Registration form</title>
<script type="text/javascript" > 
 function get_random_color() {   
  var letters = '0123456789ABCDEF'.split('');   
  var color = '#';   
  
  for (var i = 0; i < 6; i++ )
  {    
  color += letters[Math.round(Math.random() * 15)];   
  }   
  document.body.style.background= color; 
  } 
 function _reset1()
  {
	x=confirm("It will clear all the text entered")
	if(x==true)
	{
		document.form1.t1.value=""
		document.form1.t2.value=""
		document.form1.t3.value=""
		document.form1.ta.value=""
		document.form1.r1[0].checked=false
		document.form1.r1[1].checked=false
		document.form1.c1.checked=false
		document.form1.c2.checked=false
		document.form1.c3.checked=false
		document.form1.c4.checked=false
		document.form1.c5.checked=false
		document.form1.c6.checked=false
		document.form1.t1.focus()
		
	}
}
function _check()
	{
	
		if((document.form1.t1.value=="")||(!(isNaN(document.form1.t1.value))))
		{
		
		alert("please enter the correct name")
		document.form1.t1.value==""
		document.form1.t1.focus()
		}	
		
		else if((document.form1.t2.value=="")||(isNaN(document.form1.t2.value)))
		{
		alert("please enter the age correctly")
		document.form1.t2.value==""
		document.form1.t2.focus()
		}	
		
		else if(document.form1.t2.value>40)
		{
		alert("Sorry  the age is beyond the limit")
		document.form1.t2.value==""
		document.form1.t2.focus()
		}
		
		else if(document.form1.ta.value=="")
		{
		alert("please enter the address")
		document.form1.ta.focus()
		}
		
		else if((document.form1.r1[0].checked==false)&&(document.form1.r1[1].checked==false))
		{
		alert("please select radio button")
		document.form1.r1[0].focus()
		}
		else if((document.form1.c1.checked==false)&&(document.form1.c2.checked==false)&&
(document.form1.c3.checked==false)&&
(document.form1.c4.checked==false)&&(document.form1.c5.checked==false))
		{
		alert("please select select the language Known")
		document.form1.c1.focus();
		}
		
else if(document.form1.t3.value=="")
		{
		alert("please enter the password")
		document.form1.t3.focus()
		}
else if((document.form1.t1.value!="")&&(document.form1.t2.value!="")&&(document.form1.t3.value!="")&&(document.form1.ta.value!="")&&(document.form1.r1[0].checked!=false)||(document.form1.r1[0].checked!=false)&&((document.form1.c1.checked!=false)||(document.form1.c2.checked!=false)||(document.form1.c3.checked!=false)||(document.form1.c4.checked!=false)||(document.form1.c5.checked!=false)))
{
x=confirm("you have entered the data correctly, want to submit the form")
if(x)
                                      {
				document.lay.visibility="show"
			}
}
}
</script>
<body bgcolor="grey"  onclick="get_random_color()" text="black" style="font-size:20pt;font-family:garamond" onload=document.form1.t1.focus()><center>
<h2>ENTRY FORM</h2></center>
<form  action="login" method="post">
<table name="tab"   cellspacing=30pt>
<tr><td align="left"><h2>Enter your name:</h2></td><td align=right><input type=text   name=t1  size=18 onkeyup="this.value=this.value.toUpperCase()";>
<tr><td align="left"><h2>Enter your Password:</h2></td><td align=right><input type=password name=t3 size=18>
<tr><td align="left"><h2>Enter your Age:</h2></td><td align=right><input type=text name=t2 maxlength=3 size=18>
<tr><td align="left"><h2>Enter your Address:</h2></td><td align=right><textarea name=ta rows=5 cols=15 onkeyup="this.value=this.value.toUpperCase()";></textarea>
<tr><td align="left"><h2>Gender:</h2></td><td align=left><input type=radio  name=r1  value="female">Female<br>
<input type="radio"  name=r1  value="male">Male</td></tr></td>
</tr>
<tr><td align="left"><h2>Languages known:</h2></td><td align=left><center>(Select more than one )</center>
<input type="checkbox" name=c1 value=c>C<br>
<input type="checkbox" name=c2 value=c++>C++<br>
<input type="checkbox" name=c3 value=python>Python<br>
<input type="checkbox" name=c4 value=Java>Java<br>
<input type="checkbox" name=c5 value=VB>VB<br>
			</td>
</table>
<center>
<input type="button" value="  reset " onclick="_reset1()">
<input type="button"  value="  check " onclick="_check()">
<h3>Before submitting the data please click on check</h3>
<input type="submit"  value="submit " ></center>
</form>
</body>
</html>
								

E_Register.java:

package Mishra;
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class E_Register extends HttpServlet   {
	  protected void doPost(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
		{
    	 
    	PrintWriter pw=res.getWriter();
		res.setContentType("text/html");
		String First=req.getParameter("t1");
		String Age=req.getParameter("t2");
		String Email=req.getParameter("t3");
		String Gender=req.getParameter("r1");
		String address=req.getParameter("ta");
		String Pass=req.getParameter("r1");
		
		pw.print("<body bgcolor=grey;background:pink;margin-top:10%;left:50%; \"><h2 align='center'>Review Details:</h2>"); 
		pw.print("<h2 align='left'> NAME : "+ First+"</h2>");
		pw.print("<h2 align='left'> Age : "+Age+"</h2>");

		pw.print("<h2 align='left'> Gender : "+Gender+"</h2>");
		pw.print("<h2 align='left'> Address : "+address+"</h2>");
	    //pw.print("<h2 align='center'> EMAIL  : "+ Email +"</h2>");
		pw.print("<h1 align='left'>Thanks for submission!</h1></div>");
		 pw.close();
	}
}

Web.xml:

<?xml version=”1.0″ encoding=”UTF-8″?> <web-app xmlns:web=”http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd”>    <servlet>    <servlet-name>E_Register</servlet-name>    <servlet-class>Mishra.E_Register</servlet-class>  </servlet>    <servlet-mapping>    <servlet-name>E_Register</servlet-name>    <url-pattern>/login</url-pattern>  </servlet-mapping>    <welcome-file-list>    <welcome-file>Inform.html</welcome-file>  </welcome-file-list>   </web-app>

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top