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

What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient
#id {
What operator is used to determine the rest of the division of two numbers?
% * /
var rest8_7 = 8 % 7;
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
Form, text, textarea, file objects

Last accessed pages

  1. AJAX Course, free Lessons (258)
  2. PHP MySQL - INSERT INTO (353)
  3. PHP Sessions (57)
  4. PHP Strings (99)
  5. PHP PDO - Select query, fetch (666)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (1710)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1668)
  3. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (1626)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (1381)
  5. PHP Chat Script (1284)