Πώς θα δημιουργήσετε μια φόρμα HTML;

Για τη δημιουργία μιας φόρμας HTML, θα χρησιμοποιήσω το στοιχείο <form>. Μέσα σε αυτό θα τοποθετηθούν στοιχεία ελέγχου, όπως πεδία κειμένου (<input type="text">), πεδία κωδικού πρόσβασης (<input type="password">), πλαίσια επιλογής (<input type="checkbox">), κουμπιά ραδιοφώνου (<input type="radio">), αναδυόμενα μενού (<select> και <option>), περιοχές κειμένου (<textarea>) και κουμπιά αποστολής (<button type="submit"> ή <input type="submit">).

Κάθε στοιχείο της φόρμας θα έχει ένα χαρακτηριστικό name για την ταυτοποίησή του στην πλευρά του διακομιστή και, γενικά, ένα χαρακτηριστικό id για να συσχετιστεί με μια ετικέτα (<label>).

Χαρακτηριστικά του <form>:

• action: URL στο οποίο θα αποστέλλονται τα δεδομένα της φόρμας κατά την υποβολή.
• method: Μέθοδος HTTP για την αποστολή δεδομένων (GET ή POST).
• enctype: Τύπος κωδικοποίησης δεδομένων κατά την αποστολή (π.χ., multipart/form-data για μεταφόρτωση αρχείων).

Παράδειγμα απλής φόρμας:

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

  <label for="password">Κωδικός πρόσβασης:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Να με θυμάσαι</label><br><br>

  <label for="country">Χώρα:</label><br>
  <select id="country" name="country">
    <option value="ru">Ρωσία</option>
    <option value="us">ΗΠΑ</option>
  </select><br><br>

  <label for="message">Μήνυμα:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

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

Ο έλεγχος εγκυρότητας της φόρμας μπορεί να υλοποιηθεί τόσο στην πλευρά του πελάτη (με χρήση χαρακτηριστικών HTML5, JavaScript) όσο και στην πλευρά του διακομιστή.

Χαρακτηριστικά HTML5 για έλεγχο εγκυρότητας:

• required: Υποχρεωτικό πεδίο.
• minlength, maxlength: Ελάχιστο και μέγιστο μήκος κειμένου.
• min, max: Ελάχιστη και μέγιστη τιμή για αριθμητικά πεδία.
• type με διάφορες τιμές (email, url, number, date κ.ά.) για αυτόματο έλεγχο από το πρόγραμμα περιήγησης.
• pattern: Κανονική έκφραση για επαλήθευση εισόδου.

Παράδειγμα με χρήση HTML5 validation:

<form action="/submit-form" method="post">
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Ηλικία (από 18 έως 99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Τ.Κ. (5 ψηφία):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

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

Για το στυλ της φόρμας θα χρησιμοποιηθεί CSS. Για πιο πολύπλοκη λογική ή ασύγχρονη αποστολή δεδομένων θα χρησιμοποιηθεί JavaScript. Για την βελτίωση της προσβασιμότητας της φόρμας θα χρησιμοποιηθούν κατάλληλα ARIA χαρακτηριστικά και σωστή δομή HTML.