Making_Form_elements_appear

A form is a section of your web page that contains areas that user can enter or select information, in addition to all the other HTML content you have come to know and love, like images, text, lists, tables and links. If you have spent any amount of time on the web, you have almost assuredly seen forms before!

In many web pages, the information that you, the user, put into the forms is then sent to the computer that is hosting the website (i.e. the one that stores the html files), and that computer makes other information appear, based on what you send. Doing this is beyond the scope of this class. We will, instead, make the user's computer process the user's information, and respond to that. (This is, admittedly, not as cool or effective as the more popular method.) In this tutorial, however, we are just going to focus on making form elements appear on the web page, even if they don't do anything with the information they contain.

The ... tag is a binary tag that declares the area where the input fields will live. It also defines how these input controls will be accessed in javascript. (And in the advanced, server-side processing that we won't be getting to, it also defines what method is used to send the information to the computer.) So here is the basic form tag: code format="html4strict"  ... content goes here. code By itself, a form tag doesn't look like anything at all on the web page - it is just a holder of items that you can see. Note: in the rest of this page, I will continue to use "myFirstForm" as the form id, but you should never put two forms with the same id on the same page.

A very common form element is the text field - this is one of the first form elements you use when you browse, I suspect. If you start at google, the space where you enter the words to search for is a text field. It is actually done with an "input" tag, which is a chameleon tag - the input tag has many different appearances, based on its "type" attribute: code format="html4strict"  Name:  code This will make a text box that the user can type in: media type="custom" key="2657589" There are many other attributes that you can add to this type of tag. Here are a few: There are two variations on the text field: type="hidden" and type="password" - you are welcome to explore these on your own. A checkbox is a button that keeps track of its state - whether it is checked or not. Clicking on the button changes whether it is checked. That is, clicking "toggles" the button's state. This is also created with an tag code format="html4strict"  Likes prunes code This will make a checkbox: media type="custom" key="2657707" The Checkbox has one attribute of particular interest, beyond the type and name: Radio buttons look a great deal like checkboxes, except they are round. They are functionally different because they tend to come in sets, and only one radio button per group can be checked at a time. (Selecting one will de-select the others.) This, too is a variation on the "input" tag. code format="html4strict"  Red
 * Text field**
 * attribute name || Sample value || Meaning ||
 * readonly || "readonly" || the user can't type in the field ||
 * size || 40 || The number of characters that will typically fit in this field, although the text will likely scroll wider than the size of the box ||
 * maxlength || 10 || The most characters that this text field can hold, regardless of how wide the field is on the screen ||
 * value || "sample text" || The text that appears in this box when the page is loaded. (Or when the form is reset.) ||
 * onchange || "alert('changed!');" || What to do when the user changes the content of the text field. ||
 * Checkbox**
 * attribute name || Sample value || Meaning ||
 * checked || "checked" || is the checkbox checked to start? ||
 * onChange || "alert('changed!');" || What to do when the user changes the content of the text field. ||
 * Radio Buttons**

Green

Blue

code Notice that all of these radio buttons have the same name. (This isn't something you'd want to do with checkboxes or any other type of input.) Having the same name attribute is what makes these radios exclusive - only one radio of a given group can be selected. media type="custom" key="2657769" As with the checkbox, the radio button also has a "checked" attribute and onChange attribute. Unlike the checkbox and the RadioButton, the button is more like a traditional button - it doesn't keep track of its state, just whether anybody has pushed it. It has a more limited range, but it has all the other event attributes - onClick, etc. code format="html4strict"   code As you should see below, the value is what determines what shows up on the button, itself.
 * Buttons**

media type="custom" key="2657819" There is a variation on the traditional button, type="reset." If you create a reset button, clicking it will automatically return the inputs in this form to the condition you found them when you loaded the page. Another button variation, type="submit" is often used by websites with server-side processing - it is what sends the form's data on to the host server. We won't be using this button type.

Another popular form object is the pop-up menu. Unlike any of the other user items so far, though. Pop-ups do not use the tag - rather, they use a set of tags with a similar stucture to ordered and unordered lists. code format="html4strict"   1. Who? 2. What? 3. I don't know! code As you can see, the tag identifies this as a single popup menu (it is the one that names the menu as a whole.) The tags each have a value and some enclosed text. They are what defines each item on the menu that pops up. media type="custom" key="2657925" Useful attributes here are the "onchange" attribute for the tag, and the selected="selected" attribute/value pair for one of the. Picking sensible values for the "value" attribute in the tag is wise - when you use javascript to refer to this popup menu, it is easiest to get the value of the currently selected menu item. One more! The text area is another type of input that doesn't use the tag. The tag creates a multiline text field: code format="html4strict" <form id="myFirstForm"> <textarea name="other" cols="40" rows = "5">Initial text code This creates a text area that has space for 40 characters across and 5 rows down. media type="custom" key="2657951" If you type more than 5 rows in this text area scrollbars will appear.
 * Pop-up Menus**
 * Text areas**