The Head, Body, and Form Tags

Table 4–10 shows the attributes of the h:head and h:body tags. All of them are basic or HTML/DHTML attributes.

^[a] See Table 4–5 on page 107 for information about basic attributes.

^[b] See Table 4–6 on page 110 for information about HTML 4.0 attributes.

^[c] See Table 4–7 on page 114 for information about DHTML event attributes.

Web applications run on form submissions, and JSF applications are no exception. Table 4–11 lists all h:form attributes.

Table 4–11. Attributes for h:form

Attributes	Description
prependId	true (default) if the ID of this form is prepended to the IDs of its components; false to suppress prepending the form ID (useful if the ID is used in JavaScript code)
binding, id, rendered	Basic attributes[a]
accept, acceptcharset, dir, enctype, lang, style, styleClass, target, title	HTML 4.0[b] attributes
onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onsubmit	DHTML events[c]

^[a] See Table 4–5 on page 107 for information about basic attributes.

^[b] See Table 4–6 on page 110 for information about HTML 4.0 attributes.

^[c] See Table 4–7 on page 114 for information about DHTML event attributes.

Although the HTML form tag has method and action attributes, h:form does not. Because you can save state in the client—an option that is implemented as a hidden field—posting forms with the GET method is disallowed. The contents of that hidden field can be quite large and may overrun the buffer for request parameters, so all JSF form submissions are implemented with the POST method.

There is no need for an action attribute since JSF form submissions always post to the current page. (Navigation to a new page happens after the form data have been posted.)

The h:form tag generates an HTML form element. For example, if, in a JSF page named /index.xhtml, you use an h:form tag with no attributes, the Form renderer generates HTML like this:

<form id="_id0" method="post" action="/faces/index.xhtml"
   enctype="application/x-www-form-urlencoded">

If you do not specify the id attribute explicitly, a value is generated by the JSF implementation, as is the case for all generated HTML elements. You can explicitly specify the id attribute for forms so that it can be referenced in stylesheets or scripts.

Form Elements and JavaScript

JavaServer Faces is all about server-side components, but it is also designed to work with scripting languages, such as JavaScript. For example, the application shown in Figure 4–1 uses JavaScript to confirm that a password field matches a password confirm field. If the fields do not match, a JavaScript dialog is displayed. If they do match, the form is submitted.

Figure 4–1. Using JavaScript to access form elements

[View full size image]

We use the id attribute to assign names to the relevant HTML elements so that we can access them with JavaScript:

<h:form>
   ...
   <h:inputSecret id="password" .../>
   <h:inputSecret id="passwordConfirm" .../>
   ...
   <h:commandButton type="button" onclick="checkPassword(this.form)"/>
   ...
</h:form>

When the user clicks the button, a JavaScript function checkPassword is invoked. Here is the implementation of the function:

function checkPassword(form) {
   var password = form[form.id + ":password"].value;
   var passwordConfirm = form[form.id + ":passwordConfirm"].value;

   if (password == passwordConfirm)
      form.submit();
   else
      alert("Password and password confirm fields don't match");
}

To understand the syntax used to access form elements, look at the HTML produced by the preceding code:

<form id="_id0" method="post"
   action="/javascript/faces/index.xhtml"
   enctype="application/x-www-form-urlencoded">
   ...
   <input id="_id0:password"
      type="text" name="registerForm:password"/>
   ...
   <input type="button" name="_id0:_id5"
      value="Submit Form" onclick="checkPassword(this.form)"/>
   ...
</form>

All form controls generated by JSF have names that conform to

formName:componentName

where formName represents the name of the control’s form and componentName represents the control’s name. If you do not specify id attributes, the JSF implementation creates identifiers for you. In our case, we didn’t specify an id for the form. Therefore, to access the password field in the preceding example, the script uses the expression:

form[form.id + ":password"]

Note

The ID values generated by the JSF implementation seem to get more complex with every version of JSF. In the past, they were fairly straightforward (such as _id0), but more recent versions use IDs such as j_id2059540600_7ac21823. For greater clarity, we use the simpler IDs in our examples.

The directory structure for the application shown in Figure 4–1 is shown in Figure 4–2. The JSF page is listed in Listing 4–1. The JavaScript code, stylesheets, and resource bundle are listed in Listings 4–2 through 4–4.

Listing 4–1. javascript/web/index.xhtml

 1. <?xml version="1.0" encoding="UTF-8"?>
 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4. <html xmlns="http://www.w3.org/1999/xhtml"
 5.       xmlns:h="http://java.sun.com/jsf/html">
 6.    <h:head>
 7.       <title>#{msgs.windowTitle}</title>
 8.       <h:outputStylesheet library="css" name="styles.css"/>
 9.       <h:outputScript library="javascript" name="checkPassword.js"/>
10.    </h:head>
11.    <h:body>
12.       <h:form>
13.          <h:panelGrid columns="2" columnClasses="evenColumns, oddColumns">
14.             #{msgs.namePrompt}
15.             <h:inputText/>
16.             #{msgs.passwordPrompt}
17.             <h:inputSecret id="password"/>
18.             #{msgs.confirmPasswordPrompt}
19.             <h:inputSecret id="passwordConfirm"/>
20.          </h:panelGrid>
21.          <h:commandButton type="button" value="Submit Form"
22.                           onclick="checkPassword(this.form)"/>
23.       </h:form>
24.    </h:body>
25. </html>

					  

Listing 4–2. javascript/web/resources/javascript/checkPassword.js

1. function checkPassword(form) {
2.    var password = form[form.id + ":password"].value;
3.    var passwordConfirm = form[form.id + ":passwordConfirm"].value;
4.
5.    if (password == passwordConfirm)
6.       form.submit();
7.    else
8.       alert("Password and password confirm fields don't match");
9. }

Listing 4–3. javascript/web/resources/css/styles.css

1. .evenColumns {
2.    font-style: italic;
3. }
4.
5. .oddColumns {
6.    padding-left: 1em;
7. }

Listing 4–4. javascript/src/java/com/corejsf/messages.properties

1. windowTitle=Accessing Form Elements with JavaScript
2. namePrompt=Name:
3. passwordPrompt=Password:
4. confirmPasswordPrompt=Confirm Password: