HTML-009 — HTML Forms: Προηγμένες φόρμες και σύγχρονα πεδία εισαγωγής

HTML-009 — HTML Forms

Προηγμένες φόρμες και σύγχρονα πεδία εισαγωγής

Στα προηγούμενα μαθήματα γνωρίσαμε τη δομή μιας HTML σελίδας και τα σημασιολογικά στοιχεία του HTML5. Σε αυτό το μάθημα θα ασχοληθούμε με ένα ιδιαίτερα σημαντικό κομμάτι των ιστοσελίδων: τις φόρμες.

Οι φόρμες επιτρέπουν στους επισκέπτες να εισάγουν πληροφορίες, να επιλέγουν επιλογές και να στέλνουν δεδομένα σε μια εφαρμογή. Θα δούμε πώς δημιουργούμε σύγχρονα πεδία εισαγωγής και πώς αξιοποιούμε τις δυνατότητες επικύρωσης της HTML5.

1. Τι είναι οι HTML Forms;

Το στοιχείο <form> αποτελεί το βασικό περίβλημα μιας φόρμας. Μέσα σε αυτό τοποθετούμε πεδία εισαγωγής, επιλογές, λίστες και κουμπιά.

Μια απλή φόρμα μπορεί να μοιάζει ως εξής:

<form>
  <label for="username">Όνομα χρήστη:</label>
  <input type="text" id="username" name="username">

  <button type="submit">Αποστολή</button>
</form>

Το στοιχείο <label> περιγράφει το πεδίο, ενώ το <input> επιτρέπει στον χρήστη να εισαγάγει μια τιμή.

2. Οι βασικές ιδιότητες του form

Το στοιχείο form διαθέτει σημαντικές ιδιότητες:

action: Καθορίζει τη διεύθυνση στην οποία θα σταλούν τα δεδομένα.
method: Καθορίζει τον τρόπο αποστολής των δεδομένων. Οι συνηθέστερες τιμές είναι GET και POST.
autocomplete: Επιτρέπει ή απενεργοποιεί τις προτάσεις αυτόματης συμπλήρωσης.
novalidate: Απενεργοποιεί την ενσωματωμένη επικύρωση της φόρμας κατά την υποβολή.

GET και POST

Η μέθοδος GET μεταφέρει τα δεδομένα μέσω των παραμέτρων του URL. Είναι κατάλληλη για αναζητήσεις και αιτήματα ανάκτησης πληροφοριών.

<form action="/search" method="get">
  <input type="search" name="q">
  <button type="submit">Αναζήτηση</button>
</form>

Η μέθοδος POST στέλνει τα δεδομένα στο σώμα του αιτήματος. Χρησιμοποιείται συχνά σε φόρμες εγγραφής, σύνδεσης και καταχώρισης πληροφοριών.

<form action="/register" method="post">
  <input type="text" name="username">
  <input type="email" name="email">
  <button type="submit">Εγγραφή</button>
</form>

Σημαντικό: η POST δεν κρυπτογραφεί από μόνη της τα δεδομένα. Για ασφαλή μεταφορά απαιτείται HTTPS και κατάλληλη προστασία στην πλευρά του server.

3. Οι σύγχρονοι τύποι input της HTML5

Η HTML5 προσφέρει διαφορετικούς τύπους πεδίων εισαγωγής. Με τον σωστό τύπο, ο browser μπορεί να εμφανίσει κατάλληλο πληκτρολόγιο ή ενσωματωμένους ελέγχους.

Text — Απλό κείμενο

<label for="fullname">Ονοματεπώνυμο:</label>
<input type="text" id="fullname" name="fullname">

Email — Διεύθυνση ηλεκτρονικού ταχυδρομείου

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Ο browser ελέγχει αν η τιμή έχει τη βασική μορφή μιας διεύθυνσης email.

Number — Αριθμητική τιμή

<label for="age">Ηλικία:</label>
<input type="number" id="age" name="age"
       min="1" max="120" step="1">

Οι ιδιότητες min, max και step καθορίζουν τα επιτρεπόμενα όρια και το βήμα μεταβολής.

Date — Ημερομηνία

<label for="birthday">Ημερομηνία γέννησης:</label>
<input type="date" id="birthday" name="birthday">

Time — Ώρα

<label for="appointment">Ώρα ραντεβού:</label>
<input type="time" id="appointment" name="appointment">

Range — Ρυθμιστικό τιμών

<label for="level">Επίπεδο δυσκολίας:</label>
<input type="range" id="level" name="level"
       min="1" max="10" value="5">

Color — Επιλογή χρώματος

<label for="color">Επίλεξε χρώμα:</label>
<input type="color" id="color" name="color"
       value="#00bfae">

URL — Διεύθυνση ιστοσελίδας

<label for="website">Ιστοσελίδα:</label>
<input type="url" id="website" name="website">

Search — Πεδίο αναζήτησης

<label for="search">Αναζήτηση:</label>
<input type="search" id="search" name="search">

4. Χρήσιμες ιδιότητες των πεδίων

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

required: Κάνει υποχρεωτική τη συμπλήρωση.
placeholder: Εμφανίζει ένα βοηθητικό κείμενο.
minlength: Καθορίζει το ελάχιστο μήκος κειμένου.
maxlength: Καθορίζει το μέγιστο μήκος κειμένου.
min και max: Ορίζουν αριθμητικά όρια.
step: Καθορίζει το επιτρεπόμενο αριθμητικό βήμα.
pattern: Ορίζει έναν κανόνα ελέγχου με regular expression.
readonly: Επιτρέπει την ανάγνωση, όχι την επεξεργασία.
disabled: Απενεργοποιεί το πεδίο.
autocomplete: Καθορίζει τη συμπεριφορά αυτόματης συμπλήρωσης.

Παράδειγμα υποχρεωτικού πεδίου

<label for="username">Όνομα χρήστη:</label>
<input type="text"
       id="username"
       name="username"
       required
       minlength="4"
       maxlength="20"
       placeholder="Πληκτρολόγησε όνομα χρήστη">

Παράδειγμα pattern

<label for="code">Κωδικός 5 ψηφίων:</label>
<input type="text"
       id="code"
       name="code"
       pattern="[0-9]{5}"
       title="Πληκτρολόγησε ακριβώς 5 ψηφία"
       required>

Το pattern παραπάνω απαιτεί ακριβώς πέντε ψηφία. Για παράδειγμα, το 12345 είναι αποδεκτό, ενώ το 1234 όχι.

5. Επιλογές με radio, checkbox και select

Radio buttons

Τα radio buttons επιτρέπουν την επιλογή μίας μόνο τιμής από μια ομάδα επιλογών. Για να λειτουργούν ως ομάδα, πρέπει να έχουν το ίδιο όνομα στο attribute name.

<p>Επίλεξε επίπεδο:</p>

<label>
  <input type="radio" name="level" value="beginner">
  Beginner
</label>

<label>
  <input type="radio" name="level" value="intermediate">
  Intermediate
</label>

<label>
  <input type="radio" name="level" value="advanced">
  Advanced
</label>

Checkboxes

Τα checkboxes επιτρέπουν την επιλογή μίας ή περισσότερων ανεξάρτητων επιλογών.

<p>Ποιες τεχνολογίες γνωρίζεις;</p>

<label>
  <input type="checkbox" name="skills" value="html">
  HTML
</label>

<label>
  <input type="checkbox" name="skills" value="css">
  CSS
</label>

<label>
  <input type="checkbox" name="skills" value="javascript">
  JavaScript
</label>

Select — Αναπτυσσόμενη λίστα

<label for="country">Χώρα:</label>

<select id="country" name="country">
  <option value="">Επίλεξε χώρα</option>
  <option value="gr">Ελλάδα</option>
  <option value="cy">Κύπρος</option>
  <option value="uk">Ηνωμένο Βασίλειο</option>
</select>

6. Textarea και Datalist

Textarea — Πεδίο πολλών γραμμών

Όταν θέλουμε ο χρήστης να γράψει μεγαλύτερο κείμενο, χρησιμοποιούμε το στοιχείο textarea.

<label for="message">Το μήνυμά σου:</label>

<textarea id="message"
          name="message"
          rows="5"
          cols="30"
          placeholder="Γράψε το μήνυμά σου εδώ..."></textarea>

Datalist — Προτεινόμενες τιμές

Το datalist προσφέρει προτάσεις κατά την πληκτρολόγηση, χωρίς να περιορίζει τον χρήστη αποκλειστικά σε αυτές.

<label for="browser">Αγαπημένος browser:</label>

<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Edge">
  <option value="Safari">
</datalist>

7. Ομαδοποίηση πεδίων με fieldset και legend

Τα στοιχεία fieldset και legend βοηθούν στην οργάνωση μιας φόρμας σε λογικές ενότητες.

<fieldset>
  <legend>Προσωπικά στοιχεία</legend>

  <label for="name">Όνομα:</label>
  <input type="text" id="name" name="name">

  <label for="email2">Email:</label>
  <input type="email" id="email2" name="email">
</fieldset>

Το fieldset δημιουργεί μια ομάδα σχετικών πεδίων, ενώ το legend δίνει έναν τίτλο στην ομάδα.

8. Επικύρωση δεδομένων με HTML5

Η HTML5 διαθέτει ενσωματωμένους μηχανισμούς ελέγχου εγκυρότητας. Για παράδειγμα, το required δεν επιτρέπει την υποβολή μιας φόρμας όταν το αντίστοιχο πεδίο είναι κενό.

<form action="#" method="get">

  <label for="useremail">Email:</label>
  <input type="email"
         id="useremail"
         name="email"
         required>

  <label for="userage">Ηλικία:</label>
  <input type="number"
         id="userage"
         name="age"
         min="18"
         max="99"
         required>

  <button type="submit">Υποβολή</button>

</form>

Ο browser ελέγχει τα πεδία πριν από την υποβολή. Αν κάποιο πεδίο δεν πληροί τους κανόνες, εμφανίζει σχετικό μήνυμα στον χρήστη.

Προσοχή: Η επικύρωση HTML5 βελτιώνει την εμπειρία χρήσης, αλλά δεν αντικαθιστά τον έλεγχο στην πλευρά του server. Τα δεδομένα πρέπει πάντα να ελέγχονται ξανά από την εφαρμογή που τα λαμβάνει.

9. Ολοκληρωμένο παράδειγμα — Student Registration Form

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

<!DOCTYPE html>
<html lang="el">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Student Registration</title>
</head>
<body>

  <h1>Εγγραφή μαθητή</h1>

  <form onsubmit="event.preventDefault(); alert('Η φόρμα συμπληρώθηκε επιτυχώς!');">

    <fieldset>
      <legend>Προσωπικά στοιχεία</legend>

      <label for="student-name">Ονοματεπώνυμο:</label>
      <input type="text"
             id="student-name"
             name="studentName"
             required
             minlength="3"
             placeholder="Το όνομά σου">

      <label for="student-email">Email:</label>
      <input type="email"
             id="student-email"
             name="studentEmail"
             required
             placeholder="name@example.com">

      <label for="student-age">Ηλικία:</label>
      <input type="number"
             id="student-age"
             name="studentAge"
             min="10"
             max="99"
             required>

    </fieldset>

    <fieldset>
      <legend>Εκπαιδευτικό επίπεδο</legend>

      <label for="student-level">Επίλεξε επίπεδο:</label>
      <select id="student-level" name="level" required>
        <option value="">Επίλεξε επίπεδο</option>
        <option value="beginner">Beginner</option>
        <option value="intermediate">Intermediate</option>
        <option value="advanced">Advanced</option>
      </select>

    </fieldset>

    <fieldset>
      <legend>Τεχνολογίες ενδιαφέροντος</legend>

      <label>
        <input type="checkbox" name="technology" value="html">
        HTML
      </label>

      <label>
        <input type="checkbox" name="technology" value="css">
        CSS
      </label>

      <label>
        <input type="checkbox" name="technology" value="javascript">
        JavaScript
      </label>

    </fieldset>

    <fieldset>
      <legend>Επιπλέον πληροφορίες</legend>

      <label for="student-message">Μήνυμα:</label>
      <textarea id="student-message"
                name="message"
                rows="4"
                placeholder="Γράψε λίγα λόγια για εσένα..."></textarea>

    </fieldset>

    <button type="submit">Ολοκλήρωση εγγραφής</button>

  </form>

</body>
</html>

10. Πρακτική άσκηση — Create Your Own Registration Form

Τώρα θα δημιουργήσεις τη δική σου φόρμα εγγραφής χρησιμοποιώντας το Playground.

Ζητούμενα:

Δημιούργησε μια φόρμα με τίτλο «My Learning Profile».
Πρόσθεσε πεδίο ονοματεπωνύμου με type="text".
Πρόσθεσε πεδίο email με type="email" και required.
Πρόσθεσε πεδίο ηλικίας με type="number" και όρια min και max.
Δημιούργησε select με τα τρία επίπεδα Beginner, Intermediate και Advanced.
Πρόσθεσε checkboxes για HTML, CSS και JavaScript.
Πρόσθεσε textarea για ένα σύντομο προσωπικό μήνυμα.
Οργάνωσε τα πεδία σε δύο ή περισσότερα fieldsets.
Πρόσθεσε ένα κουμπί υποβολής.

Πειραματίσου με τις ιδιότητες required, placeholder, minlength, maxlength και autocomplete.

Άνοιξε το Playground, επίλεξε HTML-009 και πάτησε Run. Δοκίμασε να συμπληρώσεις τα πεδία και να παρατηρήσεις πώς συμπεριφέρονται οι διαφορετικοί τύποι input.

RUN ON PLAYGROUND

11. Συχνά λάθη κατά τη δημιουργία φορμών

Να παραλείπουμε το label και να μην είναι σαφές τι πρέπει να συμπληρώσει ο χρήστης.
Να χρησιμοποιούμε το ίδιο id σε περισσότερα από ένα πεδία.
Να ξεχνάμε το name, με αποτέλεσμα να μην υπάρχει το αναμενόμενο όνομα για την αποστολή των δεδομένων.
Να χρησιμοποιούμε διαφορετικό name στα radio buttons που ανήκουν στην ίδια ομάδα.
Να θεωρούμε ότι το required αντικαθιστά τον έλεγχο δεδομένων στον server.
Να χρησιμοποιούμε GET για ευαίσθητα δεδομένα.

12. Τι μάθαμε

Πώς δημιουργούμε μια HTML φόρμα με το στοιχείο form.
Ποια είναι η διαφορά μεταξύ GET και POST.
Πώς χρησιμοποιούμε τους σύγχρονους τύπους input της HTML5.
Πώς λειτουργούν οι ιδιότητες required, min, max και pattern.
Πώς δημιουργούμε radio buttons, checkboxes και select lists.
Πώς χρησιμοποιούμε textarea και datalist.
Πώς οργανώνουμε φόρμες με fieldset και legend.
Πώς λειτουργεί η ενσωματωμένη επικύρωση HTML5.

13. Έλεγχος γνώσεων

1. Ποιος τύπος input χρησιμοποιείται για διεύθυνση email;

α) text
β) email
γ) number

2. Ποια ιδιότητα κάνει ένα πεδίο υποχρεωτικό;

α) placeholder
β) readonly
γ) required

3. Ποιο στοιχείο χρησιμοποιούμε για κείμενο πολλών γραμμών;

α) textarea
β) datalist
γ) select

4. Ποια ιδιότητα ορίζει τον ελάχιστο αριθμό χαρακτήρων;

α) maxlength
β) minlength
γ) min

5. Ποιο στοιχείο ομαδοποιεί σχετικά πεδία μιας φόρμας;

α) article
β) fieldset
γ) footer

Απαντήσεις: 1-β, 2-γ, 3-α, 4-β, 5-β.

Επόμενο μάθημα

Στο HTML-010 θα προχωρήσουμε στα HTML Tables: θα μάθουμε να οργανώνουμε δεδομένα σε πίνακες, να χρησιμοποιούμε κεφαλίδες και κελιά, καθώς και να δημιουργούμε πιο σύνθετες δομές με rowspan και colspan.

Συνεχίζουμε να μαθαίνουμε, να πειραματιζόμαστε και να δημιουργούμε!

<!DOCTYPE html>
<html lang="el">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Learning Profile</title>
</head>
<body>

<h1>My Learning Profile</h1>
  <p>Συμπλήρωσε τα στοιχεία σου και δημιούργησε το εκπαιδευτικό σου προφίλ.</p>

<fieldset>
      <legend>Προσωπικά στοιχεία</legend>

<label for="student-name">Ονοματεπώνυμο:</label>
      <input type="text"
             id="student-name"
             name="studentName"
             required
             minlength="3"
             placeholder="Το όνομά σου">

<label for="student-email">Email:</label>
      <input type="email"
             id="student-email"
             name="studentEmail"
             required
             placeholder="name@example.com">

<label for="student-age">Ηλικία:</label>
      <input type="number"
             id="student-age"
             name="studentAge"
             min="10"
             max="99"
             required>

</fieldset>

<fieldset>
      <legend>Εκπαιδευτικό επίπεδο</legend>

<label for="student-level">Επίλεξε επίπεδο:</label>
      <select id="student-level" name="level" required>
        <option value="">Επίλεξε επίπεδο</option>
        <option value="beginner">Beginner</option>
        <option value="intermediate">Intermediate</option>
        <option value="advanced">Advanced</option>
      </select>

</fieldset>

<fieldset>
      <legend>Τεχνολογίες ενδιαφέροντος</legend>

<label class="choice">
        <input type="checkbox" name="technology" value="javascript">
        JavaScript
      </label>

</fieldset>

<fieldset>
      <legend>Επιπλέον πληροφορίες</legend>

<label for="student-message">Μήνυμα:</label>
   <textarea id="student-message"
          name="message"
          rows="4"
          placeholder="Γράψε λίγα λόγια για εσένα...">

Δοκιμή εμφάνισης μηνύματος

Sharing practical coding lessons in HTML, CSS, JavaScript, and AngularJS 1.x. Learn by experimenting, building, and writing code.

Open Playground

HTML-009 — HTML Forms: Προηγμένες φόρμες και σύγχρονα πεδία εισαγωγής