Λύσεις — Εφαρμογή 12 · Δεδομένα σε… φόρμα (σελ. 61–68) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Λύσεις — Εφαρμογή 12 · Δεδομένα σε… φόρμα (σελ. 61–68)

Ο κώδικας-λύση και ασκήσεις (form action/method, input types, radio vs checkbox, select/textarea, ρόλος name). Γλώσσα HTML5.

Ο κώδικας-λύση της Εφαρμογής 12

Ερώτηση: Φτιάξτε φόρμα παραγγελίας με πεδίο ονόματος, ομάδα radio για μέγεθος, checkbox για extra, dropdown πόλης και κουμπί υποβολής.

Απάντηση:

• Small
• Medium
• Επιπλέον τυρί
• ΑθήναΘεσσαλονίκη

Σύνοψη: (ενδεικτική) form action/method + input text, radio (ίδιο name, ομάδα), checkbox, select/option, submit.

Κριτήρια αξιολόγησης:

• Κριτήριο:
  με action/method + σωστά controls (text/radio/checkbox/select/submit).

Το στοιχείο form

Ερώτηση: Ποιες οι βασικές παράμετροι του και τι κάνει η καθεμία;

Απάντηση:

• action: το URL του προγράμματος στον server που θα υποδεχθεί τα δεδομένα.
• method: η μέθοδος αποστολής — post (αόρατα, στο σώμα) ή get (ορατά, στο URL).
• name: το όνομα της φόρμας.

Σύνοψη: (ενδεικτική) action: URL προορισμού (server). method: post (αόρατα) ή get (στο URL). name: όνομα φόρμας.

Κριτήρια αξιολόγησης:

• Κριτήριο: action (πού) + method (post/get) + διαφορά τους.

radio vs checkbox

Ερώτηση: Ποια η διαφορά radio button από checkbox; Γιατί τα radio μιας ομάδας έχουν το ίδιο name;

Απάντηση:

• radio (type="radio"): επιτρέπει μία επιλογή από ομάδα. checkbox: επιτρέπει πολλές ταυτόχρονα.
• Τα radio μιας ομάδας έχουν το ίδιο name ώστε να είναι αμοιβαία αποκλειόμενα (επιλέγοντας ένα, ακυρώνεται το προηγούμενο)· το value διαφέρει για να ξέρει ο server ποιο επιλέχθηκε.

Σύνοψη: (ενδεικτική) radio: μία επιλογή (ίδιο name = ομάδα αμοιβαία αποκλειόμενη). checkbox: πολλές επιλογές. Το value ξεχωρίζει την επιλογή.

Κριτήρια αξιολόγησης:

• Κριτήριο: μία (radio) vs πολλές (checkbox) + ίδιο name = ομάδα.

Είδη controls ΚΑΙ name

Ερώτηση: Αναφέρετε τέσσερα είδη στοιχείων εισαγωγής μιας φόρμας και γιατί χρειάζεται το name.

Απάντηση:

• <input type="text"> (κείμενο), type="submit" (υποβολή), <select>/<option> (αναδιπλούμενη λίστα), <textarea> (περιοχή κειμένου πολλών γραμμών)· επίσης radio/checkbox/password.
• Το name χρειάζεται γιατί το ζεύγος name=value «ταξιδεύει» στον server — έτσι ξέρει σε ποιο πεδίο ανήκει κάθε τιμή.

Σύνοψη: (ενδεικτική) Π.χ. input text, submit, select/option, textarea (και radio/checkbox). Το name στέλνει το ζεύγος name=value στον server.

Κριτήρια αξιολόγησης:

• Κριτήριο: ≥4 controls + ρόλος του name (name=value προς server).