(X)HTML Forms

The Name Attribute

The name attribute holds a very important place in forms. Virtually every language created to work with forms (both client-side and server-side) uses these names to extract data. JavaScript is no different. The following form-related elements get the name attribute:

• form
• input
• textarea
• select
• button

Yes, I know I introduced the button class way back in Inline Elements, but they're usually used in forms.

JavaScript has a neat way of handling the name attribute: the value of the name attribute is treated like the name of a property which contains a reference to that form element node. For example, if I gave a form element the name Form1, then Form1 would be a property of the document node. Any form elements with name attributes of their own within that form element can be referred to using its name as a property of Form1. If multiple elements have the same name value, then JavaScript considers that a node list.

The Value

The value is what's passed on to the script. It can be defined in the value attribute (with the exception of the textarea element, where the value is set through the element's content), but can be overridden by interaction with the input.

The value of an input is accessed through the property of the value property.

Do note: If you set a default value but override it through interaction with the input, you will still be able to get the original value through the getAttribute function (for most inputs) or through firstChild.data for the textarea element, since those methods read right from the webpage code; the webpage code is only altered through methods I will explain in DOM Manipulation. I've used this to my advantage.

Required Attributes

action

This contains the URI of the file containing the server-side script that handles all this. If all you're doing with the form is using it with client-side scripting (such as JavaScript), you can just leave this attribute empty.

Implied Attributes

method

Again, this is for server-side scripting. It has two values: GET (the default) and POST, which describes how the information from the form is sent. GET affects the URI, and a ? in the URI is a good indication that this is going on. The server-side script generating the resultant page then gets the necessary information from the URI. POST, on the other hand, just posts information to the server without affecting the URI.

enctype

This lets the server know the content type of form being submitted to the server. It has a default value: application/x-www-form-urlencoded.

accept

This is a comma-seperated list of content-types that the server will handle correctly. A user agent (such as a browser) can use this list to filter out certain file types when an input element is of the file upload type.

accept-charset

This is a list of character sets that can be used with the form.

onsubmit

Run a client-side script when the form is submitted. This may also be set via client-side scripting.

onreset

Run a client-side script when the form is reset. This may also be set via client-side scripting.

Common Attributes

tabindex

As mentioned in Inline Elements, this sets the order in which the focus jumps from one element to another (in this case, the various input elements) when the tab key is pressed.

disabled

This attribute means that the input element cannot be used, and server-side scripts will not read from the input (client-side scripts will, though). It is a boolean attribute and corresponds property disabled.

onfocus

The element got the focus of the browser.

onblur

The element loses the focus of the bowser.

onselect

Some text is selected.

onchange

The value is changed.

onfocus, onblur, onselect, and onchange are all events and may be set through client-side scripting.

The Input Element

Element Name: input

The input element is where you enter the information. It must be contained within a block element, such as p or li.

The input element is an empty element. It has no end tag.

Input Types

The attribute type is the most important attribute in an input element. It describes what kind of input it is. The type has the following possible values:

• text
• password
• checkbox
• radio
• button
• reset
• submit*
• file*
• hidden
• image*

* Server-side use only

Every attribute I mention in this section on input elements can be used with any type. However, not all of them will do what is expected. For example, you may use the checked attribute with an input element with type text. It just won't do any good.

The attribute type corresponds with the property type, and may be changed through JavaScript.

Text and Password Boxes

Both of these are text boxes, but the text inside them is handled differently. In a textbox, it's clear for all to see; in a password box, the text is obscured:

Attributes for Text And Password Boxes

value

This attribute sets the default text for the text or password box. Changing this text will change the value of the input.

readonly

This attribute means the text in it can't be directly altered by the user. It is a boolean attribute and corresponds with the JavaScript property readonly.

maxlength

This numeric attribute sets the maximum number of characters that can be entered into a field. The length of the text field is irrelevant.

Getting Text From Text And Password Boxes

The text of a textbox or a password box is known as its value. It's this property that you use to get its information.

Below is a simple form and the script used to get its information:

Demonstration Of Text and Password Inputs

The HTML Form

<form action="../../submit.html" id="JS-Forms-Form" name="Form">

<dl>

<dt>type="text"</dt>

<dd><input type="text" name="Input"></dd>

<dt>type="password"</dt>

<dd><input type="password" name="Input"></dd>

</dl>

<p><input type="button" value="Show Text" name="Click"></p>

</form>

<p>Textbox text: <span id="Text-text">&nbsp;</span></p>

<p>Password text: <span id="Pass-text">&nbsp;</span></p>

The Form's Script

var form = document.Form;

var txt = document.getElementById("Text-text").firstChild;

var pass = document.getElementById("Pass-text").firstChild;

form.Click.onclick = function(){

Write(form.Input[0].value, txt);

Write(form.Input[1].value, pass);

}

function Write(box, span){

span.data = (box)?box:"Null";

}

Notice that I highlighted the contents of the name attributes to show how the form name becomes a property name of the document and the input names become property names of the form; that's what I meant by, In JavaScript, the value of name becomes an property of its respective form element node.

Below is the result:

Checkboxes and Radio Buttons

Checkboxes and radio buttons allow for multiple choice. There is one major difference: More than one checkbox can be chosen, but only one radio button may be chosen.

If two or more radio buttons share the same name, only one of those buttons can be checked at any time. Below, I have two groups of radio buttons arranged in columns; one is named G1, the other G2.

Two Groups Of Radio Buttons

<table>

<tr>

<th>G1</th>

<th>G2</th>

</tr>

<tr>

<td><input type="radio" name="G1"></td>

<td><input type="radio" name="G2"></td>

</tr>

<tr>

<td><input type="radio" name="G1"></td>

<td><input type="radio" name="G2"></td>

</tr>

<tr>

<td><input type="radio" name="G1"></td>

<td><input type="radio" name="G2"></td>

</tr>

</table>

Three share the name G1, the other three the name G2. Therefore, there are two groups and only one from each group can be chosen (two choices in total).

Which is the case.

Attributes for Checkboxes And Radio Buttons

checked

This sets the name of what is automatically selected when the page is loaded. If more than one radio button in a single group has this, the last button with this attribute in the group is the one that is checked. If the inputs are checkboxes, then all checkboxes with this attribute are checked. It is a boolean attribute and corresponds with the JavaScript property checked.

value

This attribute is a lot more important in these controls than they are in text boxes and passwords. The value attribute is a checkbox's or radio button's only means of passing on information beyond whether or not it is checked to the script.

Getting A Value From Radio Buttons And Checkboxes

When you assign the same name to inputs, the name, used as a property, returns an actual node list, which you can then use like an array.

Both types of inputs have a property called checked. If a checkbox or radio button is checked (i.e. selected), the property returns the boolean value true. Otherwise, it returns the value false.

Look at the example below:

I have one list with checkboxes, and another with radio buttons.

The Inputs Of The Form

<ul>

<li><input type="checkbox" name="Decorate" value="underline">Underline</li>

<li><input type="checkbox" name="Decorate" value="overline">Overline</li>

<li><input type="checkbox" name="Decorate" value="line-through">Strike-through</li>

</ul>

. . .

<ol>

<li><input type="radio" name="Sentences" checked="checked"></li>

<li><input type="radio" name="Sentences"></li>

<li><input type="radio" name="Sentences"></li>

<li><input type="radio" name="Sentences"></li>

</ol>

. . .

<p id="Click_Here"><input type="button" name="Click" value="Show Text"></p>

You can't show both 1 and 2 or 2 and 4 sentences, but you can have the letters underlined, overlined, and struck through. Therefore, radio buttons for the number of sentences, and checkboxes for the text decoration.

Below is the full script:

The Form Script

var form = document.Form1;

var txt = document.getElementById("Display_Text");

var lorem = document.getElementById("Lorem").firstChild.data.split(".");

form.Click.onclick = function(){

var sentence = -1;

var text = "";

var decor = "";

do{

sentence++;

text += lorem[sentence] + ". ";

} while(!(form.Sentences[sentence].checked));

txt.firstChild.data = text;

for(var l = 0; l < form.Decorate.length; l++){

if(form.Decorate[l].checked){

decor += form.Decorate[l].value + " ";

}

}

txt.style.textDecoration = decor;

}

The radio buttons in the Sentences group is handled by a do-while loop.

The Do-While Loop Chooses How Many Sentences To Show

do{

sentence++;

text += lorem[sentence] + ". ";

} while(!(form.Sentences[sentence].checked));

The Lorem Ipsum text is split using the period as a delimiter, resulting in an array of four sentences (lorem). Every time the loop is run (as a do-while loop, it's run at least once), sentence (initially set to negative 1) is incremented by one, the text stored in the slot that corresponds to the variable sentence is added to text, and the while condition keeps everything going so long as the radio button that sentence had corresponded to is not checked.

There's a couple of things I want to point out. First, if no radio buttons in that group were checked, this would technically be an infinite loop (or, rather, would crash when it ran out of nodes), but recall in the HTML, one of the radio buttons has the attribute checked, so even if you don't check a radio button, one will be automatically checked. Second, I omitted the value attribute from the radio buttons— I don't need it. The do-while loop tells the script to keep adding text until it encounters a checked radio button, allowing me to omit value.

Since only one radio button can be checked, the loop doesn't need to run anymore once a checked one is found. Thus, a while loop (or in this case, a variation thereof) is used.

Meanwhile, since any number from none to all checkboxes can be checked, we have to go through all of them. This calls for a for loop, which will check all of them.

The For Loop Chooses Which Styles To Use

for(var l = 0; l < form.Decorate.length; l++){

if(form.Decorate[l].checked){

decor += form.Decorate[l].value + " ";

}

}

This loop thus runs through the node list represented by Decorate, so the if statement checks to see if each one is checked (which, remember, returns a value of true). Each time one is, the variable decor (which starts out empty) is updated, and the final result is later sent to the style property textDecoration. As you know, in CSS the value underline overline strikethrough is perfectly acceptable, and so it is with JavaScript.

Buttons and Reset Buttons

The last two inputs that are commonly used for client-side scripts are the reset button and the regular button. The reset button simply resets the form to its original state, while the regular button is there for something to click on (for example, if you're running a client-side script).

The value attribute of these alter their text. Normally, a button-type input has no text, and a reset button has simply the word Reset.

Others

There are four types of inputs that I didn't mention, mostly because they're used with server-side scripting:

file

This allows for file input.

submit

Submits the form to the server for processing

image

An image that works like a submit button. It shows up like an image, but when you click on it, the values passed onto the pages specified in the action attribute of the form element are the x- and y-coördinates of where you clicked on the image. Yes, it works like an server-side image map, as explained in Image Maps. It has the following attributes:

src

The source of the image.

usemap

Use a client-side image map.

ismap

Use a server-side image map.

All work the same way as they do in img elements.

hidden

This control isn't seen on the webpage, but is often used to contain information that you want to work with.

The Text Area Element

Element Name: textarea

The textarea element is used to contain large amounts of text, and therefore shows multiple lines (as opposed to the input element, which shows only one).

While this attribute does not have a value attribute (though it does have a value property), this is offset by the fact that this is not an empty element, and may therefore contain text. It cannot have other elements nested in it, though, and treats them like the title element does.

Using A Text Area

The text area presents a special challenge because its contents may include new lines, which I explained back in Text.

In the example below, the script takes the text entered into a text area, and writes the first three lines that contain text to three separate p elements. You will see that the id attribute can be used like a property for these elements.

Text from text area Echoed In p Elements

var form = document.getElementById("Form");

var txt = form.Text;

var write = document.getElementById("Write").getElementsByTagName("p");

form.Click.onclick = function(){

var txt_split = (txt.value.match("\r\n"))?txt.value.split("\r\n"):txt.value.split("\n");

var l = 0;

var pc = 0;

while(pc < write.length && l < txt_split.length){

if(txt_split[l].length > 0){

write[pc].firstChild.data = txt_split[l];

pc++;

}

l++;

}

}

Note the highlighted line. Some browsers see a new line in a text area as a carriage return character (\r) followed by a new line character (\n), while others see a new line as simply a new line character. Here, I have set up the script to choose which to split the line on.

The result is below:

There are several blank lines, but all have a length of 0, which means that the if statement skips them.

Dropdown Menus

Dropdown menus are yet another means of input. These elements come in a specific set. The elements are:

• select
• option
• optgroup

Using A Dropdown Menu

Below is a page that uses all of these elements:

Here is the code of the elements in question:

The Code Of A Dropdown Menu

<select name="Selection">

<optgroup label="Words">

<option value="7">Seven</option>

<option value="2">Two</option>

</optgroup>

<optgroup label="Digits">

<option value="5">5</option>

<option value="6">6</option>

</optgroup>

<optgroup label="Roman Numerals">

<option value="1">I</option>

<option value="8">VIII</option>

</optgroup>

<select>

I could have easily arranged them like this as well, eschewing the optgroup altogether:

The Code Of A Dropdown Menu Without optgroup elements

<select name="Selection">

<option value="1">I</option>

<option value="2">Two</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">Seven</option>

<option value="8">VIII</option>

</select>

Below is the script that works with this particular control:

A Script That Reads A Dropdown Menu

var form = document.getElementById("Form");

var txt = document.getElementById("Answer").firstChild;

form.Click.onclick = function(){

var ans = Number(form.Selection.value);

if(ans > 5){

txt.data = "greater than 5";

}else if(ans < 5){

txt.data = "less than 5";

} else {

txt.data = "equal to 5";

}

}

Below, I select a random option, and click the button for a comparison.

If I want to get rid of the button, and have simply selecting an option do the comparison, a simple change of the code suffices:

A Script That Reads A Dropdown Menu Automatically

var form = document.getElementById("Form");

var txt = document.getElementById("Answer").firstChild;

form.Selection.onchange = function(){

var ans = Number(form.Selection.value);

if(ans > 5){

txt.data = "greater than 5";

}else if(ans < 5){

txt.data = "less than 5";

} else {

txt.data = "equal to 5";

}

}

I set the event to detect a change in Selection's value, and that runs the script instead, which means I can get rid of the button:

The Label Element

Element Name: label

The label element is usually used with the input element, though it can also be used with textarea and select as well.

It is permissible for other inline elements (including input, textarea, select, and other label elements) to be nested inside a label element.

The Fieldset Element

Element Name: fieldset

The fieldset element is like a div element for forms; it breaks the form up into separate chunks. However, it's not supposed to contain anything but whitespace (enters, tabs, and spaces) and elements nested therein. If given an ID that matches the name given to form elements, it will be considered part of the resulting node list.

Unlike most form elements, it has no special attributes.

Example Form

Below is a form that is arranged and labelled with the elements mentioned above. Yes, it's an adjustment of the example with checkboxes and radio buttons.

With the stylesheet of the page removed, the form looks like this:

Do note: I did not change the script at all. These elements don't affect the script in any way. Yes, I know part of the page was truncated; those are the same paragraphs as you saw in the original radio button and checkbox demonstration.