Υποενότητα 9.1: Το HTML των φορμών

Η λειτουργία μιας φόρμας

Όταν υποβάλλετε μια φόρμα, οι πληροφορίες που προσθέσατε μεταβιβάζονται από το πρόγραμμα περιήγησης στο διακομιστή.
Οι φόρμες είναι το "front-end" για τον  "HTTP Client"  που στέλνει πληροφορίες στον HTTP Server.

1. Ο χρήστης συμπληρώνει μια φόρμα και την υποβάλλει
2. Το πρόγραμμα περιήγησης στέλνει τα δεδομένα της φόρμας στο διακομιστή
3. Ο διακομιστής λαμβάνει τα δεδομένα, τα επεξεργάζεται και στέλνει μια απάντηση
4. Το πρόγραμμα περιήγησης εμφανίζει την απάντηση

Δομή μιας φόρμας

Ο παρακάτω κώδικας δείχνει τη βασική δομή μιας φόρμας:

<form action="destination" method="get or post">
   . . . form elements go here . . .
   <input type="submit">
</form>

• action="destination" ορίζει τον ιστότόπο όπου τα δεδομένα πρόκειται να σταλούν όταν ο χρήστης κάνει κλικ στο κουμπί αποστολής (submit button).
• method="get": οι πληροφορίες που αποστέλλονται στο διακομιστή θα είναι ορατές στη γραμμή URL
• method="post": οι πληροφορίες που αποστέλλονται στο διακομιστή ως μέρος του σώματος HTTP. δεν είναι ορατές στη διεύθυνση URL. Η Post είναι μια καλύτερη επιλογή για τη διατήρηση μυστικών
• <input type="submit">: ορίζει ένα κουμπί υποβολής (για την υποβολή της φόρμας)

Περισσότερες πληροφορίες: https://www.w3schools.com/html/html_forms.asp

Το στοιχείο input

Το στοιχείο <input> έχει πολλούς ρόλους και ως εκ τούτου είναι σημαντικό για τις φόρμες.
Το στοιχείο <input> αλλάζει τον τρόπο εμφάνισής του σύμφωνα με τον τύπο (type attribute) του .

Examples

Μερικά στοιχεία ακόμα

Το στοιχείο εισόδου δεν είναι το μοναδικό στοιχείο στις φόρμες. Μερικά παραδείγματα άλλων στοιχείων είναι:

Παραδείγματα

Πώς μπορώ να δω τις καταχωρήσεις μιας υποβληθείσας φόρμας;

Συμπληρώστε τη φόρμα στο ακόλουθο αρχείο:

HTML forms

Ελέγξτε την κονσόλα.log του αρχείου. Μπορείτε να δείτε τα αποτελέσματα της υποβολής.

Έχουμε χρησιμοποιήσει κώδικα JavaScript για να τραβήξουμε και να εμφανίσουμε τα αποτελέσματα αντί να χρησιμοποιήσουμε έναν WEB Server!

Form input ιδιότητες - attributes

Η ιδιότητα- attribute name 

Κάθε πεδίο εισαγωγής πρέπει να έχει ένα χαρακτηριστικό όνομα- name για να υποβληθεί η τιμή του.
Οι πληροφορίες σε πεδία που δεν έχουν χαρακτηριστικό όνομα δεν διαβιβάζονται κατά την υποβολή μιας φόρμας.

Έτσι, η πιο απλή είσοδος θα ήταν:

<input  type="text" name="firstname"/>

Άλλες ιδιότητες 

autofocus: θα εμφανίσει την "εστίαση - focus" του δρομέα σε αυτό το πεδίο όταν φορτώνεται η σελίδα. Συνήθως επιλέγουμε να εστιάσουμε στο πρώτο πεδίο εισαγωγής της φόρμας,

<input  type="text" name="firstname" autofocus="autofocus"/>

value: καθορίζει την αρχική τιμή για ένα πεδίο εισαγωγής,

<input  type="text" name="firstname"  value="Vasilis"/>

 size: καθορίζει το μέγεθος (πλήθος χαρακτήρων) για το πεδίο εισαγωγής,

<input  type="text" name="firstname"  value="Vasilis" size="50"/>

placeholder: ένα παράδειγμα ή μια σύντομη περιγραφή των πληροφοριών που θέλουμε να συμπληρώσει ο χρήστης,

<input  type="text" name="firstname"   placeholder="Your name goes here"/>

minlength: καθορίζει το ελάχιστο επιτρεπτό μήκος (πλήθος χαρακτήρων) για το πεδίο εισαγωγής, 

<input  type="text" name="firstname"  placeholder="Your name goes here"  minlength="5"/> 

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

<input  type="text" name="firstname"  placeholder="Your name goes here"  minlength="10" required/>

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

Περισσότερες πληροφορίες: https://www.w3schools.com/html/html_form_attributes.asp

Προσβασιμότητα - Accessibility: Το στοιχείο Label

Οι Labels είναι σημαντικές για προσβάσιμες και εύχρηστες φόρμες.

Όταν προσθέτετε μια ετικέτα- label δεν βλέπετε καμία αλλαγή στη σελίδα HTML. Δεν είναι εύκολο να κατανοήσουμε τη λειτουργία της παρατηρώντας την έξοδο HTML.

Η σημασία της ετικέτας label έγκειται στο γεγονός ότι μας επιτρέπει να χρησιμοποιούμε σήμανση- markup για τη δημιουργία πιο προσβάσιμων / φιλικών προς το χρήστη πεδίων φόρμας.

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

Labels - Γιατί;

• Συνδέει το κείμενο με στοιχεία εισόδου input
• Βοηθάει τους αναγνώστες οθόνης- screen readers!
• Βοηθά με τα "clicks" και "touch" στις οθόνες!

Labels - Πώς;

• id value attribute στην input
• Στοιχείο label για την input label
• for attribute στην label για να συνδεθεί η label με την input μέσω του id

<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" placeholder="Your name goes here" minlength="10" required/>

First name:

Grouping Form Data

Το στοιχείο <fieldset> χρησιμοποιείται για την ομαδοποίηση ομοειδών δεδομένων σε μια φόρμα. Σχεδιάζει ένα κουτί γύρω από αυτά τα στοιχεία.

Το στοιχείο <legend> χρησιμοποιείται για τον ορισμό μιας λεζάντας για το στοιχείο <fieldset>.

<fieldset>
   <legend>
       Please, fill in the following information:
    </legend>
    <label for="firstname">First name:</label> 
       <input type="text" name="firstname" id="firstname" 
          placeholder="Your name goes here" 
          size="20" autofocus="autofocus" required/> <br><br>
    <label for="secretword">Your password:</label> 
       <input type="password" name="secretword" id="secretword" 
          placeholder="Your password goes here" 
          size="20" required/><br><br>
 </fieldset>

Άσκηση

Άσκηση

1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice09.1.html στον φάκελο "Exercises".
2. Αντιγράψτε τον κατάλληλο κώδικα (form- input text- input password- textarea- fieldset) aκαι επικολλήστε τον στο νέο αρχείο.
3. Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση: