Building the form - AH503-AH505

Text Input Devices


After I entered the data the display shows this: Pix/Text_Input_Devices

Here, I duplicate the explanation given from AH503-AH506

First part contains comments on the body section of the program

An ordinary text field appears, just for comparison purposes. It has an id so that it can be identified in the JavaScript.

The next field is a password field. Passwords display asterisks, but store the actual text that was entered. This password has an id of pwd.

The hidden field is a bit strange. You can use hidden fields to store information on the page without displaying that information to the user. Unlike the other kinds of text fields, the user can't modify a hidden field. (She usually doesn't even know it's there.) This hidden field has an id of secret and a value (“I can't tell you”).

The text area has a different format. The input elements are all single-tag elements, but the textarea is designed to contain a large amount of text, so it has beginning and end tags. The text area's id is txtArea.

A button starts all the fun. As usual, most of the elements just sit there gathering data, but the button has an onclick event associated with it, which calls a function.

External CSS gussies it all up. The page has some minimal CSS to clean it up. The CSS isn't central to this discussion, so I don't reproduce it. Note that the page will potentially have a dl on it, so I have a CSS style for it, even though it doesn't appear by default. I don't know what the CSS would be; may be later I shall experiment to come up with a better looking display.


The second part contains comments on the function section of the program.

Create a variable for each form element. Use the document.getElementById mechanism.

Create a string variable containing the contents of each element. Don't forget: The getElementById trick returns an object. You need to extract the value property to see what's inside the object.

Make a big string variable to manage the output. When output gets long and messy like this one, concatenate a big variable and then just output it in one swoop.

HTML is your friend. This output is a bit complex, but innerHTML is HTML, so you can use any HTML styles you want to format your code. The return string is actually a complete definition list.

Whatever is inside the textbox is (in this case) reproduced as HTML text, so if I want carriage returns or formatting, I have to add them with code.

Newline characters ( \n) clean up the output. If I were writing an ordinary definition list in HTML, I'd put each line on a new line. I try to make my programs write code just like I do, so I add newline characters everywhere I'd add a carriage return if I were writing the HTML by hand.


The third part describes 'How to Understand the generated source'.

  1. Reload the page.

    You want to view it without the form contents showing so that you can view the source. Everything will be as expected; the source code shows exactly what you wrote.
  2. Click the Click Me button.

    Your function runs, and the page changes. You clearly added HTML to the output div because you can see the output right on the screen.
  3. View the source again.

    You'll be amazed. The output div is empty, even though you can clearly see that it has changed.
  4. Check generated code. Using the HTML validator extension or the W3 validator (described in Book I, Chapter 2) doesn't check for errors in your generated code. You have to check it yourself, but it's hard to see the code!

Advertised 'Colorado Springs, CO HTML/Web Development Training Classes at location.

If the daily lecture consists of 8 hours, then hourly cost varies from $54.06 to $72.50.
If the daily lecture consists of 10 hours, then hourly cost varies from $43.25 to $58.00.