HTML Forms, Javascript, and Cascading Style SheetsHTML FormsText BoxesText AreasRadio ButtonsCheck BoxesList BoxesJavascriptScript That Says HelloJavascript FunctionsObjects in JavascriptNumerical Data and ArraysCreating New WindowsCascading Style SheetsA Sample CSS DocumentWhy Cascading?Linking to an External Style SheetInternal Style SheetsThe class AttributeReferencesHTML Forms, Javascript, and Cascading Style SheetsHyperText Markup Language (HTML) is used to create web pages that can be viewed with a browser. With it a developer can add images, create lists, tables, and forms, add dynamic features with Javascript, VBScript, and Java applets, and enhance the appearance of pages with Cascading Style Sheets (CSS). This document will serve as a brief introduction to some of the material. There are many books1 and web sites2 that show designers how to incorporate these features and more. They should be consulted for further details.HTML FormsForms on a web site are used to gather information from the client. There are several different kinds. Thesimplest offer either a single box or a text area for a user to fill in. Sometimes, however, there are a limited number of choices to be provided to users, such as sizes or colors. These use list boxes, check boxes or radio buttons. Users may select several options at once from list boxes and check boxes, but radio buttons are used when only one selection is allowed.A form begins with the <form> start-tag and closes with the </form> end-tag. All forms contain method and action attributes. Method attributes are used to inform the server whether the method to be executed is a get (doGet) or a post (doPost). Action attributes tell the server where to find the servlet or Java serverpage (JSP) that will service the request and provide a response. Text BoxesText boxes and areas are used to gather information from a user such as names, addresses, credit card numbers, etc. A text box provides a single box that the user is expected to fill in. Text areas can be used for longer input like questions or comments.The simple form below displays two input boxes along with a button used to submit the data to the server.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>E-Mail Form</title></head><body><h3>Enter your name and e-mail address.<br />Then click the Send button to send the data to the server.</h3><form method = "get" action="http://127.0.0.1/servlet/client_server.EmailServlet"><p><input type = "text" name = "name" value = "" size = 30 /> Name </p><p><input type = "text" name = "email" value = "" size = 30 /> E-Mail Address </p><p><input type = "submit" value = "Send" /></p></form></body></html>1 The text by Susan Anderson-Freed, Weaving a Website, Prentice-Hall, 2001, is a good example.2 The tutorial at http://www.w3schools.com/ is especially helpful.1Here the head tags only supply a title that will be shown at the top of the browser when the page is loaded. The body of the document contains a message to the user to enter data and click on the send button. The form first supplies the method that the server will use to process the data and the action information that tells the server what program to use for the processing. The form displays two input text boxes and a submit button. The type information is used to tell the browser what kind of object to display.A text box displays a box where the user can type in data. Its initial value is the empty string. But after data is entered, the value of the box will be whatever was typed in. When the type is submit, the browser displays a button with a caption given by the value attribute.Note that all tags either have a matching closing tag or are written with the ending “/>”. This document begins with a DOCTYPE declaration at the beginning. This one is Transitional. That means that it follows the XHTML (Extensible HTML) guidelines, but it may make some allowances for older browsersthat do not support Cascading Style Sheets. Documents can also be Strict or Frameset. Strict documents use CSS to store all information used for the layout of the page. Frameset is used when the document contains html frames.The action attribute, action=http://127.0.0.1/servlet/addresses.EmailServlet, is used to tell the server where to find the program that will service the request. This one says that the servlet, EmailServlet, is in a package called addresses. It is located in the root directory of the server and can be accessed using the local loop, 127.0.0.1. The code for it follows.package addresses;/** * EmailServlet processes a request from a web page. It responds to the * request by sending back a web page listing the name and email address.**/import java.sql.*;import java.io.*;import javax.servlet.*;import javax.servlet.http.*;public class EmailServlet extends HttpServlet{public void doGet (HttpServletRequest request, HttpServletResponse response) {try{2// Get a PrintWriter object and respond to the request.PrintWriter out = response.getWriter ();String name = request.getParameter ("name"); String email = request.getParameter ("email");Page.createHeader (out, "Addresses");out.println ("<h3>Hello.</h3>");out.println ("<h3>" + name+ "</h3>");out.println ("<h3>Your email address is " + email + "</h3>");Page.createFooter (out);} catch (ClassNotFoundException e){System.out.println ("Class Not Found exception.\n");} catch (SQLException e){System.out.println ("SQL Exception");} catch (IOException ex) {System.out.println ("IO Exception.");}} // doGet} // EmailServlet// Class with static methods that add standard lines to the html output page.class Page{public static void createHeader (PrintWriter out, String title){out.println ("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>");out.println ("<html>");out.println ("<head>");out.println ("<title>" + title + "</title>");out.println ("</head>");out.println ("<body>");} // createHeaderpublic static void createFooter (PrintWriter out){out.println ("</body></html>");} } // class PageText AreasText areas work very similarly. The form is somewhat different, but the servlet is much the same.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>Comment Form</title></head><body><h3> Please enter your comments below.</h3><form method = "get" action="http://localhost:8080/servlet/comments"><p><textarea name = "comment" rows = "4" cols = "40" wrap =
View Full Document
Unlocking...