How to create a form and use the elements and values in JavaScript and HTML

HTML 4 and Javascript make it possible to build a basic Web applicaton with the components of forms.

A form is created with a form tag

That is done by inserting the tags <form> and </form> in the <body> section of an HTML page, but the editors of pages have a command to insert a form automatically.
Form objects are then placed inside the form tag.

The form tag have attributes for accessing it through the DOM and for sending data.

Attributes of the form
id
The unique identifier.
name
The name, its role is equivalent to that of identifier but for the functions of DOM, because the method getElementById is based on the id.
action
The name of a script to be loaded when the form is sumitted, with a submit button. Note that the names and values of the graphic components are given automatically in parameter to the script.
onSubmit
Event fired up when the form is submitted and before the execution of the action. It can allow to determine if the action must be executed or not.

Form components are accessed throught the DOM

To access the elements of a form in Javascript, one can use the methods of DOM or chaining the names (or identifiers) of the elements and subelements starting from the root object which is document.
For example, a form named myform contains the button mybutton, and this button has a label assigned to the value attribute, one can know the label with the string:

document.myform.mybutton.value

or dynamically assign it in the same way:

document.myform.mybutton.value="label"

It is possible as one will see it in example of button below, if it is the graphic component graph which indicates to the JavaScript code the name of the component to be treated, to use the keyword this, therefore the object whose attribute contains a reference to itself.

Alternatively if an identifier is given to an element, it can be accessed by the ID attribute: 

var val = document.getElementById("xxx").value;

Simple example: Button

There are several types of button, which are specified by the type attribute:
button, which corresponds to the graphic component,
submit, which is associated to the form and which starts the loading of the file assigned to the action attribute.
image: the button is an image loaded from a file.

The attributes are thus: type, id, name and value for a text or src for an image.
The value attribute holds the label which must be displayed on the button.

To associate an action to a simple button, withe the "button" type, one uses the event onClick to which is assigned a JavaScript function.
Example, inside the form:

<button name="My-button" value="My button" onClick="click(this);" />

and in the HEAD section, the Javascript code:

<script language="JavaScript">
function clic(element)
{
   alert("Clicked on " + element.value);
}
</script>

If one assign a id to the button, one can access directly the button thanks to this id and a function of DOM:

<button id="myid" name="My-button" onClick="clic();" />

and the Javascript code:

var id = document.getElementById("myid");
alert("Clicked on " + id.value);

Full code:

<form method="GET" action="">
  <input type="button" name="My button" value="Click" onClick="clic(this);">
</form>

function clic(element)
{
  alert("Clicked on " + element.value);
}

Example with an image

One can use an image as button. The JavaScript code is unchanged, only change the type of the button, and the value attribute is replaced by the src attribute to indicate the file of the image to use:

<input type="image" name="Save" src="save.gif" onClick="click(this);" />

Code:

<form method="post" action="">
  <input type="image" name="Save"  onClick="clic(this);" src="save.gif"/>
</form>	

function clic(element)
{
  alert("Clicked on " + element.name);
}

Example with OnSubmit

We have already spoken of the onSubmit attribute. Here an example of use of it.
The code of the form:

<form name="MyForm" action="hello" onSubmit="return submitcheck(this);" />

The reserved word return indicates that one must conditionally execute the action according to the value true or false which is returned by the function.
The simplified Javascript code (in a real example one would return a different value according to some processing):

function submitcheck(element)
{
   alert("The action to execute is " + element.action);
   return false;
}

Full code:

<form method="post" action="hello" onSubmit="return submitcheck(this);" >
  <input type="submit" name="My button" value="Click" onClick="clic(this);">
</form>	

function clic(element)
{
  alert("Clicked on " + element.name);
}

function submitcheck(element)
{
  alert("The action to execute is " + element.action);
  return false;
}

See also

© 2007-2012 Xul.fr