Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - Introduction to XHTML

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Forms - XHTML

When browsing websites, users often need to provide such information as search key-words, e-mail addresses and zip codes. XHTML provides a mechanism, called a form, for collecting data from a user.

Forms

 

When browsing websites, users often need to provide such information as search key-words, e-mail addresses and zip codes. XHTML provides a mechanism, called a form, for collecting data from a user.

 

Data that users enter on a web page is normally sent to a web server that provides access to a site’s resources (e.g., XHTML documents, images). These resources are located either on the same machine as the web server or on a machine that the web server can access through the network. When a browser requests a web page or file that is located on a server, the server processes the request and returns the requested resource. A request con-tains the name and path of the desired resource and the method of communication (called a protocol). XHTML documents use the Hypertext Transfer Protocol (HTTP).

 

Figure 4.12 is a simple form that sends data to the web server, which passes the form data to a program. The program processes the data received from the web server and typ-ically returns information to the web server. The web server then sends the information as an XHTML document to the web browser. We discuss web servers in Chapter 21. [Note: This example demonstrates client-side functionality. If the form is submitted (by clicking Submit), nothing will happen, because we don’t yet know how to process the form data. In later chapters, we present the server-side programming (e.g., in ASP.NET, JavaServer Faces, and PHP) necessary to process information entered into a form.]

 

Forms can contain visual and nonvisual components. Visual components include clickable buttons and other graphical user interface components with which users interact. Nonvisual components, called hidden inputs, store any data that you specify, such as e-mail addresses and XHTML document filenames that act as links. The form is defined in lines 21–46 by a form element.

 

Attribute method (line 21) specifies how the form’s data is sent to the web server. Using method = "post" appends form data to the browser request, which contains the pro-tocol (HTTP) and the requested resource’s URL. This method of passing data to the server is transparent—the user doesn’t see the data after the form is submitted. The other pos-sible value, method = "get", appends the form data directly to the end of the URL of the script, where it is visible in the browser’s Address field. The post and get methods for sending form data are discussed in detail in Chapter 21, Web Servers (IIS and Apache).

 

        <?xml version = "1.0" encoding = "utf-8"?>

 

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

        <!-- Fig. 4.12: form.html -->

 

        <!-- Form with hidden fields and a text box. -->

 

        <html xmlns = "http://www.w3.org/1999/xhtml">

 

              <head>

 

                     <title>Forms</title>

 

                </head>

                <body>

 

                       <h1>Feedback Form</h1>

 

                       <p>Please fill out this form to help

 

                             us improve our site.</p>

                       <!-- this tag starts the form, gives the -->

 

                       <!-- method of sending information and the -->

 

                       <!-- location of form script -->

 

                       <form method = "post" action = "">

<p>

                      <!-- hidden inputs contain non-visual --> 

                      <!-- information -->                            

                      <input type = "hidden"          name =           "recipient"     

                      value = "deitel@deitel.com" />        

                      <input type = "hidden"          name =           "subject"       

                      value = "Feedback Form" />            

                      <input type = "hidden"          name =           "redirect"       

                      value = "main.html"   />                    

</p>                           

                                               

<!-- <input type = "text"> inserts a text box -->

<p><label>Name:

<input name = "name" type = "text" size = "25"

maxlength = "30" />

</label></p>

<p>

                      <!-- input types "submit" and "reset" insert -->

                      <!-- buttons for submitting and clearing the -->

                      <!-- form's contents -->

                      <input type = "submit" value = "Submit" />

                                    <input type = "reset" value = "Clear" />

                             </p>

 

                       </form>

 

                </body>

 

</html>


The action attribute in the <form> tag in line 21 specifies the URL of a script on the web server that will be invoked to process the form’s data. Since we haven’t introduced server-side programming yet, we leave this attribute empty for now.

 

Lines 25–44 define six input elements that specify data to provide to the script that processes the form (also called the form handler). There are several types of input ele-ments. An input’s type is determined by its type attribute. This form uses a text input, a submit input, a reset input and three hidden inputs.

The text input in lines 35–36 inserts a text box in the form. Users can type data in text boxes. The label element (lines 34–37) provides users with information about the input element’s purpose. The input element’s size attribute specifies the number of char-acters visible in the text box. Optional attribute maxlength limits the number of characters input into the text box—in this case, the user is not permitted to type more than 30 char-acters.

Two input elements in lines 43–44 create two buttons. The submit input element is a button. When the submit button is pressed, the user is sent to the location specified in the form’s action attribute. The value attribute sets the text displayed on the button. The reset input element allows a user to reset all form elements to their default values. The value attribute of the reset input element sets the text displayed on the button (the default value is Reset if you omit the value attribute).

The three input elements in lines 25–30 have the type attribute hidden, which allows you to send form data that is not input by a user. The three hidden inputs are an e-mail address to which the data will be sent, the e-mail’s subject line and a URL for the browser to open after submission of the form. Two other input attributes are name, which identi-fies the input element, and value, which provides the value that will be sent (or posted) to the web server.

Additional Form Elements

In the previous example, you saw basic elements of XHTML forms. Now that you know the general structure of a form, we introduce elements and attributes for creating more complex forms. Figure 4.13 contains a form that solicits user feedback about a website.

        <?xml version = "1.0" encoding = "utf-8"?>

 

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

        <!-- Fig. 4.13: form2.html -->

 

        <!-- Form using a variety of components. -->

 

        <html xmlns = "http://www.w3.org/1999/xhtml">

 

              <head>

 

                     <title>More Forms</title>

 

                </head>

                <body>

 

<h1>Feedback Form</h1>

                       <p>Please fill out this form to help

 

                             us improve our site.</p>

                       <form method = "post" action = "">

<p>

<input type = "hidden" name = "recipient"

value = "deitel@deitel.com" />

<input type = "hidden" name = "subject"

value = "Feedback Form" />

<input type = "hidden" name = "redirect"

value = "main.html" />

</p>

 

<p><label>Name:

<input name = "name" type = "text" size = "25" />

</label></p>

                             <!-- <textarea> creates a multiline textbox -->

 

<p><label>Comments:<br />

<textarea name       = "comments"

rows = "4"  cols = "36">Enter comments here.</textarea>

</label></p>

                             <!-- <input type = "password"> inserts a -->

 

                             <!-- textbox whose display is masked with -->

 

                             <!-- asterisk characters -->

 

                             <p><label>E-mail Address:

                                    <input name = "email" type = "password" size = "25" />

 

</label></p>

 

<p>

                           <strong>Things you liked:</strong><br />

                          

                           <label>Site design

                           <input name = "thingsliked" type = "checkbox"

                           value = "Design" /></label>

                           <label>Links

                           <input name = "thingsliked" type = "checkbox"

                           value = "Links" /></label>

                           <label>Ease of use

                           <input name = "thingsliked" type = "checkbox"

                           value = "Ease" /></label>

                           <label>Images

                           <input name = "thingsliked" type = "checkbox"

                           value = "Images" /></label>

                           <label>Source code

                           <input name = "thingsliked" type = "checkbox"

                           value = "Code" /></label>

</p>

                             <!-- <input type = "radio" /> creates a radio -->

 

<!-- button. The difference between radio buttons -->

                             <!-- and checkboxes is that only one radio button -->

 

                             <!-- in a group can be selected. -->

<p>

<strong>How did you get to our site?:</strong><br />

                                   

<label>Search engine

                           <input name = "howtosite" type = "radio"

                           value = "search engine" checked = "checked" /></label>

<label>Links from another site

<input name = "howtosite" type = "radio"

                           value = "link" /></label>

<label>Deitel.com Website

<input name = "howtosite" type = "radio"

                           value = "deitel.com" /></label>

<label>Reference in a book

<input name = "howtosite" type = "radio"

                           value = "book" /></label>

<label>Other

<input name = "howtosite" type = "radio"

                           value = "other" /></label>

</p>

                                   

<p>

<label>Rate our site:

                                   

                           <!-- the <select> tag presents a drop-down -->

                           <!-- list with choices indicated by the -->

                           <!-- <option> tags -->

                           <select name = "rating">          

                           <option selected = "selected">Amazing</option>

                           <option>10</option>     

                           <option>9</option>        

                           <option>8</option>        

                           <option>7</option>        

                           <option>6</option>        

                           <option>5</option>        

                           <option>4</option>        

                           <option>3</option>        

                           <option>2</option>        

                           <option>1</option>        

                           <option>Awful</option>           

                           </select>

                                    </label>

                              </p>

                              <p>

 

                                    <input type = "submit" value = "Submit" />

 

                                    <input type = "reset" value = "Clear" />

                              </p>

 

                       </form>

 

                 </body>

 

           </html>



Fig. 4.13 |  Form using a variety of components.

In line 32, we introduce the br element, which most browsers render as a =line break. Any markup or text following a br element is rendered on the next line. Like the img ele-ment, br is an example of an empty element terminated with a forward slash. We add a space before the forward slash to enhance readability.

 

The textarea element (lines 33–34) inserts a multiline text box, called a text area, into the form. The number of rows is specified with the rows attribute, and the number of columns (i.e., characters per line) is specified with the cols attribute. In this example, the textarea is four rows high and 36 characters wide. To display default text in the text area, place the text between the <textarea> and </textarea> tags. Default text can be specified in other input types, such as text boxes, by using the value attribute.

 

The password input in line 41 inserts a password box with the specified size (max-imum number of characters allowed). A password box allows users to enter sensitive infor-mation, such as credit card numbers and passwords, by “masking” the information input with asterisks (*). The actual value input is sent to the web server, not the characters that mask the input.

 

Lines 47–61 introduce the checkbox form element. Checkboxes enable users to select from a set of options. When a user selects a checkbox, a check mark appears in the check-box. Otherwise, the checkbox remains empty. Each "checkbox" input creates a new checkbox. Checkboxes can be used individually or in groups. Checkboxes that belong to a group are assigned the same name (in this case, "thingsliked").

After the checkboxes, we present two more ways to allow the user to make choices. In this example, we introduce two new input types. The first type is the radio button (lines 71–85) specified with type "radio". Radio buttons are similar to checkboxes, except that only one radio button in a group of radio buttons may be selected at any time. The radio buttons in a group all have the same name attributes and are distinguished by their different value attributes. The attribute–value pair checked = "checked" (line 73) indicates which radio button, if any, is selected initially. The checked attribute also applies to checkboxes.

The select element (lines 94–107) provides a drop-down list from which the user can select an item. The name attribute identifies the drop-down list. The option elements (lines 95–106) add items to the drop-down list. The option element’s selected attribute specifies which item initially is displayed as the selected item in the select element. If no option element is marked as selected, the browser selects the first option by default.


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.