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

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

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

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

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

Απάντηση:

<form action="process.php" method="post">
  <input type="text" name="onoma" size="20" placeholder="Όνομα">
  <input type="radio" name="megethos" value="S"> Small
  <input type="radio" name="megethos" value="M"> Medium
  <input type="checkbox" name="tyri" value="ναι"> Επιπλέον τυρί
  <select name="poli"><option value="ath">Αθήνα</option><option value="thes">Θεσσαλονίκη</option></select>
  <input type="submit" value="Αποστολή">
</form>

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

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

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

Το στοιχείο form

Ερώτηση: Ποιες οι βασικές παράμετροι του <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).