The Button Objects(Submit,Reset and Button)
Because graphical operating environments became dominant over the past decade, the push button is perhaps the most ubiquitous of all user interface components. HTML has three types of buttons you can use in your forms: button,submit, and reset. As you can see, two are specialized forms of the more generic button object. Using conventional HTML syntax, a button is defined as
<input type="button|submit|reset" [NAME="objectName"] [VALUE="labelText"] [onClick="methodName"]>
The three button types have different purposes:
Submit- The submit button submits the form in which it is contained to the server based on the parameters of the form. No Javascript code is needed to perform this action because its behavior is built into the object itself.
Reset- The reset button clears the values in the fields of the current form, restoring any default values that might have been set. As with the submit button, no javascript code is used for this.
Button- The button object is a generic object with no predefined behavior built into it. In order for this object to do anything, you need to add an onClick event handler to the button.
If you are new to HTML , you might be asking about the reasons for the submit and reset buttons because you could use a button object to perform these same tasks. These originated before the days of javascript , where you could not use a generic button because you had no means of making it do anything. Additionally , although not all browsers support Javascript (and thus the button object), all modern browsers do support the reset and submit buttons. For compatibility reason, it is usually best to use the submit and reset button unless Javascript support is a requirement for accessing your page, and in that case, it would not matter.
Checkbox Object
The checkbox object is the form object that is best equipped to denote logical (true or false) data. It acts as a toggle switch that can be turned on or off either by the user or by your Javascript code. To define a checkbox, use the following HTML syntax:
<input type="checkbox" [NAME="objectName"] [VALUE="value"] [CHECKED] [onClick="methodName"]>[displayText]
For example , the following checkbox allows users to specify their foreign language proficiencies:
<input type=checkbox name="language">I Speak multiple languages.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Example for check box</h1>
<h2>Click on the checkbox and find the status</h2>
<br/>
<form name="form1">
<center>
server
<input type="checkbox" Name=svr onclick="
if(svr.checked)
{
alert('The status is true');
}
else{
alert('The status is false');
}
">
</center>
</form>
</body>
</html>
Output
Radio Object
A radio object has a one to many relationship with a set of <input type="radio"> elements within the HTML source code. Each element of a radio object is defined as
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio Button</title>
</head>
<body>
<h1>Example for Radio Button</h1>
<h2>Click on the radio button and know your gender</h2>
<hr>
<form name="form1">
<center>
Gender<br/>
Male
<input type="radio" name="r1" onclick="alert('You selected Male')">
Female
<input type="radio" name="r1" onclick="alert('You selected Female')">
<hr>
</center>
</form>
</body>
</html>
Output
Select Object
The select object is one of the most useful and flexible of all the form objects. You can use it in instances where you might otherwise use a radio object. The select object can take up less real estate than a radio object, which needs space for each of its radio buttons.
Password Object
As you can tell from its name, the password object has but a single purpose: to capture a pass-word value from a user. A password object is similar to a text object but displays any character the user types in the field as an asterisk(*). It can be defined in HTML syntax as
<input type="password" [NAME="objectName"] [VALUE="defaultPassword"] [SIZE=integer]>
The following line shows an example:
<input type="password" NAME="passwordField" SIZE=15>
Hidden Object
As one might infer from its name, a hidden object is invisible to the user. The hidden object is a hidden text field that you can use to store values that you do not want to present to the user with a normal text field.
<input type="hidden" name="objectName" [value="value"]>
The following line shows an example:
<input type="hidden" name="hiddenField1">
Events are not handled for password object and Hidden object
No comments:
Post a Comment