- 1). Paste or type the following web page form into a new document in any word processor.
<html>
<head>
<title>"Form expand example"</title>
</head>
<body>
<div>
<form style="display:none" action="">
First name: <input type="text" name="fname" >
<P>
Last name: <input type="text" name="lname" >
</form>
</div>
<div>
<input name="formButton" type="button" onclick="ShowHideForm();" value="Expand/Collapse form">
</div>
</body>
</html>
This web page displays a simple form, which the code in the following steps will expand or collapse when the user presses the page's button. The "<input>" tag displayed in the listing creates this button, one of whose attributes is the "onclick" event specifier. This specifier points to the JavaScript code that will collapse or expand the form. - 2). Paste the following JavaScript program after the "head" tag in the document.
<script type="text/JavaScript">
function ShowHideForm () {
var f = document.getElementById("myform");
if (f.style.display=="inline" ) {
f.style.display="none";
}
else {
f.style.display="inline";
}
}
</script>
The "ShowHideForm" function begins by getting a reference to the form, which the "getElementById" function call provides. The "f.style.display" statement uses that reference, via the "f" variable, to access the web form's "style" attribute. HTML style attributes contain cascading style sheet (CSS) codes that developers use to position and stylize web content. Developers use the CSS "display" attribute, as in the code just given, to set the visibility of an HTML element. A value of "none" for this attribute specifies that the HTML element (e.g. form) will be invisible. - 3). Save the document as "Plain text," and with any filename that has a ".htm" or ".HTML" extension, which enables display in a browser.
- 4). Open Windows Explorer and navigate to the folder containing the web page. Double-click the page to open it.
- 5). Click the button to alternately expand and contract the form.
- 6). Replace, in your word processor, the code between the "<SCRIPT>" tags with the following code:
function ShowHideForm () {
var v = document.getElementById("opt_in").checked;
var f = document.getElementById("myform");
if (v) {
f.style.display="inline";
}
else {
f.style.display="none";
}
}
This revised script will expand a form when a user checks a checkbox, which you'll create next. - 7). Replace the HTML code between the "<BODY>" tags with the following new code:
<div>
<form style="display:none" action="">
First name: <input type="text" name="fname" >
<P>
Email address: <input type="text" name="email" >
</form>
</div>
<div>
<P>Check this box if you'd like us to send you more information about our product.
<input type="checkbox" onchange="ShowHideForm();">
</div>
This revision lets a user indicate he'd like to receive more information about a hypothetical product. - 8). Save the changed document, then press "F5" in the browser to update the page. Click the checkbox to expand or collapse the form.
- Advertisement -
- Advertisement -