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" />
<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 - '+ '<br />');
- 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" />
<script type="text/javascript"><!--
function submitForm() {
- The result is the fallowing form:

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 code will display the fallowing form:

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>
- 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)" />
- 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 :

Daily Test with Code Example

Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
Click on the "echo" correct instruction.
echo "" echo ""; echo """;
echo "Address URL:";
Form, text, textarea, file objects

Last accessed pages

  1. Read Excel file data in PHP - PhpExcelReader (56751)
  2. Insert, Select and Update NULL value in MySQL (26535)
  3. jQuery Drag and Drop Rows between two similar Tables (6882)
  4. Ajax-PHP Chat Script (36546)
  5. JavaScript code and PHP (20369)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (488)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (388)
  3. Register and show online users and visitors (365)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (346)
  5. Insert, Select and Update NULL value in MySQL (237)