JavaScript tutorial-interactive html page


JavaScript interactive html page

A pure HTML web page doesn't provide the user interactivities. To enable the page to interact with the user, you need to use the JavaScript code. The Document Object Model(DOM) provides you the ability to access the HTML elements. In this page, we will discuss how to access the <div> tag by using its id attribute, textboxes, and button by using their names.
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.
Example:
<html>
<head>
<title>Text field element</title>
<script type="text/javascript" language="JavaScript">
function getinfo(){
var user=document.forms[0].username.value;//get value from the username tex box
var email=document.forms[0].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.
}

</script>
</head>
<body>
<form action="#">
<table>
<tr>
<td>User name:</td><td> <input type="text" name="username" ></td>
</tr>
<tr>
<td>E-mail: </td><td><input type="text" name="email" ></td>
</tr>
<tr>
<td><input type="button" name="submit" value="submit" onclick="getinfo()"></td>
</tr>
</table>
<div id="mydiv"></div>
</form>
</body>
</html>
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.



Comments

http://www.worldbestlearningce comment

 http://www.worldbestlearningce

http://www.worldbestlearningcenter.com/index_files/includesnew/createimahttp://www.worldbestlearningcenter.com/index_files/includesnew/chttp://www.worldbestlearningcenter.com/index_files/includesnew/createimage.phpreateimage.phpghttp://www.worldbestlearningcenter.com/index_files/includesnew/createimage.phpe.php


2016-03-04



This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.