To access the HTML elements that have id attributes, you will need to use the getElementById(id) function. To access the form elements, you can use the following prototype: document.forms[index].ele_name.ele_attr. On a single HTML page, its possible to have more than one form. You can have multiple forms. But in common, there is only one form on the page and therefore the index is zero. The ele_name is the name of the form element and ele_att is the attribute of the element.
<title>Text field element</title>
var user=document.forms.username.value;//get value from the username tex box
var email=document.forms.email.value;//get value from the email text box
document.getElementById("mydiv").style.backgroundColor="509877"; // set div background color
document.getElementById("mydiv").innerHTML="<strong>Welcome "+user+"!</strong><br>"+ "Your e-mail is "+ email+"."; //Display welcome message in the div tag
//in the form of html code that can be translated by browser.
<td>User name:</td><td> <input type="text" name="username" ></td>
<td>E-mail: </td><td><input type="text" name="email" ></td>
<td><input type="button" name="submit" value="submit" onclick="getinfo()"></td>
Note: We use the onclick attribute that contains the getinfo() function as its value to generate action when the user clicked the button. The onclick is called an event in a programming language. Events are attached to the HTML tags and form elements to generate actions. The some common events are shown below:
onAbort: An image failed to load.
onBlur: A form element lost the focus (User moved to another element)
onChange: The contents of a element has changed.
onClick: User clicked on the element. It is commonly use for button.
onFocus: User moved into the form element.
onKeyDown: A key was pressed.
onKeyUp :A key was released.
onLoad: The object (image,iframe) finished loading.
onMouseDown: A mouse button was pressed.
onMouseMove :The mouse moved.
onMouseOut: A mouse moved off of this element.
onMouseOver :The mouse moved over this element.
onMouseUp: The mouse button was released.
onReset: A form reset button was pressed.
onResize: The window or frame was resized.
onSubmit: A form's Submit button has been pressed.
onUnload: User is navigating away from a page.