Form, text, textarea, file objects

The form object corresponds to the HTML <form> tag.
Forms can be accessed via the forms[] collection on the document object or via other DOM accessors, like getElementById().
Forms contain input elements like text fields, checkboxes, radio-buttons, submit and reset buttons; can also contain select menus, textarea, fieldset, legend, and label elements.

form object properties


- Example, writes in the page the values of the action, method, target and name attributes, also gets the number of its elements:
<form action="index.php" method="post" name="ex_form" id="frm1" target="_blank">
 Name: <input type="text" name="inp1" />
 Pass: <input type="text" name="inp2" /><br />
 <input type="submit" name="submit" value="Submit" />
</form>
<script type="text/javascript"><!--
document.write('name - '+ document.getElementById("frm1").name+ '<br />');
document.write('length (number elements) - '+ document.ex_form.length+ '<br />');
document.write('action - '+ document.ex_form.action+ '<br />');
document.write('method - '+ document.ex_form.method+ '<br />');
document.write('target - '+ document.ex_form.target+ '<br />');
--></script>
- The output of the script is:
name - ex_form
length (number elements) - 3
action - index.php
method - post
target - _blank

form object methods

form object events


- Example - Create a form with one button that submits the form with submit() method and a reset button that displays an Alert when is clicked.
<form action="index.php" method="post" name="frm2" id="frm2" onreset="alert('Reset clicked')">
 Name: <input type="text" name="inp1" /><br />
 <input type="button" value="Send form" onclick="submitForm()" /> <input type="reset" value="Reset" />
</form>
<script type="text/javascript"><!--
function submitForm() {
  document.getElementById("frm2").submit();
}
--></script>
- The result is the fallowing form:
Name:

1. Text, Password and Hidden objects

These objects represent their corresponding form elements.

Properties of the Button, Submit and Reset objects

Methods of the Text, Password and Hidden objects

Events of the Text, Password and Hidden objects


- Example: - Create a form with a text box. When the mouse cursor is over the text field, the text inside is selected, when you click on the text box it deletes its value and on Blur it changes its content at original value.
<form action="index.php" method="post" name="frm3" id="frm3">
 Name: <input type="text" value="Text..." name="inp1" onclick="this.value=''" onblur="this.value=defaultValue" onmouseover="this.select()" />
</form>
- This code will display the fallowing form:
Name:

2. Textarea object

Textarea object represents the form <textarea> element.

Textarea object properties

Textarea object methods

Textarea object events


- Example: - Create a form with a textarea. When onfocus (the keyboard cursor is inside it) deletes the original content and sets /changes the values of "rows" and "cols" attributes. When onblur, it displays an Alert with the text inside textarea.
<form action="index.php" method="post" name="frm4" id="frm4">
 <textarea name="txta" rows="3" cols="33" onfocus="this.value=''; this.rows=5; this.cols=55" onblur="alert(this.value);">Original text</textarea>
</form>
- This code will display the fallowing form:

3. File object

The file object represents the file upload element in forms.
This object allow file uploading to a server. Clicking on the browse button opens the file dialog box that allows a user to select a file to upload.

File object properties

File object methods

File object events


- Example: - Create a form with a input File. After the user chooses a file to upload, it will display an Alert with a message that contains the value of the field (the file name) and the accepted content types.
<form action="" method="post" name="frm7" id="frm7">
 Upload a image: <input type="file" name="fl1" accept="image/jpeg, image/gif" onchange="alert('Value: '+ this.value+ '\n Accepted type: '+ this.accept)" />
</form>
- The result is the fallowing form:
Upload a image:

4. Other form object elements

• The fieldset object represents the element that lets you group related form controls and labels.
• The legend object lets you assign a caption to a fieldset.
- Property of the fieldset and legend objects :
• The label object represents the element of the same HTML <label> tag. Labels are used to attach information to form controls.
- Property of the label object :