CSE 510 Web Data Engineering HTML Forms and Hyperlinks UB CSE 510 Web Data Engineering
Drop Down Menus & Presetting <html> <head><title> Multiplier with Drop Down Menu </title></head> <body> <form action="multiplyJSP.jsp" method="GET"> The chosen number will be multiplied by 3: <select name="num"> <option value="1"> One </option> Drop- Down <option value="2" selected="selected"> Two </option> Menu <option value="3"> Three </option> </select> <p /> Presetting <input type="submit" value="Submit”> </form> </body> </html> 2 UB CSE 510 Web Data Engineering
Presetting in Text Boxes <html> <head><title> Multiplier Where 3 Is The Default That Can Change </title></head> <body> <form action=“multiplyJSPTwoParams.jsp" method="GET"> Multiply <input type="text" name="x" value="3" size=”5"/> by <input type="text" name="y" size=“9”/> <p /> <input type="submit" value="Submit"/> </form> </body> </html> 3 UB CSE 510 Web Data Engineering
Links with Hidden Inputs <html> <head> <title> Multiplier with Hidden Input Links </title> </head> <body> The following number will be multiplied by 3: <ul> <li> <a href=“multiplyJSP.jsp?num=1"> One </a> </li> <li> <a href=“multiplyJSP.jsp?num=2"> Two </a> </li> </ul> </body> </html> 4 UB CSE 510 Web Data Engineering
Forms With Hidden Inputs <html> <head> <title> Multiplier with Hidden Inputs Form </title> </head> <body> <form action=“multiplyJSPTwoParams.jsp" method="GET"> <input type="hidden" name="x" value="3"/> <input type="text" name="y" size="3"/> <p /> <input type="submit" value="Multiply x 3"/> </form> </body> </html> 5 UB CSE 510 Web Data Engineering
Multiple Forms Within a Page <body> <form action="multiplyJSPTwoParams.jsp" method="GET"> <input type="hidden" name="x" value="2"/> <select name="y"> <option value="1"> One </option> <option value="2" selected="selected"> Two </option> <option value="3"> Three </option> </select> <p /> <input type="submit" value="Multiply x 2"/> </form> <form action="multiplyJSPTwoParams.jsp" method=”GET"> <input type="hidden" name="x" value="3"/> <input type="text" name="y" size="3"/> <p /> <input type="submit" value="Multiply x 3"/> </form> </body> 6 UB CSE 510 Web Data Engineering
multiplyJSPTwoParams.jsp <html> <head> <title> Multiply Two Input Parameters </title> </head> <body> <% String x = request.getParameter("x”); String y = request.getParameter("y”); %> <%= x + " * " + y + " = " + (Integer.parseInt(x)) * (Integer.parseInt(y)) %> </body> </html> 7 UB CSE 510 Web Data Engineering
Form Without an <input type=“submit” …/> <html> <head><title> Multiplier Without Submit </title></head> <body> Welcome to the page that multiplies by 3 <p /> <form method="GET" action="multiplyJSP.jsp"> Provide the number to be multiplied: <input type="text" name="num"/> <p /> <input type="image" src="images/continue.gif"/> </form> </body> </html> 8 UB CSE 510 Web Data Engineering
Recommend
More recommend