Forms (HTML)

Forms (HTML)

​Βασικά στοιχεία

Η ετικέτα Form

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

<form>

…στοιχεία html φόρμας …

</form>

Για να λειτουργήσει η φόρμα χρειάζεται να οριστούν κάποιες ιδιότητες της μέσα στην ετικέτα της φόρμας, την form.

Τι κάνει μία φόρμα

Ο σκοπός της φόρμας είναι η συλλογή και η αποστολή των στοιχείων της. Η αποστολή γίνεται όταν πατηθεί στο τέλος της φόρμας του κουμπί Αποστολή. Η ενέργεια της αποστολής ονομάζεται Submit

Multiple Choice

Ποια ετικέτα χρησιμοποιώ για την αποστολή στοιχείων του πελάτη προς το Server

• SEND

• DATA

• FROM

• FORM

Που θα πάνε τα δεδομένα ?

Η ιδιότητα action ορίζει την ενέργεια την οποία θα εκτελεστεί όταν πατηθεί το κουμπί αποστολής της φόρμας. Η συνηθισμένη ενέργεια είναι η αποστολή των στοιχείων της φόρμας στον server. Αυτό γίνεται με την κλήση ενός αρχείου, συνήθως σε .php μορφή.

<form action="action_page.php">

Σε αυτό το παράδειγμα βλέπουμε ότι ορίζεται με την ιδιότητα action το αρχείο action_page.php. Όταν πατηθεί δηλαδή το κουμπί αποστολής της φόρμας, θα ανοίξει αυτό το αρχείο μέσα στο οποίο θα καταχωρηθούν και θα γίνει η επεξεργασία των στοιχείων της φόρμας. Εάν δεν χρησιμοποιηθεί η ιδιότητα αυτή, ανοίγει πάλι η ίδια σελίδα.

Multiple Choice

Με την ιδιότητα Action δηλώνω ...

π.χ. <form action="action_page.php">

• ποια συνάρτηση JavaScript θα εκτελεστεί

• ποιο αρχείο θα στείλω στο Server

• ποιο αρχείο θα εκτελεστεί από το Server

• τίποτα από τα παραπάνω

Η ιδιότητα Method

• Method=”POST”: Με την μέθοδο αυτή αποκρύπτει τα δεδομένα. Είναι κατάλληλη για ενημέρωση στοιχείων σε βάση δεδομένων και για αποστολή ευαίσθητων δεδομένων.

• Method=”GET”: Με την μέθοδο αυτή, τα στοιχεία που έχουμε εισάγει στα πεδία της φόρμας θα εμφανιστούν στην περιοχή διεύθυνσης, URL. Είναι σαφές δηλαδή ότι τα στοιχεία δεν αποκρύπτονται. Για τον λόγο αυτόν η μέθοδος αυτή χρησιμοποιείται σε μηχανισμούς αναζήτησης δεδομένων ή αποστολή μη ευαίσθητων δεδομένων.

Multiple Choice

Με τη παρακάτω ετικέτα <form action="welcome.php" method="post"> τα στοιχεία που θα στείλω

• θα είναι ορατά στον χρήστη

• δεν θα είναι ορατά στον χρήστη

• θα ερωτηθεί ο χρήστης

• ανάλογα με τη ρύθμιση του φυλλομετρητή

Το στοιχείο Input

Ο σκοπός μιας φόρμας html είναι η συλλογή πληροφοριών. Για την συλλογή αυτή χρησιμοποιείται, στα περισσότερα πεδία της φόρμας, η ετικέτα <input> ανεξάρτητα από τον τύπο του πεδίου. Η ετικέτα input είναι μονή, δεν έχει δηλαδή ετικέτα κλεισίματος. Ο τύπος του πεδίου ορίζεται με την ιδιότητα type=”” μέσα στην ετικέτα input. Ας δούμε τους σημαντικότερους τύπους πεδίων.

Text

Ο τύπος Text χρησιμοποιείται για την συλλογή στοιχείων μιας γραμμής. Παραδείγματα χρήσης αυτού του τύπου είναι το ονοματεπώνυμο, το email, ο κωδικός εισόδου κ.λ.π.

Εκτός από το Text στην HTML5 υπάρχουν και ειδικοί τύποι ανάλογα με το περιεχόμενο όπως color, date, datetime-local, email, month, number, range, search, tel, time, url, week

Ας δούμε το ακόλουθο παράδειγμα:

Checkbox

Radio

Open Ended

Αν θέλω να φτιάξω μία επιλογή στη φόρμα για να επιλέξω έξτρα υλικά στην πίτσα μου τι θα βάλω

Multiple Choice

Στη χρήση του τύπου Radio είναι βασικό να έχουν όλες οι επιλογές το ίδιο ... για να γίνουν μία ομάδα

• name

• id

• team

• type

Textarea

Όταν θέλουμε να πάρουμε από μια φόρμα κείμενο πολλών γραμμών τότε χρησιμοποιούμε την ετικέτα <textarea>.
Σε αυτή δεν υπάρχει η ιδιότητα type.
Ας δούμε το ακόλουθο παράδειγμα:

Select

Όταν θέλουμε να φτιάξουμε μία λίστα επιλογής χρησιμοποιούμε την ετικέτα <select>.

Βασικές παράμετροι σε αυτήν είναι το size και το multiple.

Για κάθε επιλογή που προσθέτω κάνω χρήση της ετικέτας <option>.

Ας δούμε το ακόλουθο παράδειγμα:

Select

Button

Ο ρόλος του κουμπιού σε μία φόρμα html είναι η αποστολή των δεδομένων εισαγωγής σε ένα αρχείο όταν αυτό έχει οριστεί με την ιδιότητα action της ετικέτας form.
Σε μια φόρμα υπάρχουν συνήθως 2 κουμπιά, ένα για τον καθαρισμό των στοιχείων της και ένα για την αποστολή τους. Ας δούμε το ακόλουθο παράδειγμα:

Open Ended

Με ποιο τύπο (type) δηλώνω στην input να εμφανίσει το κουμπί αποστολής

Multiple Choice

Ποια είναι η σωστή σύνταξη στην HTML για ένα checkbox?

• <checkbox>

• <input type="checkbox">

• <check>

• <input type="check">

Multiple Choice

Ποια είναι η σωστή σύνταξη στην HTML για μία λίστα επιλογής?

• <list>

• <input type="dropdown">

• <input type="list">

• <select>

Multiple Choice

Ποια είναι η σωστή σύνταξη στην HTML για κείμενο πολλών γραμμών?

• <input type="textbox">

• <input type="textarea">

• <textarea>

Παράδειγμα URL με αποστολή δεδομένων με τη μέθοδο GET

Multiple Choice

Στη φόρμα που βλέπετε ποιο τμήμα URL που θα σταλεί στο Server είναι σωστό

• ...welcome.php?name=.....

• ....welcome.php?ΟΝΟΜΑ=...

• ....welcome?name=....

• ....welcome?text=....