Πεδίο κειμένου, Πεδίο κωδικού πρόσβασης, Περιοχή κειμένου, Κουμπιά επιλογών και πολλαπλών επιλογών, Λίστα, Κουπμιά υποβολής και καθαρισμού φόρμας, Άλλα "κουπμιά",
Μια ιστοσελίδα έχει ως πρωταρχικό σκοπό την δημοσίευση πληροφοριών. Αν πάρουμε μια ιστοσελίδα με εκπαιδευτικό περιεχόμενο, για παράδειγμα ένα μάθημα μαθηματικών ή φυσικής του 1 ου εξαμήνου της Σχολής, μπορούμε να το δομήσουμε σύμφωνα με τις διαλέξεις ή με τα κεφάλαια που διδάσκονται, να προβάλλουμε την θεωρία, πρακτικές εφαρμογές, ασκήσεις, κλπ. Είδαμε με το κουίζ πως μπορούμε να κάνουμε ασκήσεις/ερωτήσεις με απαντήσεις πολλαπλών επιλογών όπου πλέον έχουμε αλληλεπίδραση με τον επισκέπτη της ιστοσελίδας. Η σχέση αυτή γίνεται ακόμα πιο αμφίδρομη με την χρήση φόρμας. Οι φόρμες μπορούν να χρησιμοποιηθούν όπως το κουίζ, παρέχοντας την δυνατότητα στον επισκέπτη να έχει ενεργή σχέση με την ιστοσελίδα αλλά και για διαδικασίες όπου ο επισκέπτης δεν επιλέγει απλά μια απάντηση αλλά μπορεί να συμπληρώσει πεδία της φόρμας παρέχοντας στοιχεία, όπως γίνεται όταν σας ζητάμε να κάνετε εγγραφή για το μάθημα ή για την εξέταση του μαθήματος.
Οι ετικέτες που εισάγουν φόρμα είναι:
<FORM>
Στοιχεία εισαγωγής δεδομένων
</FORM>
Τα κυριότερα ορίσματα της ετικέτας <FORM> είναι NAME, METHOD, ACTION.
Το όρισμα NAME μας επιτρέπει, όπως έχουμε δει και σε άλλες περιπτώσεις, να δώσουμε ένα όνομα στη φόρμα έτσι ώστε να μπορούμε να αναφερόμαστε σε αυτήν εάν το θελήσουμε. Καλό είναι να έχουνε ένα NAME για την φόρμα σε κάθε περίπτωση.
Τα άλλα δύο ορίσματα δεν εμπίπτουν στην ύλη του μαθήματος. Πληροφοριακά όμως, το όρισμα METHOD καθορίζει τον τρόπο με τον οποίον στέλνονται τα δεδομένα στον server και παίρνει τιμές
post ή get, ενώ το το όρισμα ACTION είναι ο υπερσύνδεσμος με αρχείο στο server το οποίο συλλέγει τα δεδομένα που καταχωρήθηκαν από τον επισκέπτη.
Πεδίο κειμένου
Το πεδίο κειμένου επιτρέπει την εισαγωγή κειμένου και έχει την παρακάτω μορφή:
<FORM>
ΕΠΩΝΥΜΟ: <INPUT TYPE="TEXT" NAME="EPONYMO" VALUE="Το επώνυμό σας" SIZE="35" MAXLENGTH="33">
</FORM>
και αποτέλεσμα:
Πεδίο κωδικού πρόσβασης
Το πεδίο κωδικού πρόσβασης επιτρέπει την εισαγωγή κωδικού και έχει την παρακάτω μορφή:
<FORM>
ΚΩΔΙΚΟΣ: <INPUT TYPE="PASSWORD" NAME="KODIKOS" SIZE="35" MAXLENGTH="33">
</FORM>
και αποτέλεσμα:
Περιοχή κειμένου
Η περιοχή κειμένου επιτρέπει την εισαγωγή κειμένου και έχει την παρακάτω μορφή:
<FORM>
ΕΙΣΑΓΕΤΕ ΚΑΝΟΝΙΚΟ ΚΕΙΜΕΝΟ: <TEXTAREA NAME="KEIMENO" COLS="30" ROWS="3"></TEXTAREA>
</FORM>
και αποτέλεσμα:
Κουμπιά επιλογών και πολλαπλών επιλογών
Τα κουμπιά επιλογών επιτρέπουν ΜΙΑ μόνο επιλογή και έχουν την παρακάτω μορφή:
<FORM>
ΚΑΤΕΥΘΥΝΣΗ: <INPUT TYPE="RADIO" NAME="KATEFTHYNSI" VALUE="MATHIMATIKO" CHECKED="CHECKED"> ΜΑΘΗΜΑΤΙΚΟ
<INPUT TYPE="RADIO" NAME="KATEFTHYNSI" VALUE="FYSIKO"> ΦΥΣΙΚΟ
</FORM>
και αποτέλεσμα:
<FORM>
ΠΟΙΑ ΜΑΘΗΜΑΤΑ ΕΧΕΤΕ ΕΠΙΛΕΞΕΙ : <INPUT TYPE="CHECKBOX" NAME="ΜΑΤΗΙΜΑΤIKA1" VALUE="1"> ΜΑΘΗΜΑΤΙΚΑ1
<INPUT TYPE="CHECKBOX" NAME="FYSIKI1" VALUE="1"> ΦΥΣΙΚΗ1
<INPUT TYPE="CHECKBOX" NAME="SHETIKOTITA" VALUE="1"> ΘΕΩΡΙΑ ΤΗΣ ΣΧΕΤΙΚΟΤΗΤΑΣ
<INPUT TYPE="CHECKBOX" NAME="OMADES" VALUE="1"> ΘΕΩΡΙΑ ΟΜΑΔΩΝ
</FORM>
και αποτέλεσμα:
Λίστες
Η λίστα επιτρέπει την επιλογή μεταξύ λίστας επιλογών και έχει την παρακάτω μορφή:
<FORM>
ΣΕ ΠΟΙΟ ΕΞΑΜΗΝΟ ΕΙΣΤΕ: <SELECT NAME="EXAMINO" SIZE="4" MULTIPLE>
<OPTION VALUE="8o" SELECTED="SELECTED">8ο εξάμηνο</OPTION>
<OPTION VALUE="10o">10ο εξάμηνο</OPTION>
<OPTION VALUE="12o">12ο εξάμηνο</OPTION>
<OPTION VALUE="14o">14ο εξάμηνο</OPTION>
</SELECT>
</FORM>
και αποτέλεσμα:
Κουπμιά υποβολής και καθαρισμού φόρμας
Τα κουμπιά υποβολής φόρμας και καθαρισμού φόρμας επιτρέπουν αντίχτοιχα την υποβολή των στοιχείων στο server ή την εκκαθάριση της φόρμας και έχουν την παρακάτω μορφή:
<FORM>
<INPUT ...................>
<INPUT ...................>
<BR>
<INPUT TYPE="SUBMIT" NAME="SUBMITFORM" VALUE="ΑΠΟΣΤΟΛΗ">
<INPUT TYPE="RESET" NAME="RESETFORM" VALUE="ΚΑΘΑΡΙΣΜΟΣ ΦΟΡΜΑΣ ">
</FORM>
και αποτέλεσμα:
Άλλα "κουμπιά"
<FORM>
ΒΑΘΜΟΣ: 0 <INPUT TYPE="RANGE" NAME="VATHMOS" MIN="0" MAX="10" VALUE="5"> 10
ΠΕΡΑΣΜΕΝΑ ΜΑΘΗΜΑΤΑ : <INPUT TYPE="NUMBER" NAME="MATHIMATAOK" VALUE="20" ΜΙΝ="0" ΜΑΧ="55">
</FORM>
και αποτέλεσμα:
| Προηγούμενη ενότητα | Επόμενη ενότητα |