Web Forms

In this final assignment before the Final Project, we were to do some web form processing. I chose, again, to do so with JavaScript.

As mentioned in previous pages, this Project is not meant to be a discussion on JavaScript That's be a much lengthier discussion, and I'm not really qualified to carry on -- yet.

This leaves one final HTML tag that I've not talked about yet:

The <input> tag:

This tag defines an area where a user can input data. It can accept typed text or files such as audio, video, and images. Of all the tags discussed on the other pages, this one has the most attributes by far, with quite a number being added for HTML5.

In my assignment, I used it to accept typed text by the user. I then processed that data, in a JavaScript function, to check it for acceptable characters and length (there is a maxlength="" attribute, but I found it didn't work quite as I wanted it to -- and besides, I wanted to exercise my JavaScript skills).

Using the exact code that I used on this assignment, this is how I accepted the user's input, and then passed it on to the JavaScript function:

The first line defines the input box as being for text, set its ID to "txt1", and accepts the user's input. The second line then controls what happens when the button is pressed -- it takes the input from the input box, via its ID ("txt1"), and sends it to the changeBackgroud() function for processing.

I see, now, that I used the name="" attribute in both lines. When looking over the code for this assignment, I find that those are not used any other place -- so I could have just left them off.

The original page for this HTML assignment includes links to the original HTML, CSS, and JavaScript code.

For grins and giggles, here's the JavaScript function, changeBackground(), that processes the user's data when they click the button -- can you figure out what I'm doing?

Click here for more information on the <input> tag and its attributes.

A search bar example for Ryan in my CIS133 class:

HTML code:

In this lesson, I really expanded my horizons with JavaScript. I learned how to pass information to a function from the HTML page and process it in some way. Based upon that processing, I then had the function(s) "do" appropriate things to the HTML page. I had the function handle most (hopefully all) forms of error checking; "wrap-around" counting (both directions) when cycling through the colors as well as checking the length and validity characters inputted on the HTML page. I also learned how to get a string's length, and how to set a string to all upper case letters.