Αυτό το κεφάλαιο περιγράφει όλα τα διάφορα στοιχεία φόρμας του HTML.
Μερικά από τα βασικά στοιχεία φόρμας περιλαμβάνουν:
<input>: Ορίζει ένα πεδίο εισαγωγής δεδομένων στη φόρμα, όπως κείμενο, κωδικό πρόσβασης, email, κουμπί υποβολής και πολλά άλλα.<textarea>: Ορίζει ένα πεδίο εισαγωγής πολλών γραμμών για κείμενο.<select>: Ορίζει ένα αναπτυσσόμενο μενού για την επιλογή από μια λίστα επιλογών.<option>: Ορίζει μια επιλογή εντός του αναπτυσσόμενου μενού.<button>: Ορίζει ένα κουμπί στη φόρμα.<fieldset>: Ορίζει μια ομάδα στοιχείων φόρμας μέσα σε ένα πλαίσιο.<legend>: Ορίζει τον τίτλο για ένα πλαίσιο (<fieldset>).<label>: Ορίζει ένα ετικέτα για ένα στοιχείο φόρμας.<datalist>: Ορίζει μια λίστα επιλογών για ένα πεδίο εισαγωγής δεδομένων.<optgroup>: Ορίζει μια ομάδα συσχετισμένων επιλογών εντός ενός αναπτυσσόμενου μενού.
Αυτά είναι μερικά από τα βασικά στοιχεία φόρμας στη γλώσσα HTML. Κάθε στοιχείο έχει διάφορες επιλογές και χαρακτηριστικά που μπορούν να προσαρμοστούν για να πετύχουν τις απαιτήσεις της εφαρμογής σας.
Ένα από τα πιο συχνά χρησιμοποιούμενα στοιχεία φόρμας είναι το στοιχείο <input>.
Το στοιχείο <input> μπορεί να εμφανιστεί με διάφορους τρόπους, ανάλογα με το γνώρισμα τύπου (type attribute) που χρησιμοποιείται.
Ορισμένοι από τους κοινούς τύπους του στοιχείου <input> είναι:
- text: Εμφανίζει ένα πεδίο κειμένου μιας γραμμής.
- password: Εμφανίζει ένα πεδίο κειμένου για κωδικό πρόσβασης, αποκρύπτοντας τους χαρακτήρες που πληκτρολογούνται.
- email: Εμφανίζει ένα πεδίο κειμένου για εισαγωγή email.
- number: Εμφανίζει ένα πεδίο κειμένου για αριθμητική εισαγωγή.
- checkbox: Εμφανίζει ένα πλαίσιο επιλογής για την επιλογή/αποεπιλογή ενός στοιχείου.
- radio: Εμφανίζει ένα κουμπί επιλογής για την επιλογή ενός στοιχείου από μια λίστα αποκλειστικών επιλογών.
- submit: Εμφανίζει ένα κουμπί υποβολής για την υποβολή της φόρμας.
- button: Εμφανίζει ένα προσαρμόσιμο κουμπί που μπορεί να εκτελέσει προσαρμοσμένες ενέργειες.
Με τη χρήση του γνωρίσματος τύπου, μπορείτε να προσαρμόσετε την εμφάνιση και τη λειτουργικότητα του στοιχείου <input> για να παρέχει την επιθυμητή λειτουργία στους χρήστες.
Το στοιχείο <label> ορίζει μια ετικέτα για πολλά στοιχεία φόρμας.
Το στοιχείο <label> είναι χρήσιμο για τους χρήστες που χρησιμοποιούν οθόνες ανάγνωσης (screen-readers), καθώς η οθόνη ανάγνωσης θα διαβάσει δυνατά την ετικέτα όταν ο χρήστης επικεντρώνεται στο στοιχείο εισαγωγής (input element).
Επιπλέον, το στοιχείο <label> βοηθά τους χρήστες που έχουν δυσκολία στο να κάνουν κλικ σε πολύ μικρές περιοχές (όπως κουμπιά radio ή πλαίσια επιλογής), καθώς όταν ο χρήστης κάνει κλικ στο κείμενο μέσα στο στοιχείο <label>, αυτό εναλλάσσει την κατάσταση του κουμπιού radio ή του πλαισίου επιλογής.
Το γνώρισμα “for” της ετικέτας <label> πρέπει να είναι ίσο με το γνώρισμα “id” του στοιχείου <input> για να τα συνδέσει μεταξύ τους.
[adinserter block=”2″]
Το στοιχείο <select> ορίζει ένα αναπτυσσόμενο μενού (drop-down list):
<select> <option value="option1">Επιλογή 1</option> <option value="option2">Επιλογή 2</option> <option value="option3">Επιλογή 3</option> </select>
Το στοιχείο <select> περιέχει μια σειρά από στοιχεία <option> τα οποία αντιπροσωπεύουν τις επιλογές στο αναπτυσσόμενο μενού. Ο χρήστης μπορεί να επιλέξει μια από τις επιλογές που παρέχονται στο μενού.
Κάθε στοιχείο <option> έχει ένα γνώρισμα “value” που καθορίζει την τιμή που θα αποσταλεί στον διακομιστή όταν ο χρήστης επιλέξει αυτήν την επιλογή. Το κείμενο που εμφανίζεται μέσα στο στοιχείο <option> αντιπροσωπεύει την επιλογή που εμφανίζεται στο αναπτυσσόμενο μενού.
Μπορείτε να χρησιμοποιήσετε το γνώρισμα “selected” στο στοιχείο <option> για να ορίσετε μια προεπιλεγμένη επιλογή στο αναπτυσσόμενο μενού.
Το στοιχείο <option> ορίζει μια επιλογή που μπορεί να επιλεγεί.
Από προεπιλογή, η πρώτη επιλογή στη λίστα αναπτύσσεται επιλεγμένη.
Για να ορίσετε μια προεπιλεγμένη επιλογή, προσθέστε το γνώρισμα “selected” στο στοιχείο <option>:
<select> <option value="option1">Επιλογή 1</option> <option value="option2" selected>Επιλογή 2</option> <option value="option3">Επιλογή 3</option> </select>
Στο παραπάνω παράδειγμα, η επιλογή “Επιλογή 2” έχει το γνώρισμα “selected”, οπότε θα εμφανιστεί αρχικά επιλεγμένη στο αναπτυσσόμενο μενού.
Χρησιμοποιήστε το γνώρισμα “size” για να καθορίσετε τον αριθμό των ορατών τιμών στο αναπτυσσόμενο μενού:
<select size="3"> <option value="option1">Επιλογή 1</option> <option value="option2">Επιλογή 2</option> <option value="option3">Επιλογή 3</option> <option value="option4">Επιλογή 4</option> </select>
Στο παραπάνω παράδειγμα, το γνώρισμα “size” του στοιχείου <select> ορίζεται ως “3”, οπότε τρεις επιλογές θα είναι ορατές ταυτόχρονα στο αναπτυσσόμενο μενού. Οι επιπλέον επιλογές θα εμφανίζονται μόνο όταν ο χρήστης ανοίγει το μενού.,
Χρησιμοποιήστε το γνώρισμα “multiple” για να επιτρέψετε στον χρήστη να επιλέξει περισσότερες από μία τιμές από το αναπτυσσόμενο μενού:
<select multiple> <option value="option1">Επιλογή 1</option> <option value="option2">Επιλογή 2</option> <option value="option3">Επιλογή 3</option> </select>
Με τη χρήση του γνωρίσματος “multiple”, ο χρήστης μπορεί να επιλέξει περισσότερες από μία επιλογές πατώντας το πλήκτρο Ctrl (σε Windows) ή το πλήκτρο Command (σε Mac) κατά την επιλογή των τιμών.
Αξίζει να σημειωθεί ότι η προβολή του αναπτυσσόμενου μενού με πολλαπλή επιλογή εξαρτάται από το περιβάλλον περιήγησης (browser) και τη συσκευή που χρησιμοποιεί ο χρήστης.
[adinserter block=”3″]
Το στοιχείο <textarea> ορίζει ένα πεδίο εισαγωγής πολλών γραμμών (ένα πεδίο κειμένου):
<textarea rows="4" cols="50"> Αρχικό περιεχόμενο του πεδίου κειμένου. </textarea>
Στο παραπάνω παράδειγμα, το στοιχείο <textarea> έχει τις γνωρίσματα “rows” και “cols” που καθορίζουν τον αριθμό των γραμμών και τον αριθμό των στηλών που εμφανίζονται στο πεδίο κειμένου. Ο χρήστης μπορεί να εισάγει πολλαπλές γραμμές κειμένου σε αυτό το πεδίο.
Μπορείτε να ορίσετε αρχικό περιεχόμενο για το πεδίο κειμένου αναμένοντας μεταξύ των ετικετών <textarea> και </textarea>. Το περιεχόμενο αυτό θα εμφανιστεί αρχικά στο πεδίο κειμένου.
Το στοιχείο <button> ορίζει ένα κουμπί που μπορεί να κλικαριστεί:
<button type="button">Κάντε κλικ!</button>
Το παραπάνω παράδειγμα δημιουργεί ένα απλό κουμπί με το κείμενο “Κάντε κλικ!”. Μπορείτε να προσθέσετε το γνώρισμα “type” με την τιμή “button” για να καθορίσετε ότι αυτό το στοιχείο είναι ένα κουμπί.
Το στοιχείο <button> μπορεί να έχει επίσης διάφορες άλλες τιμές για το γνώρισμα “type”, όπως “submit” για να υποβάλετε τη φόρμα ή “reset” για να επαναφέρετε τις τιμές της φόρμας στην αρχική τους κατάσταση.
Το στοιχείο <fieldset> χρησιμοποιείται για να ομαδοποιήσει συναφείς δεδομένα μέσα σε μια φόρμα.
Το στοιχείο <legend> καθορίζει μια λεζάντα για το στοιχείο <fieldset>. Η λεζάντα παρέχει μια επεξηγηματική κεφαλίδα ή τίτλο για τον ομαδοποιημένο χώρο δεδομένων.
Ένα παράδειγμα χρήσης των στοιχείων <fieldset> και <legend>:
<fieldset> <legend>Στοιχεία Επικοινωνίας</legend> <label for="name">Όνομα:</label> <input type="text" id="name"> <br> <label for="email">Email:</label> <input type="email" id="email"> </fieldset>
Το στοιχείο <fieldset> χρησιμοποιείται για να ομαδοποιήσει συναφείς δεδομένα μέσα σε μια φόρμα.
Το στοιχείο <legend> καθορίζει μια λεζάντα για το στοιχείο <fieldset>. Η λεζάντα παρέχει μια επεξηγηματική κεφαλίδα ή τίτλο για τον ομαδοποιημένο χώρο δεδομένων.
Ένα παράδειγμα χρήσης των στοιχείων <fieldset> και <legend>:
htmlCopy code<fieldset>
<legend>Στοιχεία Επικοινωνίας</legend>
<label for="name">Όνομα:</label>
<input type="text" id="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email">
</fieldset>
Στο παραπάνω παράδειγμα, τα πεδία “Όνομα” και “Email” ομαδοποιούνται μέσα στο <fieldset> με τη λεζάντα “Στοιχεία Επικοινωνίας”. Η λεζάντα παρέχει μια επεξηγηματική κεφαλίδα για την ομαδοποίηση αυτών των στοιχείων.
Το στοιχείο <datalist> καθορίζει μια λίστα προκαθορισμένων επιλογών για ένα στοιχείο <input>.
Οι χρήστες θα δουν ένα αναπτυσσόμενο μενού με τις προκαθορισμένες επιλογές καθώς εισάγουν δεδομένα.
Το γνώρισμα “list” του στοιχείου <input> πρέπει να αναφέρεται στο γνώρισμα “id” του στοιχείου <datalist>.
Ένα παράδειγμα χρήσης των στοιχείων <input> και <datalist>:
<input type="text" list="fruits"> <datalist id="fruits"> <option value="Apple"> <option value="Banana"> <option value="Orange"> <option value="Mango"> </datalist>
Στο παραπάνω παράδειγμα, το στοιχείο <input> τύπου “text” έχει το γνώρισμα “list” που αναφέρεται στο γνώρισμα “id” του στοιχείου <datalist>. Οι χρήστες θα δουν ένα αναπτυσσόμενο μενού με τις προκαθορισμένες επιλογές “Apple”, “Banana”, “Orange” και “Mango” όταν εισάγουν δεδομένα στο πεδίο εισαγωγής.
Το στοιχείο <output> αναπαριστά το αποτέλεσμα μιας υπολογιστικής διαδικασίας (όπως αυτή που πραγματοποιείται από ένα σενάριο ή ένα σκριπτ).
Μπορείτε να το χρησιμοποιήσετε για να εμφανίσετε το αποτέλεσμα ενός υπολογισμού, μιας διαδικασίας επεξεργασίας ή άλλης δυναμικής πληροφορίας.
Ένα παράδειγμα χρήσης του στοιχείου <output>:
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)"> <input type="number" id="a" value="0"> + <input type="number" id="b" value="0"> = <output name="result" for="a b">0</output> </form>
Στο παραπάνω παράδειγμα, η διαδικασία υπολογισμού του αθροίσματος των αριθμών που εισάγονται στα πεδία εισαγωγής γίνεται μέσω του γνωρίσματος “oninput” της φόρμας. Το αποτέλεσμα του υπολογισμού εμφανίζεται στο στοιχείο <output> με το όνομα “result”.