Forms and Form Events in java Script
JavaScript Forms and Form Controls – Complete Guide
JavaScript allows you to make HTML pages more interactive and intelligent by providing decision-making capabilities. It can be used to enhance HTML forms, validate user input, respond to user actions, and perform operations before data is submitted to a server.
📚 Table of Contents
1. Introduction to JavaScript Forms
A web form is used to collect information from users. Examples include login forms, registration forms, contact forms, search forms and feedback forms.
HTML provides the basic structure of a form, while JavaScript can make the form interactive by responding to user actions and validating data.
Before submitting information to a server, JavaScript can check whether the entered information is valid and can provide immediate feedback to the user.
2. CGI and Form Processing
CGI stands for Common Gateway Interface. It is a technology that can be used to allow a web server to communicate with programs that process information submitted by a client.
Traditionally, when a user submits an HTML form, the browser sends the form data to a server. The server can then process the submitted data.
JavaScript can perform many client-side tasks before the form is sent to the server. These tasks may include reading form controls, modifying values, validating data, and responding to form events.
3. HTML Form
A simple HTML form provides controls for collecting user information. A JavaScript-enhanced form can additionally respond to user actions using events and event handlers.
For example, JavaScript can perform an action when the user clicks a button, changes a value, submits a form, or interacts with another form control.
4. Forms, Events and Event Handlers
JavaScript forms commonly rely on events and event handlers.
An event represents an action that happens in the browser. An event handler is JavaScript code that responds to that action.
| Event | Description |
|---|---|
| click | Occurs when the user clicks an element. |
| input | Occurs when the value of an input changes. |
| change | Occurs when a control's value is changed and committed. |
| focus | Occurs when an element receives focus. |
| blur | Occurs when an element loses focus. |
| submit | Occurs when a form is submitted. |
Example of an Event Handler
<button onclick="showMessage()">
Click Me
</button>
<script>
function showMessage() {
alert("Button clicked!");
}
</script>5. Form Controls
HTML provides several controls that can be used to collect information from users.
| Control | Purpose |
|---|---|
| Textbox | Accepts single-line text. |
| Button | Allows the user to perform an action. |
| Radio Button | Allows the user to select one option from a group. |
| Checkbox | Allows one or more options to be selected. |
| Hidden Input | Stores data that is not displayed as a normal input field. |
| Select/List | Allows the user to select an option from a list. |
| Textarea | Accepts multiple lines of text. |
6. Form Attributes and Properties
Some important attributes commonly used with the HTML
<form> element are:
| Attribute | Purpose |
|---|---|
| name | Provides a name for the form. |
| action | Specifies where the form data should be submitted. |
| method | Specifies how the form data is submitted. |
Form Name
The name attribute identifies a form. In modern JavaScript,
forms can also be accessed using the DOM and their
id attribute.
When choosing names, it is good practice to use meaningful names without spaces and to follow valid identifier conventions when the name will also be used as a JavaScript identifier.
Action
The action attribute specifies the URL or destination to
which the form data is submitted.
<form action="/submit-form">
</form>Method
The method attribute determines how form data is sent to
the server.
The two commonly used methods are GET and POST.
| Method | Common Use |
|---|---|
| GET | Retrieving data or submitting non-sensitive query parameters. |
| POST | Sending data in the request body, commonly for creating or updating data. |
7. Basic Form Example
The following example creates a basic HTML form with a name, action and method.
<form name="form_name"
action="/submit"
method="GET">
</form>
In this example, the form has the name
form_name, submits data to
/submit, and uses the GET method.
8. Input Control
The <input> element is one of the most commonly used
form controls in HTML.
The type of input control is determined by the
type attribute.
<input type="text">Depending on its type, an input element can be used for text, passwords, numbers, dates, checkboxes, radio buttons and many other purposes.
9. Button Control
A button input control creates a push button that the user can click to perform an action.
Syntax
<input
type="button"
name="myButton"
id="myButton"
value="Click Me"
onclick="showMessage()">Complete Example
<form>
<input
type="button"
value="Click Me"
onclick="showMessage()">
</form>
<script>
function showMessage() {
alert("Button was clicked!");
}
</script><button> element is often more flexible than
<input type="button">.
Using the button Element
<button type="button" onclick="showMessage()">
Click Me
</button>10. Textbox / Input Field
A textbox is a single-line input field that allows the user to enter text. It is commonly used to collect information such as names, usernames, cities and other short text values.
Syntax
<input
type="text"
name="username"
id="username"
value=""
onclick="myFunction()">Example
<form>
<label for="username">
Enter Your Name:
</label>
<input
type="text"
name="username"
id="username">
</form>Reading Textbox Value Using JavaScript
<input
type="text"
id="username"
placeholder="Enter your name">
<button type="button" onclick="getName()">
Submit
</button>
<script>
function getName() {
let name = document.getElementById("username").value;
alert("Hello " + name);
}
</script>Textbox with Validation
JavaScript can be used to check whether a textbox contains a value before continuing with an operation.
<input
type="text"
id="username"
placeholder="Enter your name">
<button type="button" onclick="validateName()">
Submit
</button>
<script>
function validateName() {
let name =
document.getElementById("username").value.trim();
if (name === "") {
alert("Please enter your name.");
} else {
alert("Welcome " + name);
}
}
</script>11. Quick Revision
| Topic | Description |
|---|---|
| Form | Used to collect information from users. |
| Action | Specifies where form data is submitted. |
| Method | Specifies how form data is submitted. |
| GET | Sends form data as part of the request URL. |
| POST | Sends form data in the request body. |
| Input | Creates different types of user input controls. |
| Textbox | Accepts single-line text. |
| Button | Allows the user to trigger an action. |
| Event | Represents an action occurring in the browser. |
| Event Handler | JavaScript code that responds to an event. |
| Validation | Checks whether user input meets required conditions. |
Comments
Post a Comment