JavaScript Tutorial/Form/Reset — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 08:24, 26 мая 2010
Содержание
Reset
The Reset object represents a Reset button within an HTML form.
The button is created using the HTML <input> tag and specifying the TYPE attribute as reset.
Reset buttons are used for form submissions.
Property/Method Description blur() Removes focus from Reset button click() Simulates a mouse click on a Reset button focus() Sets the focus to the Reset button form Specifies the form name that contains the Reset button handleEvent() Invokes the event handler name HTML NAME attribute for the Reset button onBlur Event handler for Blur event onClick Event handler for Click event onFocus Event handler for Focus event type HTML TYPE attribute for the Reset button value HTML VALUE attribute for the Reset button
<html>
<head>
<title> Example of the reset object</title>
</head>
<body>
<form name="form1">
Click the Reset button to reset the form.
<br><br><br>
Enter Name: <input type="text" Name="name" Size=15>
<br>
Enter Phone: <input type="text" Name="phone" Size=10>
<br><br>
<input type="reset" name=resetbutton value=Reset>
<br>
<br>
</form>
</body>
</html>
Reset.blur()
The blur() method removes the focus from the Reset button.
<html>
<head>
<title> Example of the reset blur method</title>
</head>
<body>
<script language="JavaScript">
<!--
function showMsg(){
alert("Focus removed from the Reset button.");
}
-->
</script>
<form name="form1">
Enter Name: <input type="text" Name="name" Size=15>
<br>
Enter Phone: <input type="text" Name="phone" Size=10>
<br>
<input type="reset" name=resetbutton value=Reset onBlur="showMsg()">
<br>
<br>
</form>
</body>
</html>
Reset.click()
The click method simulates a mouse click on the Reset button.
<html>
<head>
<title> Example of the reset click method</title>
</head>
<body>
<script language="JavaScript">
<!--
function clickReset(){
document.form1.resetbutton.click();
}
function inform(){
alert("The reset button was clicked");
}
-->
</script>
<form name="form1">
Enter Name: <input type="text" Name="name" Size=15>
<br>
Enter Phone: <input type="text" Name="phone" Size=10>
<br><br>
<input type="reset" name=resetbutton value=Reset onClick="inform()">
<br>
<br>
<input type="button" value="Simulate Click" onClick="clickReset()">
</form>
</body>
</html>
Reset.focus()
The focus() method sets the focus to the Reset button.
<html>
<head>
<title> Example of the reset focus method</title>
</head>
<body>
<script language="JavaScript">
<!--
function focusReset(){
document.form1.resetbutton.focus();
}
-->
</script>
<form name="form1">
Enter Name: <input type="text" Name="name" Size=15>
<br>
Enter Phone: <input type="text" Name="phone" Size=10>
<br><br>
<input type="reset" name=resetbutton value=Reset>
<br>
<br>
<input type="button" value="Set Focus to Reset" onClick="focusReset()">
<br>
</form>
</body>
</html>
Reset.form
The form property obtains the name of the form that contains the Reset button.
<html>
<head>
<title> Example of the reset form property</title>
</head>
<body>
<form name="form1">
Enter Name: <input type="text" Name="name" Size=15>
<br>
Enter Phone: <input type="text" Name="phone" Size=10>
<br><br>
<input type="reset" name=resetbutton value=Reset
onClick="alert("The form name is: " + document.form1.resetbutton.form.name)">
<br>
<br>
</form>
</body>
</html>
Reset.handleEvent()
Syntax
reset.handleEvent(event)
Reset.name
The name property represents the name given to a Reset button as specified from the NAME attribute of the HTML <input type="reset"> tag.
<html>
<head>
<title> Example of the reset name property</title>
</head>
<body>
<form name="form1">
Enter Name: <input type="text" Name="name" Size=15>
<br>
Enter Phone: <input type="text" Name="phone" Size=10>
<br><br>
<input type="reset" name=resetbutton value=Reset
onClick="alert("The reset button name is: " + ?document.form1.resetbutton.name)">
<br>
<br>
</form>
</body>
</html>
Reset.onBlur
The onBlur event handler is an event handler that specifies when the focus has been removed from the Reset button.
<html>
<head>
<title> Example of the reset onBlur event handler</title>
</head>
<body>
<script language="JavaScript">
<!--
function setMsg(){
alert("Focus was removed from the reset object");
}
-->
</script>
<form name="form1">
Click the reset button and then click in a text area.
<br><br>
Enter Name: <input type="text" Name="name" Size=15>
<br>
Enter Phone: <input type="text" Name="phone" Size=10>
<input type="reset" name=resetbutton value=Reset onBlur="setMsg()">
<br>
</form>
</body>
</html>
Reset.onClick
The onClick property is an event handler used to handle the event of a mouse click on the Reset button.
<html>
<head>
<title> Example of the reset onClick event handler</title>
</head>
<body>
<form name="form1">
Enter Name: <input type="text" Name="name" Size=15>
<br>
Enter Phone: <input type="text" Name="phone" Size=10>
<br><br>
<input type="reset" name=resetbutton value=Reset
onClick="alert("The reset button was clicked")">
<br>
<br>
</form>
</body>
</html>
Reset.onFocus
The onFocus event handler is used to specify when the focus is set on the Reset button.
<html>
<head>
<title> Example of the reset onFocus event handler</title>
</head>
<body>
<script language="JavaScript">
<!--
function setMsg(){
alert("Focus is set on the reset button.");
}
-->
</script>
<form name="form1">
Click the reset button.
<br><br>
Enter Name: <input type="text" Name="name" Size=15>
<br>
Enter Phone: <input type="text" Name="phone" Size=10>
<br><br>
<input type="reset" name=resetbutton value=Reset onFocus="setMsg()">
<br>
</form>
</body>
</html>
Resetting a form on page load
<html>
<head>
<title>Resetting a form on page load</title>
<script type="text/javascript" language="javascript">
<!-- //
function ClearForm(){
document.MyForm.reset();
}
// -->
</script>
</head>
<body onload="ClearForm()">
<table>
<form name="MyForm" action="http://www.wbex.ru/" method="Post">
<tr>
<td width="15%" align="right">First Name: </td>
<td> <input type="text" name="FirstName"/></td>
</tr>
<tr>
<td align="right">Last Name: </td>
<td> <input type="text" name="LastName"/></td>
</tr>
<tr>
<td align=""right">User Number: </td>
<td> <input type="text" name="UserNo"/></td>
</tr>
<tr>
<td> </td>
<td> <input type="submit" value="Submit Form"/></td>
</tr>
</table>
</form>
</body>
</html>
Reset.type
The type property represents the HTML TYPE attribute of the Reset button.
In the case of a Reset button, this will always be reset.
<html>
<head>
<title> Example of the reset type property</title>
</head>
<body>
<form name="form1">
Enter Name: <input type="text" Name="name" Size=15>
<br>
Enter Phone: <input type="text" Name="phone" Size=10>
<br><br>
<input type="reset" name=resetbutton value=Reset
onClick="alert("The button type is: " + document.form1.resetbutton.type)">
<br>
<br>
</form>
</body>
</html>
Reset.value
The value property represents the HTML VALUE attribute of the Reset button.
<html>
<head>
<title> Example of the reset value property</title>
</head>
<body>
<form name="form1">
Enter Name: <input type="text" Name="name" Size=15>
<br>
Enter Phone: <input type="text" Name="phone" Size=10>
<br><br>
<input type="reset" name=resetbutton value=Reset
onClick="alert("The button value is: " + document.form1.resetbutton.value)">
<br>
<br>
</form>
</body>
</html>