Forms and Form Events
JavaScript allows you to make your HTML pages more interactive and smarter by providing a decision making capabilities. JavaScript is used to enhance your forms.
The CGI (Common Gateway Interface) is a way to safely transfer data from client to server. It is used to transfer users data from browser to requested server. JavaScript is used to process forms without requesting a server. When user wants to submit data to server, user needs to submit form to CGI program. Before submitting form to server JavaScript takes all precautions such as read and set contents, form controls, form events, validation of data, invoking of an objects etc...
Form
A simple HTML form is way different than a JavaScript enhanced form. The JavaScript form is always relies on one or more events and event handlers. These event handlers calls JavaScript actions when user interact with the form for example moving a mouse over form or any component, clicking on any button etc.
Form Controls
Following are some form controls used to design HTML form and make it interactive by implementing the event handlers using JavaScript.
1. Textbox
2. Button (Push Button)
3. Radio Button
4. Checkbox
5. Hidden Textbox
6. List
7. TextArea
From Attributes or Properties
Following are some attributes and properties of a form
1. Form Name
2. Action
3. Method
above properties are mostly used to define a form, name attribute is used to define name of the form, you can refer this form anywhere in JavaScript by using its name. For giving name to a form naming standards should be followed
- no space between the name
- no special characters except underscore (_)
- name should not start with with digit, you can include digit in between the name
Action defines the process, how you wants to handle browser after submitting the form to server.
Method defines the method of transferring the data to the server, if method attribute is blank the data could not be transferred to server. There are two types of methods GET and POST.
Example:
<html>
<body>
<form name= " form_name " action = " " method = "GET">
</form>
</body>
</html>
above HTML code defines a form with name "form_name" and method used is a "GET" method.
Controls of Form
1. Input:
This control is used to define objects or components of type input, which will accept input from the user. User will be able to perform any action or will be able to interact with those input controls. Input controls are as follows:
Button:
Button input control will add Push Button on a form where user can click or push the button to perform action or to call any JavaScript function.
Syntax:
<input type="button" name=" " id=" " value="name_of_the_button" onClick=" ">
above is the syntax used to create push button on HTML document or form
Textbox / Inputfield:
Textbox input control adds textfield on a form where user can enter text input. This is also called as single line entry field. These fields are useful to accept various information from user.
Syntax:
<input type="text" name=" " id=" " value=" " onClick=" ">
above is the syntax used to create textfield or textbox on HTML document or form
Comments
Post a Comment