This magic is performed by changing the value of the text field. The form looks like the one in the last example:

<form name="first_form">
<input type="text" name="first_text" value="Are you happy?">
</form>

The links that change the text field are:

<a href="#" onMouseOver="window.document.first_form.first_text.value=
'Clap clap!';">Yes, and I know it.</a>
<a href="#" onMouseOver="window.document.first_form.first_text.value=
'Sour puss!';">No!</a>

These are normal mouseovers; the important part is: window.document.first_form.first_text.value='Clap clap!'. This says, "find the form called first_form in the document, find the form element called first_text, and set its value to 'Clap clap!'." The second line works similarly. This is very much like changing the src of an image. Instead of having a src, text fields have values.

Other types of form elements can be affected by messing with their values — for example, textareas:

The forms and links here are very similar to those above. The form is:

<form name="form_two">
<textarea name="the_textarea" rows=10 cols=60>
Mouse over below to see the first verse of
The Webmonkey song, adapted from
"I Wanna Be Like You" (The Monkey Song)
from Walt Disney's The Jungle Book
written by Richard M. Sherman and Robert B. Sherman
</textarea>
</form>

Notice that the form has a name, form_two, and the textarea has a name as well, the_textarea.

The links are basically the same as what you saw in the text field example:

<a href="#" onMouseOver="window.document.form_two.the_textarea.value=
first_part;">Part 1</a>
<a href="#" onMouseOver="window.document.form_two.the_textarea.value=
second_part;">Part 2</a>

The only difference is that instead of assigning a string to the value of the textareas, I assigned variables that I defined in the header. View Source to see that they're there. I only did this for the sake of neatness, to get those long strings out of the HTML. A well-groomed monkey is a happy monkey. Here's one of the strings:

var first_part = "Now I'm the king of the swingers\nOh, the jungle VIP\nI've reached the top and had to stop\nAnd that's what botherin' me";

Notice the "\n". This is standard computerese for new lines. In general, because you're working with HTML, the new line isn't important. But if you're writing something in a <pre> tag, or you're writing into a textarea, the "\n" comes in handy.

In addition to changing the values of form elements, JavaScript allows you to detect events that go on inside of them. Here's an example of detecting events inside a text field.