<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "8baca047d77a5f43fa4099c0578afa42",
  "translation_date": "2025-08-29T07:00:27+00:00",
  "source_file": "7-bank-project/2-forms/README.md",
  "language_code": "el"
}
-->
# Δημιουργία Εφαρμογής Τραπεζικής Μέρος 2: Δημιουργία Φόρμας Σύνδεσης και Εγγραφής

## Κουίζ πριν το μάθημα

[Κουίζ πριν το μάθημα](https://ff-quizzes.netlify.app/web/quiz/43)

### Εισαγωγή

Σχεδόν σε όλες τις σύγχρονες διαδικτυακές εφαρμογές, μπορείτε να δημιουργήσετε έναν λογαριασμό για να έχετε τον δικό σας προσωπικό χώρο. Καθώς πολλοί χρήστες μπορούν να έχουν πρόσβαση σε μια εφαρμογή ταυτόχρονα, χρειάζεστε έναν μηχανισμό για να αποθηκεύετε τα προσωπικά δεδομένα κάθε χρήστη ξεχωριστά και να επιλέγετε ποια πληροφορία θα εμφανίζεται. Δεν θα καλύψουμε πώς να διαχειριστείτε [την ταυτότητα του χρήστη με ασφάλεια](https://en.wikipedia.org/wiki/Authentication), καθώς είναι ένα εκτενές θέμα από μόνο του, αλλά θα διασφαλίσουμε ότι κάθε χρήστης θα μπορεί να δημιουργήσει έναν (ή περισσότερους) τραπεζικούς λογαριασμούς στην εφαρμογή μας.

Σε αυτό το μέρος, θα χρησιμοποιήσουμε φόρμες HTML για να προσθέσουμε σύνδεση και εγγραφή στην εφαρμογή μας. Θα δούμε πώς να στέλνουμε δεδομένα σε έναν server API προγραμματιστικά και, τελικά, πώς να ορίσουμε βασικούς κανόνες επικύρωσης για τις εισόδους των χρηστών.

### Προαπαιτούμενα

Πρέπει να έχετε ολοκληρώσει τα [πρότυπα HTML και τη δρομολόγηση](../1-template-route/README.md) της εφαρμογής για αυτό το μάθημα. Πρέπει επίσης να έχετε εγκαταστήσει το [Node.js](https://nodejs.org) και να [εκτελείτε το server API](../api/README.md) τοπικά, ώστε να μπορείτε να στέλνετε δεδομένα για τη δημιουργία λογαριασμών.

**Σημείωση**
Θα χρειαστεί να έχετε δύο τερματικά ανοιχτά ταυτόχρονα, όπως αναφέρεται παρακάτω:
1. Για την κύρια τραπεζική εφαρμογή που δημιουργήσαμε στο μάθημα [πρότυπα HTML και δρομολόγηση](../1-template-route/README.md)
2. Για το [Bank APP server API](../api/README.md) που μόλις ρυθμίσαμε παραπάνω.

Πρέπει να έχετε και τους δύο servers σε λειτουργία για να προχωρήσετε με το υπόλοιπο μάθημα. Ακούνε σε διαφορετικές θύρες (θύρα `3000` και θύρα `5000`), οπότε όλα θα λειτουργούν κανονικά.

Μπορείτε να ελέγξετε ότι ο server λειτουργεί σωστά εκτελώντας αυτήν την εντολή σε ένα τερματικό:

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

---

## Φόρμα και στοιχεία ελέγχου

Το στοιχείο `<form>` περιλαμβάνει μια ενότητα ενός εγγράφου HTML όπου ο χρήστης μπορεί να εισάγει και να υποβάλει δεδομένα με διαδραστικά στοιχεία ελέγχου. Υπάρχουν διάφορα στοιχεία διεπαφής χρήστη (UI) που μπορούν να χρησιμοποιηθούν μέσα σε μια φόρμα, με πιο συνηθισμένα τα στοιχεία `<input>` και `<button>`.

Υπάρχουν πολλοί διαφορετικοί [τύποι](https://developer.mozilla.org/docs/Web/HTML/Element/input) του `<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 που μπορείτε να χρησιμοποιήσετε κατά την κατασκευή της διεπαφής σας.

✅ Σημειώστε ότι το `<input>` είναι ένα [κενό στοιχείο](https://developer.mozilla.org/docs/Glossary/Empty_element) στο οποίο *δεν* πρέπει να προσθέσετε αντίστοιχη ετικέτα κλεισίματος. Μπορείτε, ωστόσο, να χρησιμοποιήσετε τη μορφή αυτοκλεισίματος `<input/>`, αλλά δεν είναι απαραίτητο.

Το στοιχείο `<button>` μέσα σε μια φόρμα είναι λίγο ιδιαίτερο. Αν δεν καθορίσετε την ιδιότητα `type`, θα υποβάλει αυτόματα τα δεδομένα της φόρμας στον server όταν πατηθεί. Εδώ είναι οι δυνατές τιμές για την ιδιότητα `type`:

- `submit`: Η προεπιλογή μέσα σε μια `<form>`, το κουμπί ενεργοποιεί την ενέργεια υποβολής της φόρμας.
- `reset`: Το κουμπί επαναφέρει όλα τα στοιχεία ελέγχου της φόρμας στις αρχικές τους τιμές.
- `button`: Δεν εκχωρεί καμία προεπιλεγμένη συμπεριφορά όταν πατηθεί το κουμπί. Μπορείτε στη συνέχεια να εκχωρήσετε προσαρμοσμένες ενέργειες χρησιμοποιώντας JavaScript.

### Εργασία

Ας ξεκινήσουμε προσθέτοντας μια φόρμα στο πρότυπο `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`. Φαίνεται διαφορετικό από τα άλλα πεδία; Δοκιμάστε να αλληλεπιδράσετε μαζί του.

✅ Μπορείτε να περιηγηθείτε και να αλληλεπιδράσετε με τις φόρμες χρησιμοποιώντας μόνο το πληκτρολόγιο; Πώς θα το κάνατε αυτό;

## Υποβολή δεδομένων στον server

Τώρα που έχουμε μια λειτουργική διεπαφή χρήστη, το επόμενο βήμα είναι να στείλουμε τα δεδομένα στον server. Ας κάνουμε μια γρήγορη δοκιμή χρησιμοποιώντας τον τρέχοντα κώδικά μας: τι συμβαίνει αν κάνετε κλικ στο κουμπί *Σύνδεση* ή *Εγγραφή*;

Παρατηρήσατε την αλλαγή στην ενότητα URL του προγράμματος περιήγησης;

![Στιγμιότυπο οθόνης της αλλαγής του URL του προγράμματος περιήγησης μετά το πάτημα του κουμπιού Εγγραφή](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.el.png)

Η προεπιλεγμένη ενέργεια για μια `<form>` είναι να υποβάλει τη φόρμα στη διεύθυνση URL του τρέχοντος server χρησιμοποιώντας τη [μέθοδο 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), η οποία στέλνει τα δεδομένα της φόρμας στον server στο σώμα του αιτήματος 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">
```

Δοκιμάστε τώρα να εγγραφείτε με το όνομά σας. Μετά το πάτημα του κουμπιού *Εγγραφή*, θα πρέπει να δείτε κάτι σαν αυτό:

![Παράθυρο προγράμματος περιήγησης στη διεύθυνση localhost:5000/api/accounts, που εμφανίζει μια συμβολοσειρά JSON με δεδομένα χρήστη](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.el.png)

Αν όλα πάνε καλά, ο server θα απαντήσει στο αίτημά σας με μια [JSON](https://www.json.org/json-en.html) απόκριση που περιέχει τα δεδομένα του λογαριασμού που δημιουργήθηκε.

✅ Δοκιμάστε να εγγραφείτε ξανά με το ίδιο όνομα. Τι συμβαίνει;

## Υποβολή δεδομένων χωρίς ανανέωση της σελίδας

Όπως πιθανώς παρατηρήσατε, υπάρχει ένα μικρό πρόβλημα με την προσέγγιση που μόλις χρησιμοποιήσαμε: κατά την υποβολή της φόρμας, βγαίνουμε από την εφαρμογή μας και το πρόγραμμα περιήγησης ανακατευθύνεται στη διεύθυνση URL του server. Προσπαθούμε να αποφύγουμε όλες τις ανανεώσεις σελίδων με την εφαρμογή μας, καθώς δημιουργούμε μια [Εφαρμογή Μίας Σελίδας (SPA)](https://en.wikipedia.org/wiki/Single-page_application).

Για να στείλουμε τα δεδομένα της φόρμας στον server χωρίς να αναγκάσουμε την ανανέωση της σελίδας, πρέπει να χρησιμοποιήσουμε κώδικα JavaScript. Αντί να βάζετε μια διεύθυνση URL στην ιδιότητα `action` ενός στοιχείου `<form>`, μπορείτε να χρησιμοποιήσετε οποιονδήποτε κώδικα JavaScript που ξεκινά με τη συμβολοσειρά `javascript:` για να εκτελέσετε μια προσαρμοσμένη ενέργεια. Χρησιμοποιώντας αυτό, σημαίνει επίσης ότι θα πρέπει να υλοποιήσετε ορισμένες εργασίες που προηγουμένως γίνονταν αυτόματα από το πρόγραμμα περιήγησης:

- Ανάκτηση των δεδομένων της φόρμας
- Μετατροπή και κωδικοποίηση των δεδομένων της φόρμας σε κατάλληλη μορφή
- Δημιουργία του αιτήματος HTTP και αποστολή του στον server

### Εργασία

Αντικαταστήστε την ιδιότητα `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), μια μορφή που χρησιμοποιείται συνήθως για την ανταλλαγή δεδομένων στον ιστό.

Τα δεδομένα είναι τώρα έτοιμα να σταλούν στον server. Δημιουργήστε μια νέα συνάρτηση με όνομα `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`, επιτρέπει την αναμονή για την εκτέλεση ασύγχρονου κώδικα - όπως η αναμονή για την απόκριση του server εδώ - πριν συνεχίσει.

Εδώ είναι ένα γρήγορο βίντεο για τη χρήση του `async/await`:

[![Async και Await για τη διαχείριση υποσχέσεων](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async και Await για τη διαχείριση υποσχέσεων")

> 🎥 Κάντε κλικ στην εικόνα παραπάνω για ένα βίντεο σχετικά με το async/await.

Χρησιμοποιούμε το API `fetch()` για να στείλουμε δεδομένα JSON στον server. Αυτή η μέθοδος παίρνει 2 παραμέτρους:

- Τη διεύθυνση URL του server, οπότε βάζουμε ξανά το `//localhost:5000/api/accounts` εδώ.
- Τις ρυθμίσεις του αιτήματος. Εκεί ορίζουμε τη μέθοδο σε `POST` και παρέχουμε το `body` για το αίτημα. Καθώς στέλνουμε δεδομένα JSON στον server, πρέπει επίσης να ορίσουμε την κεφαλίδα `Content-Type` σε `application/json`, ώστε ο server να γνωρίζει πώς να ερμηνεύσει το περιεχόμενο.

Καθώς ο server θα απαντήσει στο αίτημα με JSON, μπορούμε να χρησιμοποιήσουμε το `await response.json()` για να αναλύσουμε το περιεχόμενο JSON και να επιστρέψουμε το αποτέλεσμα ως αντικείμενο. Σημειώστε ότι αυτή η μέθοδος είναι ασύγχρονη, οπότε χρησιμοποιούμε τη λέξη-κλειδί `await` εδώ πριν επιστρέψουμε για να διασφαλίσουμε ότι τυχόν σφάλματα κατά την ανάλυση θα πιαστούν επίσης.

Τώρα προσθέστε λίγο κώδικα στη συνάρτηση `register` για να καλέσετε το `createAccount()`:

```js
const result = await createAccount(jsonData);
```

Επειδή χρησιμοποιούμε τη λέξη-κλειδί `await` εδώ, πρέπει να προσθέσουμε τη λέξη-κλειδί `async` πριν από τη συνάρτηση register:

```js
async function register() {
```

Τέλος, ας προσθέσουμε μερικά logs για να ελέγξουμε το αποτέλεσμα. Η τελική συνάρτηση θα πρέπει να μοιάζει με αυτή:

```js
async function register() {
  const registerForm = document.getElementById('registerForm');
  const formData = new FormData(registerForm);
  const jsonData = JSON.stringify(Object.fromEntries(formData));
  const result = await createAccount(jsonData);

  if (result.error) {
    return console.log('An error occurred:', result.error);
  }

  console.log('Account created!', result);
}
```

Ήταν λίγο μακρύ, αλλά τα καταφέραμε! Αν ανοίξετε τα [εργαλεία προγραμματιστή του προγράμματος περιήγησης](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) και δοκιμάσετε να εγγραφείτε σε έναν νέο λογαριασμό, δεν θα δείτε καμία αλλαγή στη σελίδα, αλλά ένα μήνυμα θα εμφανιστεί στην κονσόλα επιβεβαιώνοντας ότι όλα λειτουργούν.

![Στιγμιότυπο οθόνης που δείχνει μήνυμα καταγραφής στην κονσόλα του προγράμματος περιήγησης](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.el.png)

✅ Πιστεύετε ότι τα δεδομένα αποστέλλονται
> Συμβουλή: μπορείτε να προσαρμόσετε την εμφάνιση των στοιχείων ελέγχου της φόρμας σας ανάλογα με το αν είναι έγκυρα ή όχι, χρησιμοποιώντας τις ψευδοκλάσεις CSS `: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">
```

Τώρα, αν πατήσετε το κουμπί *Εγγραφή* και κάποιο πεδίο δεν πληροί έναν από τους κανόνες επικύρωσης που ορίσαμε, θα δείτε κάτι σαν αυτό:

![Στιγμιότυπο οθόνης που δείχνει το σφάλμα επικύρωσης όταν προσπαθείτε να υποβάλετε τη φόρμα](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.el.png)

Η επικύρωση που πραγματοποιείται *πριν* σταλούν δεδομένα στον διακομιστή ονομάζεται **επικύρωση από την πλευρά του πελάτη** (client-side validation). Ωστόσο, σημειώστε ότι δεν είναι πάντα δυνατό να πραγματοποιηθούν όλοι οι έλεγχοι χωρίς την αποστολή δεδομένων. Για παράδειγμα, δεν μπορούμε να ελέγξουμε εδώ αν υπάρχει ήδη λογαριασμός με το ίδιο όνομα χρήστη χωρίς να στείλουμε ένα αίτημα στον διακομιστή. Η πρόσθετη επικύρωση που πραγματοποιείται στον διακομιστή ονομάζεται **επικύρωση από την πλευρά του διακομιστή** (server-side validation).

Συνήθως, και οι δύο μέθοδοι πρέπει να υλοποιούνται. Ενώ η χρήση της επικύρωσης από την πλευρά του πελάτη βελτιώνει την εμπειρία του χρήστη παρέχοντας άμεση ανατροφοδότηση, η επικύρωση από την πλευρά του διακομιστή είναι κρίσιμη για να διασφαλιστεί ότι τα δεδομένα του χρήστη που επεξεργάζεστε είναι έγκυρα και ασφαλή.

---

## 🚀 Πρόκληση

Εμφανίστε ένα μήνυμα σφάλματος στο HTML αν ο χρήστης υπάρχει ήδη.

Ακολουθεί ένα παράδειγμα για το πώς μπορεί να μοιάζει η τελική σελίδα σύνδεσης μετά από λίγη μορφοποίηση:

![Στιγμιότυπο οθόνης της σελίδας σύνδεσης μετά την προσθήκη στυλ CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.el.png)

## Κουίζ μετά το μάθημα

[Κουίζ μετά το μάθημα](https://ff-quizzes.netlify.app/web/quiz/44)

## Ανασκόπηση & Αυτομελέτη

Οι προγραμματιστές έχουν γίνει πολύ δημιουργικοί στις προσπάθειές τους για τη δημιουργία φορμών, ειδικά όσον αφορά τις στρατηγικές επικύρωσης. Μάθετε για διαφορετικές ροές φορμών εξετάζοντας το [CodePen](https://codepen.com). Μπορείτε να βρείτε ενδιαφέρουσες και εμπνευσμένες φόρμες;

## Εργασία

[Διαμορφώστε την εφαρμογή της τράπεζάς σας](assignment.md)

---

**Αποποίηση Ευθύνης**:  
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε κάθε προσπάθεια για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.