CSE 510 Web Data Engineering HTML Forms and Hyperlinks UB CSE 510 - - PowerPoint PPT Presentation

▶

May 28, 2023 146 likes •243 views

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

SLIDE 1

CSE 510 Web Data Engineering

HTML Forms and Hyperlinks

UB CSE 510 Web Data Engineering

SLIDE 2

UB CSE 510 Web Data Engineering 2

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> <option value="2" selected="selected">Two</option> <option value="3">Three</option> </select> <p /> <input type="submit" value="Submit”> </form> </body> </html> Drop- Down Menu Presetting

SLIDE 3

UB CSE 510 Web Data Engineering 3

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>

SLIDE 4

UB CSE 510 Web Data Engineering 4

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>

SLIDE 5

UB CSE 510 Web Data Engineering 5

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>

SLIDE 6

UB CSE 510 Web Data Engineering 6

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>

SLIDE 7

UB CSE 510 Web Data Engineering 7

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>

SLIDE 8

UB CSE 510 Web Data Engineering 8

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>