Σύνδεση
Μενού

Φόρμες στην HTML

Σε ένα έγγραφο HTML μπορείτε αν θέλετε να δημιουργήσετε φόρμες που είναι χρήσιμες για την εισαγωγή δεδομένων από τον τελικό χρήστη και την αποστολή αυτών των δεδομένων στον Server σας για επεξεργασία.

Μια φόρμα μπορεί να περιέχει στοιχεία εισόδου, όπως είναι τα πεδία κειμένου, στοιχεία επιλογής (checkbox και radio buttons), κουμπιά (υποβολής, επαναφοράς της φόρμας κα) και άλλα. Μεταξύ αυτών των στοιχείων μια φόρμα μπορεί να περιέχει επίσης λίστες επιλογής, περιοχές κειμένου, ετικέτες κα.

Ένα παράδειγμα φόρμας είναι το ακόλουθό:

<form>
…
Στοιχεία της φόρμας
…</form>

Φόρμες στην HTML και στοιχεία εισόδου

Το ποιο σημαντικό στις φόρμες είναι τα πεδία εισαγωγής δεδομένων. Τα στοιχεία εισαγωγής δεδομένων χρησιμοποιούνται από τον τελικό χρήστη για να εισάγει τις απαραίτητες για τη φόρμα πληροφορίες.

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

Πεδία κειμένου

Τα πεδία κειμένου ορίζονται με την ετικέτα <input type=”text” />. Τα πεδία αυτά επιτρέπουν στον χρήστη να εισάγει κείμενο σε μία μόνο γραμμή. Δείτε ένα παράδειγμα με πεδία κειμένου:

<form>
Όνομα : <input type=”text” name=”first_name” /<br />
Επώνυμο : <input type=”text” name=”last_name” />
</form>

Δείτε το παράδειγμα ζωντανά

Σημείωση : Η ετικέτα φόρμας δεν έχει κάποια οπτική αναπαράσταση, οπότε μην περιμένετε να δείτε τη φόρμα να εμφανίζεται στον περιηγητή σας. Το μόνο που μπορείτε να δείτε σε μία φόρμα είναι τα στοιχεία τα οποία περιβάλει.

Πεδίο κωδικού πρόσβασης

Υπάρχουν φόρμες στις οποίες πρέπει ο χρήστης να εισάγει ευαίσθητα δεδομένα, όπως είναι για παράδειγμα ένας κωδικός πρόσβασης. Για να δημιουργήσετε ένα πεδίο κωδικού πρόσβασης θα πρέπει να χρησιμοποιήσετε την ετικέτα <input type=”password” /> όπως συμβαίνει με το παράδειγμα που ακολουθεί:

<form>
Κωδικός πρόσβασης : <input type=”password” name=”pswd” />
</form>

Δείτε το παράδειγμα ζωντανά

Κουμπιά radio

Τα κουμπιά radio επιτρέπουν στον χρήστη να επιλέξει μόνο μια τιμή ανάμεσα από μια ομάδα τιμών . Για να δημιουργήσετε ένα radio button θα πρέπει να χρησιμοποιήσετε την ετικέτα <input type=”radio” /> όπως στο παράδειγμα που ακολουθεί:

<form>
<input type=”radio” name=”sex” value=”boy” /> Αγόρι<br />
<input type=”radio” name=”sex” value=”female” /> Κορίτσι
</form>

Δείτε το παράδειγμα ζωντανά

Checkboxes

Τα chackboxes επιτρέπουν στον χρήστη να επιλέξει περισσότερες από μια επιλογές μέσα από μια ομάδα επιλογών. Για να δημιουργήσετε μια ομάδα στοιχείων checkbox θα πρέπει να χρησιμοποιήσετε την ετικέτα <input type=”checkbox” /> όπως στο παράδειγμα που ακολουθεί:

<form>
<input type=”checkbox” name=”services” value=”web_hosting” />Web Hosting<br />
<input type=”checkbox” name=”services” value=”domain_name” />Domain name<br />
<input type=”checkbox” name=”services” value=”dedicated_server” />Dedicated Server<br />
<input type=”checkbox” name=”services” value=”vps” />Virtual Private Server<br />
</form>

Δείτε το παράδειγμα ζωντανά

Κουμπιά υποβολής

Τα κουμπιά υποβολής είναι ειδικά κουμπιά μέσα σε μια φόρμα, που όταν ο χρήστης κάνει κλικ σε αυτά, η φόρμα υποβάλει τα δεδομένα της στον web server. Τα δεδομένα θα σταλούν στη διεύθυνση που υποδεικνύει η ιδιότητα action της ετικέτας form. Επίσης τα δεδομένα θα σταλούν στον Server με χρήση της μεθόδου που έχετε ορίσει στην ιδιότητα method της ετικέτας <form>.

Στο παράδειγμα που ακολουθεί έχουμε δημιουργήσει μια φόρμα με ορισμένες τις ιδιότητες action και method, και στο εσωτερικό της έχουμε βάλει ένα πεδίο κειμένου και ένα κουμπί υποβολής.

<form action=”http://www.stigmahost.com/” method=”get”>
Αναζήτηση στο blog της StigmaHost: <input type=”text” name=”s” />
<input type=”submit” value=”Αναζήτηση” />
</form>

Δείτε το αποτέλεσμα ζωντανά

Αν χρησιμοποιήσετε την παραπάνω φόρμα, τότε τα στοιχεία που θα εισάγετε στο πεδίο θα υποβληθούν στην σελίδα της StigmaHost για αναζήτηση στο ιστολόγιο της.

[COL size=”one_half”]« Λίστες στην HTML[/COL] [COL size=’one_half’ last=’last’]

HTML Frames »

[/COL]