<form>

Username<br>
<input type="text" name="username" required> <br>
Password <br>
<input type="password" name="password" required> <br>
<button type="submit">Login</button>
</form>

The `<input>` tag in HTML can take various attributes depending on the type of input and
the desired behaviour. Here are some common attributes used with the `<input>` tag:

1. type:
- Specifies the type of input. For example, `text` for plain text, `password` for password
input, `checkbox` for checkboxes, `radio` for radio buttons, etc.

```html
<input type="text">
```

2. name:
- Provides a name for the input field. This name is used when submitting the form, and it's
essential for identifying the data on the server.

```html
<input type="text" name="username">

3. placeholder:
- Displays a short hint that describes the expected value of the input field. It is typically
used for providing an example or guidance to the user.

```html
<input type="text" name="username" placeholder="Enter your username">
4. required:
- Indicates that the input field must be filled out before submitting the form.

```html
<input type="text" name="username" required>
```

`ng-submit` is an AngularJS directive used in HTML forms to specify the behaviour that
should occur when the form is submitted. It is primarily used to bind a function or expression
defined in the AngularJS controller to the form submission event.

Explanation of `ng-submit`:

Purpose:
- Form Submission Handling: `ng-submit` is designed to handle the form submission event in
AngularJS applications.

Syntax:
```html
<form ng-submit="expression">
<!-- Form elements go here -->
</form>
```

How it works:

Binding to Controller Function:

- The value of `ng-submit` is typically an AngularJS expression that refers to a function
defined in the AngularJS controller. This function will be executed when the form is
submitted.
 ```html
<form ng-submit="submitForm()">
<!-- Form elements go here -->
<button type="submit">Submit</button>
</form>
```

```javascript
if ($scope.username.toLowerCase() === 'viraj' && $scope.password === '123') {
alert('Login successful');
// Add further logic for successful login
}
```

Explanation:

1. `$scope` Object:
- In AngularJS, the `$scope` object is a special object that acts as a bridge between the
controller and the view. It allows data binding, meaning changes in the model (data) are
immediately reflected in the view, and vice versa.

2. `$scope.username` and `$scope.password`:

- `$scope.username` and `$scope.password` represent the values entered by the user in the
username and password fields, respectively. These values are typically bound to the
corresponding input fields in the HTML using AngularJS's two-way data binding.

3. `toLowerCase()`:
- The `toLowerCase()` method is used on `$scope.username`. This method converts the
string to lowercase. In this context, it ensures a case-insensitive comparison when checking if
the entered username is 'viraj'. Without `toLowerCase()`, the comparison would be case-
sensitive.
 ```javascript
$scope.username.toLowerCase() === 'viraj'
```

4. `$scope.password === '123'`:

- This part of the condition checks if the entered password (`$scope.password`) is equal to
the string '123'.

```javascript
$scope.password === '123'
```

5. Condition:
- The `if` statement checks if both conditions are true. If the entered username is 'viraj'
(case-insensitive) and the password is '123', then the condition evaluates to true.

```javascript
if ($scope.username.toLowerCase() === 'viraj' && $scope.password === '123')
```

6. Alert for Successful Login:

- If the condition is true, meaning the entered username and password match the expected
values, an `alert` is displayed with the message 'Login successful'.

```javascript
alert('Login successful');
```

7. Further Logic for Successful Login:

- The comment `// Add further logic for successful login` indicates a placeholder for
additional logic that you may want to execute upon a successful login. This could include
actions like redirecting to another page, updating user state, fetching additional user
information, or setting authentication tokens.
--------------------ALERT()-------------------------------------
The `alert` function is a built-in JavaScript function that displays a dialog box with a
specified message and an OK button. It is a simple way to provide information to the user or
prompt for some action. The `alert` function is often used for debugging purposes or for
displaying important messages to users.

Here's the basic syntax of the `alert` function:

```javascript
alert(message);
```

- `message`: The text you want to display in the alert box.

In the context of the provided code snippet:

```javascript
if ($scope.username.toLowerCase() === 'viraj' && $scope.password === '123') {
alert('Login successful');
// Add further logic for successful login
} else {
alert('Login failed. Invalid username or password.');
// Add logic for failed login
}
```

- If the condition (successful login) is met, an alert box with the message `'Login successful'`
will be displayed.
- If the condition is not met (failed login), an alert box with the message `'Login failed.
Invalid username or password.'` will be displayed.
In a real-world application, you might use more sophisticated methods to communicate with
the user, such as updating the UI dynamically, displaying error messages on the page, or
redirecting to different pages. The `alert` function, however, provides a quick and simple way
to show messages in a pop-up dialog.

1. `$scope.login = function () { ... }`:

- In AngularJS, the `$scope` object is used to establish a communication bridge between the
controller and the view.
- `login` here is a property attached to the `$scope` object.
- `function () { ... }` is an anonymous function assigned to `$scope.login`. This function
serves as the logic to be executed when the login action is triggered.

```javascript
$scope.login = function () {
// Login logic goes here
};
```

2. `ng-submit="login()"`:
- In the associated HTML form, the `ng-submit` directive is used to bind a function to the
form submission event.
- `ng-submit="login()"` specifies that when the form is submitted, the function referred to
as `login` on the `$scope` object should be executed.

```html
<form ng-submit="login()">
<!-- Form elements go here -->
</form>
```

3. Connection between `$scope.login` and `ng-submit="login()"`:

 - When the form is submitted, AngularJS looks for the `ng-submit` directive and finds
`login()`.
- AngularJS then looks for `login` on the `$scope` object and finds the function assigned
earlier (`$scope.login = function () { ... }`).
- The function `$scope.login` is executed when the form is submitted.

Therefore, `ng-submit="login()"` essentially triggers the function assigned to

`$scope.login`.

Putting it all together:

- `$scope.login` is a function defined in the controller.

- `ng-submit="login()"` associates the form submission with the execution of `$scope.login`.
- The logic inside `$scope.login` is executed when the form is submitted.

This approach allows you to encapsulate login-related logic within the controller and trigger
it seamlessly from the view when needed.

-----------------------example -----------------------------------------------------------------------
Relation between $scope.login = function () & ng-submit="login ()"

1. `$scope.login = function () { ... }`:

- Think of `$scope` like a backpack that the controller carries. This backpack can hold
various things, like functions or pieces of data.
- Inside this backpack, we have a special pocket called `login`. And inside that pocket,
we've put a set of instructions written in a language the computer understands. We call this
set of instructions a "function."
- So, `$scope.login` is like a function stored in the backpack that we can use later.

```javascript
$scope.login = function () {
// Set of instructions for logging in
};
 ```

2. `ng-submit="login()"`:
- Imagine you have a magic button on a form. When you press this button, you want
something special to happen, like logging in.
- `ng-submit` is like a spell you put on this magic button. You tell the button, "Hey, when
someone presses you, perform the magic associated with the `login` function from our
backpack."

```html
<form ng-submit="login()">
<!-- Form elements go here -->
</form>
```

3. Connection between `$scope.login` and `ng-submit="login()"`:

- So, when someone fills out the form and clicks the submit button (the magic button), the
spell `ng-submit="login()"` is cast.
- This spell, in turn, opens the backpack, finds the `login` pocket, and follows the
instructions inside (executes the function).

Therefore, the form submission is like saying, "Hey magic button, cast the spell to execute
the login instructions from the backpack!"