Basics of HTML form input
Text Object :
The following syntax will get the Text Field input box object in javascript
Syntax: document.formname.textname
Example Code:
<form name=testform>
<input name=textn value=test type=text>
</form>
<script language="javascript">
var cbobject= document.testform.textn;
</script>
Here are the events, dom properties and method associated with
Text element.
Event Handlers: Associated with Form type Text Field:
All the examples below use a javascript function output
<script language=javascript>
function output()
{
alert("testing Text events");
}
</script>
DOM Properties:
The following are the list of DOM (Dynamic Object Model) properties
that can be used to get and alter Text Field properties in javascript.
The below examples are based on the form
<form name=form1>
<input name=testf type=text value=xxx>
</form>
| DOM Property | Description | Example |
| defaultValue | Used to get and set the default value
of the text field |
To Get:
var ss = document.form1.textf.defaultValue;
|
| form | Used to get the parent node (form object)
of this Text Node |
To Get:
var ss = document.form1.textf.form;
|
| name | Used to get Text Field name |
To Get:
var ss = document.form1.textf.name;
|
| type | Used to get form type |
To Get:
var ss = document.form1.textf.type;
|
| value | Used to set or get Text Field value |
To Get:
var ss = document.form1.textf.value;
To Set::
document.form1.textf.value = "testy";
|
| size | Used to set or get Text Field size |
To Get:
var ss = document.form1.textf.size;
To Set::
document.form1.textf.size = 4;
|
| readOnly | Used to check or change readonly property.
Users cannot enter any value if the text field is set as readonly. |
To Check:
var ss = document.form1.textf.readOnly;
To Set::
document.form1.textf.readOnly = true;
|
DOM Methods:
The following are the list of DOM (Dynamic Object Model) methods
that can be used to do dynamic changes like dynamic text field selection using javascript.
| DOM Method | Description | Example |
| select() | Used to dynamically select a text field |
To Select:
document.form1.textf.select();
|
| blur() | Used to dynamically make the Text Field blur |
To Blur:
document.form1.textf.blur();
|
| focus() | Used to dynamically get focus on the Text Field |
To Focus:
document.form1.textf.focus();
|
Example: Making Text Field Select on a button Mouse Over
<script language=javascript>
function rbevent()
{
var xx = document.xx.testtext.focus();
}
</script>
<form name=xx>
<input type=text name=testtext">
<input type=button name=rbtest onMouseOver="rbevent()">
</form>
Result:
| 
Introduction
