<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "34f2dea4df4e8d38586a5179215c8a84",
  "translation_date": "2025-10-20T22:05:42+00:00",
  "source_file": "7-bank-project/2-forms/README.md",
  "language_code": "pa"
}
-->
# ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 2: ਲੌਗਇਨ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਬਣਾਓ

## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼

[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/43)

### ਤਾਰਫ਼

ਲਗਭਗ ਸਾਰੇ ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਸ ਵਿੱਚ, ਤੁਸੀਂ ਆਪਣਾ ਖਾਤਾ ਬਣਾਕੇ ਆਪਣੀ ਨਿੱਜੀ ਜਗ੍ਹਾ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ। ਕਈ ਵਰਤੋਂਕਾਰ ਇੱਕ ਸਮੇਂ ਵੈੱਬ ਐਪਸ ਨੂੰ ਐਕਸੈਸ ਕਰ ਸਕਦੇ ਹਨ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਹਰ ਵਰਤੋਂਕਾਰ ਦਾ ਨਿੱਜੀ ਡਾਟਾ ਵੱਖ-ਵੱਖ ਸਟੋਰ ਕਰਨ ਅਤੇ ਦਿਖਾਈ ਜਾਣ ਵਾਲੀ ਜਾਣਕਾਰੀ ਚੁਣਨ ਲਈ ਇੱਕ ਮਕੈਨਿਜ਼ਮ ਦੀ ਲੋੜ ਹੈ। ਅਸੀਂ [ਵਰਤੋਂਕਾਰ ਦੀ ਪਛਾਣ ਨੂੰ ਸੁਰੱਖਿਅਤ ਤਰੀਕੇ ਨਾਲ](https://en.wikipedia.org/wiki/Authentication) ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਬਾਰੇ ਨਹੀਂ ਕਵਰ ਕਰਾਂਗੇ ਕਿਉਂਕਿ ਇਹ ਆਪਣੇ ਆਪ ਵਿੱਚ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਵਿਸ਼ਾ ਹੈ, ਪਰ ਅਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾਵਾਂਗੇ ਕਿ ਹਰ ਵਰਤੋਂਕਾਰ ਸਾਡੀ ਐਪ 'ਤੇ ਇੱਕ (ਜਾਂ ਵੱਧ) ਬੈਂਕ ਖਾਤਾ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋਵੇ।

ਇਸ ਭਾਗ ਵਿੱਚ ਅਸੀਂ ਆਪਣੇ ਵੈੱਬ ਐਪ ਵਿੱਚ ਲੌਗਇਨ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰਨ ਲਈ HTML ਫਾਰਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ। ਅਸੀਂ ਵੇਖਾਂਗੇ ਕਿ ਡਾਟਾ ਨੂੰ ਸਰਵਰ API 'ਤੇ ਪ੍ਰੋਗਰਾਮਿੰਗ ਤਰੀਕੇ ਨਾਲ ਕਿਵੇਂ ਭੇਜਣਾ ਹੈ, ਅਤੇ ਆਖਰਕਾਰ ਵਰਤੋਂਕਾਰ ਦੀਆਂ ਇਨਪੁੱਟਾਂ ਲਈ ਮੂਲ ਵੈਧਤਾ ਦੇ ਨਿਯਮਾਂ ਨੂੰ ਕਿਵੇਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ ਹੈ।

### ਪੂਰਵ ਸ਼ਰਤ

ਤੁਹਾਨੂੰ ਇਸ ਪਾਠ ਲਈ ਵੈੱਬ ਐਪ ਦੇ [HTML ਟੈਂਪਲੇਟ ਅਤੇ ਰੂਟਿੰਗ](../1-template-route/README.md) ਪੂਰੇ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਤੁਹਾਨੂੰ [Node.js](https://nodejs.org) ਇੰਸਟਾਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਅਤੇ [ਸਰਵਰ API ਚਲਾਓ](../api/README.md) ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਤਾਂ ਜੋ ਤੁਸੀਂ ਖਾਤੇ ਬਣਾਉਣ ਲਈ ਡਾਟਾ ਭੇਜ ਸਕੋ।

**ਨੋਟ ਕਰੋ**
ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਦੋ ਟਰਮੀਨਲ ਚੱਲ ਰਹੇ ਹੋਣਗੇ ਜਿਵੇਂ ਕਿ ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਹੈ।
1. ਮੁੱਖ ਬੈਂਕ ਐਪ ਲਈ ਜੋ ਅਸੀਂ [HTML ਟੈਂਪਲੇਟ ਅਤੇ ਰੂਟਿੰਗ](../1-template-route/README.md) ਪਾਠ ਵਿੱਚ ਬਣਾਇਆ ਸੀ।
2. [ਬੈਂਕ ਐਪ ਸਰਵਰ API](../api/README.md) ਲਈ ਜੋ ਅਸੀਂ ਉੱਪਰ ਸੈਟਅੱਪ ਕੀਤਾ।

ਪਾਠ ਦੇ ਬਾਕੀ ਹਿੱਸੇ ਦੇ ਨਾਲ ਅੱਗੇ ਵਧਣ ਲਈ ਤੁਹਾਨੂੰ ਦੋਵੇਂ ਸਰਵਰ ਚੱਲ ਰਹੇ ਹੋਣ ਦੀ ਲੋੜ ਹੈ। ਇਹ ਵੱਖ-ਵੱਖ ਪੋਰਟਾਂ (ਪੋਰਟ `3000` ਅਤੇ ਪੋਰਟ `5000`) 'ਤੇ ਸੁਣ ਰਹੇ ਹਨ ਇਸ ਲਈ ਸਭ ਕੁਝ ਬਿਲਕੁਲ ਠੀਕ ਕੰਮ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।

ਤੁਹਾਨੂੰ ਇਹ ਜਾਂਚਣ ਲਈ ਕਿ ਸਰਵਰ ਠੀਕ ਤਰੀਕੇ ਨਾਲ ਚੱਲ ਰਿਹਾ ਹੈ, ਟਰਮੀਨਲ ਵਿੱਚ ਇਹ ਕਮਾਂਡ ਚਲਾਉਣੀ ਚਾਹੀਦੀ ਹੈ:

```sh
curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result
```

---

## ਫਾਰਮ ਅਤੇ ਕੰਟਰੋਲ

`<form>` ਤੱਤ HTML ਦਸਤਾਵੇਜ਼ ਦੇ ਇੱਕ ਸੈਕਸ਼ਨ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜਿੱਥੇ ਵਰਤੋਂਕਾਰ ਇਨਪੁੱਟ ਅਤੇ ਇੰਟਰੈਕਟਿਵ ਕੰਟਰੋਲ ਨਾਲ ਡਾਟਾ ਸਬਮਿਟ ਕਰ ਸਕਦਾ ਹੈ। ਫਾਰਮ ਵਿੱਚ ਵਰਤੋਂ ਲਈ ਹਰ ਕਿਸਮ ਦੇ ਵਰਤੋਂਕਾਰ ਇੰਟਰਫੇਸ (UI) ਕੰਟਰੋਲ ਹਨ, ਸਭ ਤੋਂ ਆਮ `<input>` ਅਤੇ `<button>` ਤੱਤ ਹਨ।

`<input>` ਦੇ ਕਈ [ਕਿਸਮਾਂ](https://developer.mozilla.org/docs/Web/HTML/Element/input) ਹੁੰਦੀਆਂ ਹਨ, ਉਦਾਹਰਣ ਲਈ ਜਿੱਥੇ ਵਰਤੋਂਕਾਰ ਆਪਣਾ ਯੂਜ਼ਰਨੇਮ ਦਰਜ ਕਰ ਸਕਦਾ ਹੈ:

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

`name` ਐਟਰੀਬਿਊਟ ਨੂੰ ਜਦੋਂ ਫਾਰਮ ਡਾਟਾ ਭੇਜਿਆ ਜਾਵੇਗਾ ਤਾਂ ਇਸਨੂੰ ਪ੍ਰਾਪਰਟੀ ਨਾਮ ਵਜੋਂ ਵਰਤਿਆ ਜਾਵੇਗਾ। `id` ਐਟਰੀਬਿਊਟ ਨੂੰ `<label>` ਨੂੰ ਫਾਰਮ ਕੰਟਰੋਲ ਨਾਲ ਜੋੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।

> [`<input>` ਦੀਆਂ ਕਿਸਮਾਂ](https://developer.mozilla.org/docs/Web/HTML/Element/input) ਅਤੇ [ਹੋਰ ਫਾਰਮ ਕੰਟਰੋਲ](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) ਦੀ ਪੂਰੀ ਸੂਚੀ 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੋ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੇ UI ਬਣਾਉਣ ਸਮੇਂ ਵਰਤਣ ਲਈ ਸਾਰੇ ਮੂਲ UI ਤੱਤਾਂ ਦਾ ਪਤਾ ਲੱਗੇ।

✅ ਨੋਟ ਕਰੋ ਕਿ `<input>` ਇੱਕ [ਖਾਲੀ ਤੱਤ](https://developer.mozilla.org/docs/Glossary/Empty_element) ਹੈ ਜਿਸ 'ਤੇ ਤੁਹਾਨੂੰ *ਬੰਦ ਕਰਨ ਵਾਲਾ ਟੈਗ* ਨਹੀਂ ਜੋੜਨਾ ਚਾਹੀਦਾ। ਹਾਲਾਂਕਿ ਤੁਸੀਂ ਸਵੈ-ਬੰਦ `<input/>` ਨੋਟੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਪਰ ਇਹ ਲਾਜ਼ਮੀ ਨਹੀਂ ਹੈ।

ਫਾਰਮ ਵਿੱਚ `<button>` ਤੱਤ ਕੁਝ ਵਿਸ਼ੇਸ਼ ਹੁੰਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ ਇਸਦਾ `type` ਐਟਰੀਬਿਊਟ ਨਿਰਧਾਰਤ ਨਹੀਂ ਕਰਦੇ, ਤਾਂ ਜਦੋਂ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਇਹ ਆਪਣੇ ਆਪ ਫਾਰਮ ਡਾਟਾ ਨੂੰ ਸਰਵਰ 'ਤੇ ਸਬਮਿਟ ਕਰ ਦੇਵੇਗਾ। ਇੱਥੇ ਸੰਭਾਵਿਤ `type` ਮੁੱਲ ਹਨ:

- `submit`: ਫਾਰਮ ਦੇ ਅੰਦਰ ਡਿਫਾਲਟ, ਬਟਨ ਫਾਰਮ ਸਬਮਿਟ ਕਾਰਵਾਈ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ।
- `reset`: ਬਟਨ ਸਾਰੇ ਫਾਰਮ ਕੰਟਰੋਲ ਨੂੰ ਉਨ੍ਹਾਂ ਦੇ ਸ਼ੁਰੂਆਤੀ ਮੁੱਲਾਂ 'ਤੇ ਰੀਸੈਟ ਕਰਦਾ ਹੈ।
- `button`: ਜਦੋਂ ਬਟਨ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਡਿਫਾਲਟ ਵਿਹਾਰ ਨਹੀਂ ਸੌਂਪਦਾ। ਤੁਸੀਂ ਫਿਰ ਇਸ 'ਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਸਟਮ ਕਾਰਵਾਈਆਂ ਸੌਂਪ ਸਕਦੇ ਹੋ।

### ਕੰਮ

ਆਓ `login` ਟੈਂਪਲੇਟ ਵਿੱਚ ਇੱਕ ਫਾਰਮ ਸ਼ਾਮਲ ਕਰਕੇ ਸ਼ੁਰੂ ਕਰੀਏ। ਸਾਨੂੰ ਇੱਕ *ਯੂਜ਼ਰਨੇਮ* ਫੀਲਡ ਅਤੇ ਇੱਕ *ਲੌਗਇਨ* ਬਟਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ।

```html
<template id="login">
  <h1>Bank App</h1>
  <section>
    <h2>Login</h2>
    <form id="loginForm">
      <label for="username">Username</label>
      <input id="username" name="user" type="text">
      <button>Login</button>
    </form>
  </section>
</template>
```

ਜੇ ਤੁਸੀਂ ਧਿਆਨ ਨਾਲ ਦੇਖੋ, ਤਾਂ ਤੁਸੀਂ ਨੋਟ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਅਸੀਂ ਇੱਥੇ ਇੱਕ `<label>` ਤੱਤ ਵੀ ਸ਼ਾਮਲ ਕੀਤਾ ਹੈ। `<label>` ਤੱਤਾਂ ਨੂੰ UI ਕੰਟਰੋਲਾਂ ਨੂੰ ਨਾਮ ਦੇਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਸਾਡਾ ਯੂਜ਼ਰਨੇਮ ਫੀਲਡ। ਫਾਰਮਾਂ ਦੀ ਪੜ੍ਹਨਯੋਗਤਾ ਲਈ ਲੇਬਲ ਮਹੱਤਵਪੂਰਨ ਹਨ, ਪਰ ਇਹ ਵਾਧੂ ਫਾਇਦੇ ਵੀ ਲੈ ਕੇ ਆਉਂਦੇ ਹਨ:

- ਇੱਕ ਲੇਬਲ ਨੂੰ ਫਾਰਮ ਕੰਟਰੋਲ ਨਾਲ ਜੋੜ ਕੇ, ਇਹ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ (ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ) ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਵਰਤੋਂਕਾਰਾਂ ਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਕਿ ਉਹਨਾਂ ਨੂੰ ਕਿਹੜਾ ਡਾਟਾ ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਉਮੀਦ ਹੈ।
- ਤੁਸੀਂ ਲੇਬਲ 'ਤੇ ਕਲਿਕ ਕਰਕੇ ਸਿੱਧੇ ਹੀ ਸੰਬੰਧਿਤ ਇਨਪੁੱਟ 'ਤੇ ਫੋਕਸ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਸ ਨਾਲ ਟਚ-ਸਕ੍ਰੀਨ ਅਧਾਰਿਤ ਡਿਵਾਈਸਾਂ 'ਤੇ ਪਹੁੰਚਣਾ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ।

> ਵੈੱਬ 'ਤੇ [ਪਹੁੰਚਯੋਗਤਾ](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) ਇੱਕ ਬਹੁਤ ਹੀ ਮਹੱਤਵਪੂਰਨ ਵਿਸ਼ਾ ਹੈ ਜਿਸਨੂੰ ਅਕਸਰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। [ਸੈਮਾਂਟਿਕ HTML ਤੱਤਾਂ](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) ਦੀ ਮਦਦ ਨਾਲ, ਜੇ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਦੀ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਪਹੁੰਚਯੋਗ ਸਮੱਗਰੀ ਬਣਾਉਣਾ ਮੁਸ਼ਕਲ ਨਹੀਂ ਹੈ। ਤੁਸੀਂ [ਪਹੁੰਚਯੋਗਤਾ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹ ਸਕਦੇ ਹੋ](https://developer.mozilla.org/docs/Web/Accessibility) ਤਾਂ ਜੋ ਆਮ ਗਲਤੀਆਂ ਤੋਂ ਬਚਿਆ ਜਾ ਸਕੇ ਅਤੇ ਇੱਕ ਜ਼ਿੰਮੇਵਾਰ ਡਿਵੈਲਪਰ ਬਣ ਸਕੋ।

ਹੁਣ ਅਸੀਂ ਪਹਿਲੇ ਫਾਰਮ ਦੇ ਹੇਠਾਂ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਲਈ ਦੂਜਾ ਫਾਰਮ ਸ਼ਾਮਲ ਕਰਾਂਗੇ:

```html
<hr/>
<h2>Register</h2>
<form id="registerForm">
  <label for="user">Username</label>
  <input id="user" name="user" type="text">
  <label for="currency">Currency</label>
  <input id="currency" name="currency" type="text" value="$">
  <label for="description">Description</label>
  <input id="description" name="description" type="text">
  <label for="balance">Current balance</label>
  <input id="balance" name="balance" type="number" value="0">
  <button>Register</button>
</form>
```

`value` ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਸੀਂ ਦਿੱਤੇ ਗਏ ਇਨਪੁੱਟ ਲਈ ਡਿਫਾਲਟ ਮੁੱਲ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹਾਂ। ਧਿਆਨ ਦਿਓ ਕਿ `balance` ਲਈ ਇਨਪੁੱਟ ਵਿੱਚ `number` ਕਿਸਮ ਹੈ। ਕੀ ਇਹ ਹੋਰ ਇਨਪੁੱਟਾਂ ਤੋਂ ਵੱਖਰਾ ਲੱਗਦਾ ਹੈ? ਇਸ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।

✅ ਕੀ ਤੁਸੀਂ ਸਿਰਫ਼ ਕੀਬੋਰਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਫਾਰਮਾਂ 'ਤੇ ਨੈਵੀਗੇਟ ਅਤੇ ਇੰਟਰੈਕਟ ਕਰ ਸਕਦੇ ਹੋ? ਤੁਸੀਂ ਇਹ ਕਿਵੇਂ ਕਰਦੇ ਹੋ?

## ਡਾਟਾ ਨੂੰ ਸਰਵਰ 'ਤੇ ਸਬਮਿਟ ਕਰਨਾ

ਹੁਣ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਇੱਕ ਫੰਕਸ਼ਨਲ UI ਹੈ, ਅਗਲਾ ਕਦਮ ਡਾਟਾ ਨੂੰ ਸਾਡੇ ਸਰਵਰ 'ਤੇ ਭੇਜਣਾ ਹੈ। ਆਓ ਆਪਣੇ ਮੌਜੂਦਾ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਛੋਟਾ ਟੈਸਟ ਕਰੀਏ: ਕੀ ਹੁੰਦਾ ਹੈ ਜੇ ਤੁਸੀਂ *Login* ਜਾਂ *Register* ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰੋ?

ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ URL ਸੈਕਸ਼ਨ ਵਿੱਚ ਬਦਲਾਅ ਨੂੰ ਨੋਟ ਕੀਤਾ?

![ਰਜਿਸਟਰ ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰਨ ਤੋਂ ਬਾਅਦ ਬ੍ਰਾਊਜ਼ਰ ਦੇ URL ਬਦਲਾਅ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.pa.png)

`<form>` ਲਈ ਡਿਫਾਲਟ ਕਾਰਵਾਈ ਮੌਜੂਦਾ ਸਰਵਰ URL 'ਤੇ [GET ਮੈਥਡ](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਫਾਰਮ ਨੂੰ ਸਬਮਿਟ ਕਰਨਾ ਹੈ, ਫਾਰਮ ਡਾਟਾ ਨੂੰ ਸਿੱਧੇ URL 'ਤੇ ਜੋੜਨਾ। ਹਾਲਾਂਕਿ ਇਸ ਮੈਥਡ ਵਿੱਚ ਕੁਝ ਘਾਟ ਹਨ:

- ਭੇਜਿਆ ਗਿਆ ਡਾਟਾ ਆਕਾਰ ਵਿੱਚ ਬਹੁਤ ਸੀਮਿਤ ਹੈ (ਲਗਭਗ 2000 ਅੱਖਰ)
- ਡਾਟਾ ਸਿੱਧੇ URL ਵਿੱਚ ਦਿਖਾਈ ਦੇ ਰਿਹਾ ਹੈ (ਪਾਸਵਰਡ ਲਈ ਵਧੀਆ ਨਹੀਂ)
- ਇਹ ਫਾਈਲ ਅੱਪਲੋਡ ਦੇ ਨਾਲ ਕੰਮ ਨਹੀਂ ਕਰਦਾ

ਇਸ ਲਈ ਤੁਸੀਂ ਇਸਨੂੰ [POST ਮੈਥਡ](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਬਦਲ ਸਕਦੇ ਹੋ ਜੋ HTTP ਰਿਕਵੈਸਟ ਦੇ ਬਾਡੀ ਵਿੱਚ ਸਰਵਰ ਨੂੰ ਫਾਰਮ ਡਾਟਾ ਭੇਜਦਾ ਹੈ, ਬਿਨਾਂ ਪਿਛਲੇ ਸੀਮਾਵਾਂ ਦੇ।

> ਜਦੋਂ ਕਿ POST ਡਾਟਾ ਭੇਜਣ ਲਈ ਸਭ ਤੋਂ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਮੈਥਡ ਹੈ, [ਕੁਝ ਖਾਸ ਸਥਿਤੀਆਂ ਵਿੱਚ](https://www.w3.org/2001/tag/doc/whenToUseGet.html) GET ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਸੰਦ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਉਦਾਹਰਣ ਲਈ ਇੱਕ ਖੋਜ ਫੀਲਡ ਨੂੰ ਲਾਗੂ ਕਰਦੇ ਸਮੇਂ।

### ਕੰਮ

ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਵਿੱਚ `action` ਅਤੇ `method` ਗੁਣ ਸ਼ਾਮਲ ਕਰੋ:

```html
<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
```

ਹੁਣ ਆਪਣੇ ਨਾਮ ਨਾਲ ਇੱਕ ਨਵਾਂ ਖਾਤਾ ਰਜਿਸਟਰ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। *Register* ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰਨ ਤੋਂ ਬਾਅਦ ਤੁਹਾਨੂੰ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ:

![ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਜੋ localhost:5000/api/accounts ਪਤੇ 'ਤੇ ਹੈ, ਜਿਸ ਵਿੱਚ ਵਰਤੋਂਕਾਰ ਡਾਟਾ ਨਾਲ JSON ਸਟ੍ਰਿੰਗ ਦਿਖਾਈ ਦੇ ਰਹੀ ਹੈ](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.pa.png)

ਜੇ ਸਭ ਕੁਝ ਠੀਕ ਹੈ, ਤਾਂ ਸਰਵਰ ਤੁਹਾਡੇ ਰਿਕਵੈਸਟ ਦਾ ਜਵਾਬ [JSON](https://www.json.org/json-en.html) ਰਿਸਪਾਂਸ ਨਾਲ ਦੇਵੇਗਾ ਜਿਸ ਵਿੱਚ ਬਣਾਇਆ ਗਿਆ ਖਾਤਾ ਡਾਟਾ ਸ਼ਾਮਲ ਹੈ।

✅ ਇੱਕੋ ਨਾਮ ਨਾਲ ਮੁੜ ਰਜਿਸਟਰ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਕੀ ਹੁੰਦਾ ਹੈ?

## ਪੰਨਾ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਡਾਟਾ ਸਬਮਿਟ ਕਰਨਾ

ਜਿਵੇਂ ਤੁਸੀਂ ਸ਼ਾਇਦ ਨੋਟ ਕੀਤਾ ਹੋਵੇਗਾ, ਇਸ ਤਰੀਕੇ ਨਾਲ ਇੱਕ ਛੋਟਾ ਮੁੱਦਾ ਹੈ ਜੋ ਅਸੀਂ ਹੁਣੇ ਵਰਤਿਆ: ਜਦੋਂ ਫਾਰਮ ਸਬਮਿਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਸੀਂ ਆਪਣੀ ਐਪ ਤੋਂ ਬਾਹਰ ਨਿਕਲ ਜਾਂਦੇ ਹਾਂ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਸਰਵਰ URL 'ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਦੇ ਹਾਂ। ਅਸੀਂ ਆਪਣੀ ਵੈੱਬ ਐਪ ਨਾਲ ਸਾਰੇ ਪੰਨਾ ਰੀਲੋਡ ਤੋਂ ਬਚਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹਾਂ, ਕਿਉਂਕਿ ਅਸੀਂ ਇੱਕ [ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ (SPA)](https://en.wikipedia.org/wiki/Single-page_application) ਬਣਾ ਰਹੇ ਹਾਂ।

ਫਾਰਮ ਡਾਟਾ ਨੂੰ ਸਰਵਰ 'ਤੇ ਭੇਜਣ ਲਈ ਬਿਨਾਂ ਪੰਨਾ ਰੀਲੋਡ ਕਰਨ ਲਈ, ਸਾਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਵੇਗੀ। `<form>` ਤੱਤ ਦੇ `action` ਗੁਣ ਵਿੱਚ URL ਰੱਖਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਕੋਈ ਵੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਵਰਤ ਸਕਦੇ ਹੋ ਜੋ `javascript:` ਸਟ੍ਰਿੰਗ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਤਾਂ ਜੋ ਇੱਕ ਕਸਟਮ ਕਾਰਵਾਈ ਕੀਤੀ ਜਾ ਸਕੇ। ਇਸਦੀ ਵਰਤੋਂ ਕਰਨਾ ਇਹ ਵੀ ਮਤਲਬ ਰੱਖਦਾ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਕੁਝ ਕੰਮ ਲਾਗੂ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ ਜੋ ਪਹਿਲਾਂ ਬ੍ਰਾਊਜ਼ਰ ਦੁਆਰਾ ਆਪਣੇ ਆਪ ਕੀਤੇ ਜਾਂਦੇ ਸਨ:

- ਫਾਰਮ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰੋ
- ਫਾਰਮ ਡਾਟਾ ਨੂੰ ਇੱਕ ਉਚਿਤ ਫਾਰਮੈਟ ਵਿੱਚ ਤਬਦੀਲ ਅਤੇ ਐਨਕੋਡ ਕਰੋ
- HTTP ਰਿਕਵੈਸਟ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ ਸਰਵਰ 'ਤੇ ਭੇਜੋ

### ਕੰਮ

ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ `action` ਨੂੰ ਬਦਲੋ:

```html
<form id="registerForm" action="javascript:register()">
```

`app.js` ਖੋਲ੍ਹੋ ਅਤੇ `register` ਨਾਮਕ ਇੱਕ ਨਵਾਂ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:

```js
function register() {
  const registerForm = document.getElementById('registerForm');
  const formData = new FormData(registerForm);
  const data = Object.fromEntries(formData);
  const jsonData = JSON.stringify(data);
}
```

ਇੱਥੇ ਅਸੀਂ `getElementById()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਫਾਰਮ ਤੱਤ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ ਅਤੇ [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) ਹੈਲਪਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਫਾਰਮ ਕੰਟਰੋਲਾਂ ਤੋਂ ਮੁੱਲਾਂ ਨੂੰ ਕੁੰਜੀ/ਮੁੱਲ ਜੋੜੇ ਦੇ ਰੂਪ ਵਿੱਚ ਕੱਢਦੇ ਹਾਂ। ਫਿਰ ਅਸੀਂ ਡਾਟਾ ਨੂੰ [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਆਮ ਵਸਤੂ ਵਿੱਚ ਤਬਦੀਲ ਕਰਦੇ ਹਾਂ ਅਤੇ ਆਖਰਕਾਰ [JSON](https://www.json.org/json-en.html) ਵਿੱਚ ਡਾਟਾ ਨੂੰ ਸੀਰੀਅਲਾਈਜ਼ ਕਰਦੇ ਹਾਂ, ਇੱਕ ਫਾਰਮੈਟ ਜੋ ਵੈੱਬ 'ਤੇ ਡਾਟਾ ਦੀ ਅਦਲ-ਬਦਲ ਲਈ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।

ਡਾਟਾ ਹੁਣ ਸਰਵਰ 'ਤੇ ਭੇਜਣ ਲਈ ਤਿਆਰ ਹੈ। `createAccount` ਨਾਮਕ ਇੱਕ ਨਵਾਂ ਫੰਕਸ਼ਨ ਬਣਾਓ:

```js
async function createAccount(account) {
  try {
    const response = await fetch('//localhost:5000/api/accounts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: account
    });
    return await response.json();
  } catch (error) {
    return { error: error.message || 'Unknown error' };
  }
}
```

ਇਹ ਫੰਕਸ਼ਨ ਕੀ ਕਰ ਰਿਹਾ ਹੈ? ਪਹਿਲਾਂ, ਇੱਥੇ `async` ਕੁੰਜੀਸ਼ਬਦ 'ਤੇ ਧਿਆਨ ਦਿਓ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਫੰਕਸ਼ਨ ਵਿੱਚ ਕੋਡ ਸ਼ਾਮਲ ਹੈ ਜੋ [**ਅਸਿੰਕ੍ਰੋਨਸ ਤਰੀਕੇ ਨਾਲ**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) ਚੱਲੇਗਾ। ਜਦੋਂ `await` ਕੁੰਜੀਸ਼ਬਦ ਦੇ ਨਾਲ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਇਹ ਅਸਿੰਕ੍ਰੋਨਸ ਕੋਡ ਨੂੰ ਚਲਾਉਣ ਦੀ ਉਡੀਕ ਕਰਨ ਦੀ
> ਸੁਝਾਅ: ਤੁਸੀਂ ਆਪਣੇ ਫਾਰਮ ਕੰਟਰੋਲਜ਼ ਦੇ ਦਿੱਖ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰ ਸਕਦੇ ਹੋ ਜੇ ਉਹ ਵੈਧ ਹਨ ਜਾਂ ਨਹੀਂ, CSS pseudo-classes `:valid` ਅਤੇ `:invalid` ਦੀ ਵਰਤੋਂ ਕਰਕੇ।

### ਕੰਮ

ਨਵਾਂ ਖਾਤਾ ਬਣਾਉਣ ਲਈ 2 ਫੀਲਡਾਂ ਦੀ ਲੋੜ ਹੈ, ਯੂਜ਼ਰਨੇਮ ਅਤੇ ਕਰੰਸੀ, ਜਦਕਿ ਹੋਰ ਫੀਲਡਾਂ ਵਿਕਲਪਿਕ ਹਨ। ਫਾਰਮ ਦੇ HTML ਨੂੰ ਅਪਡੇਟ ਕਰੋ, `required` ਐਟ੍ਰਿਬਿਊਟ ਅਤੇ ਫੀਲਡ ਦੇ ਲੇਬਲ ਵਿੱਚ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ:

```html
<label for="user">Username (required)</label>
<input id="user" name="user" type="text" required>
...
<label for="currency">Currency (required)</label>
<input id="currency" name="currency" type="text" value="$" required>
```

ਹਾਲਾਂਕਿ ਇਸ ਖਾਸ ਸਰਵਰ ਇੰਪਲੀਮੈਂਟੇਸ਼ਨ ਵਿੱਚ ਫੀਲਡਾਂ ਦੀ ਵੱਧ ਤੋਂ ਵੱਧ ਲੰਬਾਈ 'ਤੇ ਕੋਈ ਖਾਸ ਸੀਮਾਵਾਂ ਲਾਗੂ ਨਹੀਂ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ, ਇਹ ਹਮੇਸ਼ਾ ਇੱਕ ਚੰਗੀ ਅਭਿਆਸ ਹੈ ਕਿ ਕਿਸੇ ਵੀ ਯੂਜ਼ਰ ਟੈਕਸਟ ਐਂਟਰੀ ਲਈ ਵਾਜਬ ਸੀਮਾਵਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਜਾਵੇ।

ਟੈਕਸਟ ਫੀਲਡਾਂ ਵਿੱਚ `maxlength` ਐਟ੍ਰਿਬਿਊਟ ਸ਼ਾਮਲ ਕਰੋ:

```html
<input id="user" name="user" type="text" maxlength="20" required>
...
<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
...
<input id="description" name="description" type="text" maxlength="100">
```

ਹੁਣ ਜੇ ਤੁਸੀਂ *Register* ਬਟਨ ਦਬਾਉਂਦੇ ਹੋ ਅਤੇ ਕੋਈ ਫੀਲਡ ਉਹ ਵੈਧਤਾ ਨਿਯਮਾਂ ਦੀ ਪਾਲਣਾ ਨਹੀਂ ਕਰਦਾ ਜੋ ਅਸੀਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤੇ ਹਨ, ਤਾਂ ਤੁਹਾਨੂੰ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣ ਨੂੰ ਮਿਲੇਗਾ:

![ਫਾਰਮ ਨੂੰ ਸਬਮਿਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ 'ਤੇ ਵੈਧਤਾ ਗਲਤੀ ਦਿਖਾਉਣ ਵਾਲਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.pa.png)

ਇਸ ਤਰ੍ਹਾਂ ਦੀ ਵੈਧਤਾ ਜੋ ਡਾਟਾ ਸਰਵਰ ਨੂੰ ਭੇਜਣ ਤੋਂ *ਪਹਿਲਾਂ* ਕੀਤੀ ਜਾਂਦੀ ਹੈ, **ਕਲਾਇੰਟ-ਸਾਈਡ** ਵੈਧਤਾ ਕਹਿੰਦੀ ਹੈ। ਪਰ ਧਿਆਨ ਦਿਓ ਕਿ ਸਾਰੇ ਚੈੱਕ ਡਾਟਾ ਭੇਜਣ ਤੋਂ ਬਿਨਾਂ ਕਰਨਾ ਹਮੇਸ਼ਾ ਸੰਭਵ ਨਹੀਂ ਹੁੰਦਾ। ਉਦਾਹਰਣ ਲਈ, ਅਸੀਂ ਇੱਥੇ ਜਾਂਚ ਨਹੀਂ ਕਰ ਸਕਦੇ ਕਿ ਕੀ ਇੱਕ ਖਾਤਾ ਪਹਿਲਾਂ ਹੀ ਉਸੇ ਯੂਜ਼ਰਨੇਮ ਨਾਲ ਮੌਜੂਦ ਹੈ ਬਿਨਾਂ ਸਰਵਰ ਨੂੰ ਬੇਨਤੀ ਭੇਜਣ ਦੇ। ਸਰਵਰ 'ਤੇ ਕੀਤੀ ਗਈ ਵਾਧੂ ਵੈਧਤਾ ਨੂੰ **ਸਰਵਰ-ਸਾਈਡ** ਵੈਧਤਾ ਕਿਹਾ ਜਾਂਦਾ ਹੈ।

ਆਮ ਤੌਰ 'ਤੇ ਦੋਵੇਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਜਦਕਿ ਕਲਾਇੰਟ-ਸਾਈਡ ਵੈਧਤਾ ਯੂਜ਼ਰ ਨੂੰ ਤੁਰੰਤ ਫੀਡਬੈਕ ਦੇ ਕੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਦੀ ਹੈ, ਸਰਵਰ-ਸਾਈਡ ਵੈਧਤਾ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਤੁਸੀਂ ਜੋ ਯੂਜ਼ਰ ਡਾਟਾ ਪ੍ਰੋਸੈਸ ਕਰ ਰਹੇ ਹੋ ਉਹ ਸਹੀ ਅਤੇ ਸੁਰੱਖਿਅਤ ਹੈ।

---

---

## GitHub Copilot Agent ਚੈਲੈਂਜ 🚀

Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:

**ਵੇਰਵਾ:** ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਨੂੰ ਵਿਸਤ੍ਰਿਤ ਕਲਾਇੰਟ-ਸਾਈਡ ਵੈਧਤਾ ਅਤੇ ਯੂਜ਼ਰ ਫੀਡਬੈਕ ਨਾਲ ਸੁਧਾਰੋ। ਇਹ ਚੈਲੈਂਜ ਤੁਹਾਨੂੰ ਫਾਰਮ ਵੈਧਤਾ, ਗਲਤੀ ਸੰਭਾਲਣ, ਅਤੇ ਇੰਟਰੈਕਟਿਵ ਫੀਡਬੈਕ ਨਾਲ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਨ ਦੀ ਅਭਿਆਸ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।

**ਪ੍ਰੇਰਨਾ:** ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਲਈ ਪੂਰੀ ਵੈਧਤਾ ਪ੍ਰਣਾਲੀ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੇ: 1) ਜਦੋਂ ਯੂਜ਼ਰ ਟਾਈਪ ਕਰਦਾ ਹੈ ਤਾਂ ਹਰ ਫੀਲਡ ਲਈ ਰੀਅਲ-ਟਾਈਮ ਵੈਧਤਾ ਫੀਡਬੈਕ, 2) ਹਰ ਇਨਪੁਟ ਫੀਲਡ ਦੇ ਹੇਠਾਂ ਕਸਟਮ ਵੈਧਤਾ ਸੁਨੇਹੇ, 3) ਪਾਸਵਰਡ ਪੁਸ਼ਟੀ ਫੀਲਡ ਜਿਸ ਵਿੱਚ ਮੈਚਿੰਗ ਵੈਧਤਾ ਹੋਵੇ, 4) ਵਿਜ਼ੂਅਲ ਇੰਡੀਕੇਟਰ (ਜਿਵੇਂ ਕਿ ਵੈਧ ਫੀਲਡਾਂ ਲਈ ਹਰੇ ਚਿੰਨ੍ਹ ਅਤੇ ਅਵੈਧ ਲਈ ਲਾਲ ਚੇਤਾਵਨੀ), 5) ਇੱਕ ਸਬਮਿਟ ਬਟਨ ਜੋ ਸਿਰਫ਼ ਤਦ ਹੀ ਐਨਬਲ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਸਾਰੀਆਂ ਵੈਧਤਾਵਾਂ ਪੂਰੀਆਂ ਹੁੰਦੀਆਂ ਹਨ। ਇੰਟਰੈਕਟਿਵ ਵਿਹਾਰ ਲਈ HTML5 ਵੈਧਤਾ ਐਟ੍ਰਿਬਿਊਟ, CSS ਸਟਾਈਲਿੰਗ ਅਤੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ।

## 🚀 ਚੈਲੈਂਜ

HTML ਵਿੱਚ ਗਲਤੀ ਸੁਨੇਹਾ ਦਿਖਾਓ ਜੇ ਯੂਜ਼ਰ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ।

ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਣ ਹੈ ਕਿ CSS ਸਟਾਈਲਿੰਗ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਬਾਅਦ ਅੰਤਮ ਲੌਗਇਨ ਪੇਜ ਕਿਵੇਂ ਲੱਗ ਸਕਦਾ ਹੈ:

![CSS ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਬਾਅਦ ਲੌਗਇਨ ਪੇਜ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.pa.png)

## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼

[ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/44)

## ਸਮੀਖਾ ਅਤੇ ਸਵੈ ਅਧਿਐਨ

ਡਿਵੈਲਪਰਜ਼ ਆਪਣੇ ਫਾਰਮ ਬਣਾਉਣ ਦੇ ਯਤਨਾਂ ਬਾਰੇ ਬਹੁਤ ਹੀ ਰਚਨਾਤਮਕ ਹੋ ਗਏ ਹਨ, ਖਾਸ ਕਰਕੇ ਵੈਧਤਾ ਰਣਨੀਤੀਆਂ ਦੇ ਸੰਦਰਭ ਵਿੱਚ। [CodePen](https://codepen.com) ਦੇਖ ਕੇ ਵੱਖ-ਵੱਖ ਫਾਰਮ ਫਲੋਜ਼ ਬਾਰੇ ਸਿੱਖੋ; ਕੀ ਤੁਸੀਂ ਕੁਝ ਦਿਲਚਸਪ ਅਤੇ ਪ੍ਰੇਰਣਾਦਾਇਕ ਫਾਰਮ ਲੱਭ ਸਕਦੇ ਹੋ?

## ਅਸਾਈਨਮੈਂਟ

[ਆਪਣੇ ਬੈਂਕ ਐਪ ਨੂੰ ਸਜਾਓ](assignment.md)

---

**ਅਸਵੀਕਰਤਾ**:  
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।