☰

Στοιχεία φόρμας

Τα στοιχεία φόρμας, τα οποία κατά κανόνα εισάγονται σε μια φόρμα, χρησιμοποιούνται για να μπορεί ο χρήστης να εισαγάγει κάποια στοιχεία ή να κάνει κάποιες επιλογές και στη συνέχεια να αποστέλλει τα δεδομένα αυτά σε κάποιον εξυπηρετητή (server). Η επεξεργασία των δεδομένων αυτών απαιτεί τη χρήση κάποιου σκριπτ όπως php, asp, jsp κ.λπ. απο τη μεριά του εξυπηρετητή.

Τα στοιχεία html τα οποία χρησιμοποιούνται για τη δημιουργία μιας φόρμας λέγονται στοιχεία φόρμας.

Αυτά είναι:

• Κουμπί (button)
• Πλαίσιο ελέγχου (check box)
• Εικόνα (image)
• Κωδικός (password)
• Κουμπί επιλογής (radio button)
• Κουμπί επαναφοράς (reset button)
• Κουμπί υποβολής (submit button)
• Γραμμή κειμένου (text field)
• Πεδίο κειμένου (text area)
• Κρυφό αρχείο (Hidden file)
• Αρχείο (file)
• Ετικέτα (label)
• Αναδυόμενη λίστα (pop up list)

Η ετικέτα <input>

Η εισαγωγή των περισσότερων στοιχείων φόρμας σε ένα έγγραφο html γίνεται με την ετικέτα <input>. Οι ιδιότητες που δέχεται η ετικέτα αυτή, καθορίζουν το είδος αλλά και τη μορφή ενός στοιχείου φόρμας.

Ιδιότητες της ετικέτας <input>

Οι ιδιότητες της ετικέτας <input> είναι:

• type
• value
• name
• checked
• size
• maxlength
• disabled
• readonly
• placeholder

Επεξήγηση ιδιοτήτων

Μία από τις πιο βασικές ιδιότητες που δέχεται η ετικέτα <input> είναι η type. Η ιδιότητα αυτή ορίζει το είδος του στοιχείου φόρμας. Δείτε την αναλυτική περιγραφή των ιδιοτήτων της ετικέτας <input> και τα παραδείγματα που ακολουθούν.

type Όπως προαναφέρθηκε, είναι η πιο βασική ιδιότητα. Για να εισαγάγετε ένα κουμπί για παράδειγμα, πληκτρολογείτε τον παρακάτω κώδικα.

<input type="button">

Εκτός από το στοιχείο button, η ιδιότητα type μπορεί να δεχτεί και τις παρακάτω τιμές. Κάθε μια από τις παρακάτω τιμές αντιστοιχεί σε ένα διαφορετικό στοιχείο φόρμας.

• text
• checkbox
• image
• password
• radio
• reset
• submit
• text
• hidden
• file

Έτσι, για να προσθέσετε το στοιχείο φόρμας text στο έγγραφό σας, πληκτρολογείτε τον κώδικα όπως φαίνεται στο παράδειγμα.

<form> <input type="text"> </form>

placeholder Εμφανίζει μια υπόδειξη με γκρι γράμματα.

<form><input type="text" placeholder="email"></form>

value Ορίζει μια αρχική τιμή την οποία θέλετε να εμφανίζεται στο στοιχείο φόρμας.

<form> <input type="button" value="Κάντε κλικ εδώ" > </form>

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

<form>Συμφωνείτε; <input type="checkbox" name="check_1" > </form>

Η ιδιότητα name χρησιμοποιείται επίσης σε λογικές ομάδες στοιχείων όπως τα κουμπιά επιλογής (radio buttons) όπου μόνο μία επιλογή από τις πολλές μπορεί να γίνει αποδεκτή. Όταν έχετε δύο ή περισσότερα κουμπιά επιλογής, για να επιλέγεται μόνο το ένα από τα πολλά, θα πρέπει όλα τα κουμπιά να έχουν την ίδια τιμή στην ιδιότητα name.

<form>
  Άνδρας:<input type="radio" name="checksex">
  <br>
  Γυναίκα:<input type="radio" name="checksex">
</form>

checked Ισχύει μόνο για τα κουμπιά επιλογής (radio buttons) και τα πλαίσια ελέγχου (check boxes) και ορίζει εάν κάποιο από τα στοιχεία αυτά θα είναι προεπιλεγμένο μόλις εμφανιστεί το έγγραφο html στο πρόγραμμα περιήγησης.

<form>
  Άνδρας:<input type="radio" name="checksex" checked >
  <br>
  Γυναίκα:<input type="radio" name="checksex">
</form>

size Ορίζει το πλάτος (σε αριθμό χαρακτήρων) μιας γραμμής κειμένου, ενός πεδίου κειμένου ή ενός κωδικού.

<form>
  Όνομα: <input type="text" size="20" >
</form>

maxlength Ορίζει το μέγιστο αριθμό χαρακτήρων που μπορεί να πληκτρολογήσει ένας χρήστης σε μια γραμμή κειμένου, σε έναν κωδικό ή σε ένα πεδίο κειμένου.

<form>
  Κωδικός (μέχρι 6 χαρακτήρες): <input type="password" maxlength="6" >
</form>

disabled Εμφανίζει ένα στοιχείο φόρμας απενεργοποιημένο. Στα απενεργοποιημένα στοιχεία δεν μπορείτε να κάνετε αλλαγές.

<form>
  <input type="text" size="20" value="Όνομα" disabled>
</form>

readonly Ορίζει ένα στοιχείο φόρμας σαν readonly. Αυτό σημαίνει ότι ο χρήστης μπορεί να διαβάσει ή να αντιγράψει τα περιεχόμενα ενός στοιχείου, αλλά δεν μπορεί να τα αλλάξει.

<form>
  <input type="text" size="20" value="Αθήνα" readonly>
</form>

file Το στοιχείο file προσθέτει στη φόρμα μία γραμμή κειμένου και ένα κουμπί με την ένδειξη "browse…" (Αναζήτηση ...). Πατώντας το κουμπί αυτό εμφανίζεται το παράθυρο επιλογής αρχείου. Μέσα από το παράθυρο αυτό μπορείτε να επιλέξετε ένα αρχείο του οποίου το όνομα θα εμφανιστεί στη γραμμή κειμένου. Με αυτόν τον τρόπο επιλέγετε γρήγορα, εύκολα και με ασφάλεια τη διαδρομή και το όνομα κάποιου αρχείου από το δίσκο σας. Το αρχείο αυτό επιλέγεται για να αποσταλεί (upload) σε κάποιον εξυπηρετητή.

<form>
  <input type="file">
</form>

reset Το κουμπί reset επαναφέρει τις αρχικές τιμές των στοιχείων μιας φόρμας και λειτουργεί μόνο όταν βρίσκεται μέσα σε μια φόρμα. Εάν αλλάξετε τα περιεχόμενα της γραμμής κειμένου και στη συνέχεια κάνετε κλικ στο κουμπί reset, θα επανέλθει το αρχικό κείμενο.

<form>
  <input type="text" value="Σημειώσεις">
  <input type="reset" value="Επαναφορά">
</form>

submit Το κουμπί submit αποστέλλει τις τιμές των στοιχείων στον εξυπηρετητή. Όπως το κουμπί reset έτσι και το κουμπί submit λειτουργεί μόνο όταν βρίσκεται μέσα σε μια φόρμα.

<form>
  Όνομα: <input type="text" size="20">
  Επίθετο: <input type="text" size="20">
  <input type="submit" value="Αποστολή">
</form>

Η ετικέτα textarea

Mε την ετικέτα textarea μπορείτε να δημιουργήσετε ένα πεδίο κειμένου με πολλές γραμμές.

Η ετικέτα textarea συνοδεύεται από δύο βασικές ιδιότητες. Η μία είναι η cols η οποία καθορίζει το πλάτος του πεδίου σε χαρακτήρες και η rows η οποία καθορίζει τον αριθμό των στηλών.

<form>
<textarea name="textarea" rows="5" cols="50">Γράψτε κάτι εδώ ...</textarea>
</form>