HTML Forms

An HTML form is a control panel. Controls include menus, text fields, and usually a submit button. When the submit button is pressed, the state of the controls, for example the selected menu items or the text entered into the text fields, is included with a post or get command that's sent back to the server.

Here's the general structure of a form element:

<form action = "...">
controls go here
</form>

The action attribute of a form tells the server where to send the information contained in the form. For example, the action might be the name of a server-side script to be executed. Examples of server-side scripting languages include JSP, CGI , and PHP. The script usually dynamically generates HTML that is sent back to the browser to be displayed:

Example

An online application for a college is a form. A server side script might process the form by determining if the applicant is accepted or rejected. An HTML document containing the outcome is sent back to the applicant.

Elements

Form elements are either input elements (this includes fields, buttons, and checkboxes), text areas, and pop-up menus.

Input Elements <input ... />
   Attributes:
      name, value, checked, size, etc.
      onclick, ondblclick, onselect, onchange, onfocus, onblur
      type:
         Fields (text, password, hidden)
         Buttons (submit, reset, radio)
         checkbox
Text Areas <textarea ...> INITIAL TEXT </textarea>
   Attributes:
      name, rows, cols, etc.
      onselect, onchange, onfocus, onblur,
      onkeydown, onkeypress, onkeyup
Pop-up Menus <select ...> OPTIONS </select>
   Attributes:
      name, size, multiple
      onclick, onfocus, onblur, onchange
   Options <option ... />
      Attributes:
         selected, value

Example: form.html

Here's an example of a form with everything on it:

<html>
<head> <title> Super Form </title> </head>
<body>

User info form: <hr />
<form action = "/myapp/request.jsp" method = "post">
    <p>
   <input type = "hidden" name = "arg" value = "42">
   Name:
   <input type = "text" name = "client" value = "???" size = "30"/>
   <br />
   Password: <input type = "password" name = "password" size = "8"/>
   </p>  <p>
   Party: <br />
   <input type = "radio" name = "party" value="Democrat" checked/>
   Democrat <br />
   <input type = "radio" name = "party" value="Republican"/>
   Republican
   </p>  <p>
   State: <br />
   <select name = "country">
   <option value = "CA">California</option>
   <option value = "OR">Oregon</option>
   <option value = "NM">New Mexico</option>
   </select>
   </p>  <p>
   Comments: <br />
   <textarea name = "comments" rows = "5" cols = "40" >
   Your comments would be appreciated
   </textarea>
   </p>  <p>
   Send me more information:
      <input type = "checkbox" name = "more info" />
   </p>  <p>
   <input type = "reset" value = "Clear Form" />
   <input type = "submit" value = "Send Info" />
   </p> </form> <hr />
</body>
</html>

Here is what the form looks like:

The information entered by the user will be sent to request.jsp when the "Send Info" button is pushed. This JSP generates a web page containing all of the information that was in the HTTP request:

request.jsp

Here is what request.jsp looks like. For now note that it is essentially an HTML document. It is the HTML document we saw in the previous screen shot. Except this HTML document contains elements of the form:

<% ... %>

These are Java scriptlets. These scriptlets are executed by the web server. When they are executed, they extract and output information from the HTTP request. They are replaced in the web page by the output they produce.

<html>
<head> <title> Display HTTP Request </title> </head>
<body>

<%
   java.util.Enumeration attNames = request.getAttributeNames();
   java.util.Enumeration paramNames = request.getParameterNames();
   java.util.Enumeration hdrNames = request.getHeaderNames();
%>

Request = <br />
<%= request.getMethod() %>
<%= request.getServerName() %>:
<%= request.getServerPort() %>
<%= request.getProtocol() %>

<hr />
Request headers: <br/>
<% while (hdrNames.hasMoreElements()) {
   String name = (String) hdrNames.nextElement();
   String value = request.getHeader(name);
   out.println("..." + name + ": " + value + "<br />");
   } %>
<hr />
Request parameters: <br/>
<% while (paramNames.hasMoreElements()) {
   String name = (String) paramNames.nextElement();
   String value = request.getParameter(name);
   out.println("..." + name + ": " + value + "<br />");
   } %>
<hr />
Request attributes: <br/>
<% while (attNames.hasMoreElements()) {
   String name = (String) attNames.nextElement();
   Object value = request.getAttribute(name);
   out.println("..." + name + ": " + value + "<br />");
   } %>
<hr />
</body>
</html>