Changes

Jump to: navigation, search

An Overview of HTML Forms

1,195 bytes removed, 18:23, 5 June 2007
JavaScript and The Text Object
Now that we have a basic understanding of the structure of an HTML form we can now look at each of the form elements in detail.
== JavaScript and The HTML Text Object ==
Now that we have covered the basics of the JavaScript Form Object it is time to look at the objects we can place into the Form container to interact with the user. The most common of these form objects is the ''Text'' object. The Text object places a single line text field into tyhe the form into which the user can type information (such a name, address or telephone number).
The syntax for creating a text object within a Form is as follows:
''event handling'' specifies what JavaScript action to take when a particular event on the object is triggered. Events that can be triggered by the Text object are:
* '''onFocus''' - triggered when the text field gains focus (typically when the cursor is moved into the field to begin typing).
* '''onSelect''' - triggered when the user highlights text in the text field.
In addition to events, the Text object also has a number of JavaScript methods that can be accessed to perform such tasks as selecting text and changing focus:
* '''focus()''' - sets focus and sets the cursor on the text field
* '''select()''' - Selects the text in the field so that when the user types all the existing text is replaced.
 
Now that we have covered some of the basics of building a FORM we can bring some of these concepts toegther in an example using the text object. The following example creates a Form containing a text field. When the user clicks in the text field the ''onFocus'' event is triggered which in turn calls the ''select()'' method to highlight the text in the field (Note that since we are referencing the current object when calling the ''select()'' method we can use the ''this'' keyword to refer to the current object):
 
<pre>
 
<html>
<head>
<title>JavaScript Form Example</title>
<script language=javascript type="text/javascript">
function buttonPressed()
{
// document.write ( document.myForm.elements[0].value );
var phone = document.getElementById("myText");
 
document.write ( phone.value );
}
</script>
</head>
 
<body>
 
<form action="" name="myForm">
<input type="TEXT" name="myText" id="myText" value="Some text" onFocus="this.select()"/>
</form>
 
</body>
</html>
 
</pre>
== JavaScript TextArea Object ==

Navigation menu